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.
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.
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 PluginCode ExampleSettingsAdjust 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!
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 bodyYou can change the following settings:
Setting | HTML5 Attribute | Description | Default |
---|---|---|---|
|
| The absolute URL of the page that will be quoted. | Current URL |
|
|
|
|
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:
<article>
elements, orfb-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.
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&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.