Australia's Leading Digital Marketing Experts. T. 1300 235 433  |  Aggreagtion Enquires Welcome

Add The Facebook Quote Plugin To WordPress

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

1
<?php 
2
/*
3
 Add The Facebook Quote Plugin To WordPress
4
 http://www.beliefmedia.com/facebook-quote-plugin-wordpress
5
 Requires Facebook SDK: http://www.beliefmedia.com/facebook-sdk-wordpress
6
*/
7
 
8
9
  echo '<div class="fb-quote" data-href="' . get_permalink() . '" data-layout="quote"></div>';
10
}
11
add_action('wp_footer', 'beliefmedia_facebook_quote_plugin');

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-layout may be set to button (as opposed to the default quote). 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 div tags as provided in the WP function.
  • More information is available on Facebook's website .

Download

The WordPress function is listed as shortcode.


Title: Add The Facebook Quote Plugin To WordPress (WP Plugin)
Description: Highlighting text in your WordPress article causes a Facebook share dialogue box.
  Download • Version 0.1, 1.3K, zip, Category: WordPress Plugins (General)
WordPress Shortcodes, (441.0B)    

Download our 650-page guide on Finance Marketing. We'll show you exactly how we generate Billions in volume for our clients.

  AUS Eastern Standard Time (Connecticut)

  Want to have a chat?
 

Like this article?

Share on facebook
Share on Facebook
Share on twitter
Share on Twitter
Share on linkedin
Share on Linkdin
Share on pinterest
Share on Pinterest

Leave a comment

READY TO HAVE A CHAT? CALL US ANYTIME ON 1300 235 433