From Facebook, the quote plugin ".. lets people select text on your page and add it to their share, so they can tell a more expressive story". On selecting text on your page a dialogue box appears that lets users share your text to their social profiles. The experience makes it easier for your visitors to share relevant and conversion-worthy text with their posts. The simplicity of installing the code and the unobtrusive nature of the feature makes it a must-have addition to your website.
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 by using the HTML5 article tag (WordPress should render these tags by default). Additionally, you can include areas of text as quotable by using the class name of fb-quotable (handy if you only require quotable text in a limited area). If neither tag is present, your whole page becomes quotable.
While Facebook says that the code can be used anywhere, we've rendered it in the footer as per their examples.
Our only criticism of the plugin is that the button style often clashes with sites that use colored backgrounds - such as ours. With all things Facebook, however, this will likely change over time.
WordPress Function
Copy and paste the WordPress function into your theme's functions.php file or, if you sensibly have one installed, your custom functions plugin. You may optionally download and install our plugin from the bottom of of the page.
It's a requirement when using this function that you download the FBSDK function. Review its use and download the code here. It's possible that your theme is already rendering the SDK by default (open up your source code and search for "connect.facebook.net" to confirm).
While we've provided a plugin, the easiest method of installation is via inclusion in your custom functions file. The only advantage of our plugin is that we'll let you know when there's an update (which will be whenever Facebook introduces a new feature).
The result: Highlight some text on this site and a "Share" dialogue box will appear.
Considerations
- The HTML5
data-layoutmay be set tobutton(as opposed to the defaultquote). It behaves the same as the "quote" option but has just a blue Facebook icon in the button. We experienced problems with its use. - Object Graph (OG) tags should be kept up to date. The function uses the WP permalink as an attribute which should be the same as the OG URL in your head.
- Outside of WordPress, usage is simple. Just use the
divtags as provided in the WP function. - More information is available on Facebook's website
.
Download
The WordPress function is listed as shortcode.
