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.

Code Comments

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.

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):