Quote Plugin

The quote plugin lets people select text on your page and add it to their share, so they can tell a more expressive story. Note that you do not need to implement Facebook login or request any additional permissions through app review in order to use this plugin.

Quote Sharing for Mobile Web

If you are building a website for mobile web, or the provided button doesn't fit into your website design, Web Share Dialog also supports adding a quote to a link share.

Quote Sharing for iOS & Android

If your app is native to iOS or Android, you should use the native Share Dialog on iOS and Share Dialog on Android instead.

Try the Plugin Code Example Settings

Try the plugin

Select part of this sentence to see the plugin in action.

Code Example

Adjust the value data-href to your website URL. Make sure your Open Graph metatags are up to date and the data-href for the plugin matches the og:url property.

<html>
<head>
  <title>Your Website Title</title>
  <!-- Comment #1: OG Tags -->
  <meta property="og:url"           content="http://www.your-domain.com/your-page.html" />
  <meta property="og:type"          content="website" />
  <meta property="og:title"         content="Your Website Title" />
  <meta property="og:description"   content="Your description" />
  <meta property="og:image"         content="http://www.your-domain.com/path/image.jpg" />
</head>
<body>

  <!-- Comment #2: SDK -->
  <div id="fb-root"></div>
  <script>(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.6";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</script>

  <!-- Comment #3: Content -->
  <h1>Your Headline</h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget tristique nibh, 
    vel consequat purus. Praesent molestie, turpis ut ultrices commodo, felis arcu cursus enim, 
    vel porttitor ante quam vel lacus. Quisque at laoreet sapien. Proin nec purus dolor. Integer 
    pharetra nec ligula a condimentum. Fusce sem orci, porta ut felis id, commodo imperdiet risus. 
  </p>

  <!-- Comment #4: Plugin Code -->
  <div class="fb-quote"></div>

</body>
</html>

Try it yourself!

Code Comments

OG Tags: You can use open graph tags to customize link previews.
SDK: Load Facebook SDK for JavaScript.
Content: Your page content.
Plugin Code: Your quote plugin code from the configurator. You can put this anywhere in the document, and it will show only when you highlight text within that container. In this example, it shows only when you highlight text within the body

Settings

You can change the following settings:

Setting	HTML5 Attribute	Description	Default
`href`	`data-href`	The absolute URL of the page that will be quoted.	Current URL
`layout`	`data-layout`	`quote`: On text selection, a button with a blue Facebook icon and "Share Quote" text is shown as an overlay. When a person clicks it, it will open a share dialog with the highlighted text as a quote. `button`: Behaves the same as the "quote" option but has just a blue Facebook icon in the button.	`quote`

Quotable Areas

Some areas of your web page may not benefit from being quotable, such as menus, sidebars, footers. You can define the quotable areas of your page using:

HTML <article> elements, or
any element with class name of fb-quotable

You can mix and match as many of the two as you want and define quotable areas.

If your page contains neither <article> nor class="fb-quotable", the whole page becomes quotable.

Changing the Language

You can change the language of the quote plugin by loading a localized version of the Facebook JavaScript SDK. When you load the SDK, change the value of js.src to use your locale. Replace en_US with your locale, e.g., fr_FR for French (France):

js.src = "https://connect.facebook.net/fr_FR/sdk.js#xfbml=1&amp;version=v2.6";

Supported locales are referenced in the Facebook Locales XML file. You may need to adjust the width of a Social Plugin to accommodate different languages. You may find more information on our Localization & Translation page.