How to Add the Facebook Share Button to WordPress

By Janet Driscoll Miller | Oct 20, 2010
More Articles by Janet


We recently redesigned the Search Marketing Sage blog, and with that redesign we wanted to add more content sharing options, like Facebook, to the blog. The Facebook Share button is a handy way to help readers share links to your content quickly and easily, but set up might not be a straightforward as you think.

For individual blog posts, the Facebook Share code works very well in WordPress. While the Facebook Share button “generator” (located here), works fairly well, I’d recommend instead using the Facebook Share button plugin for WordPress (located here), because the Facebook Share Code doesn’t always work well on home pages, like mine, that show multiple posts on a page.

Why The General Facebook Share Code Doesn’t Work Correctly on Some Blog Home Pages

The Search Marketing Sage blog, like many blogs, has a home page comprised of multiple snippets of recent blog posts. After launching our blog redesign, I realized that the Facebook Share button for each of these posts on the home page was:

  1. Showing an incorrect number of shares — the share count was the same amount for each post listed on the home page of the blog
  2. When the share button was used on the home page for a particular post, the link shared was actually just a link to the blog home page, not the individual post.

Taking a look at my source code, it appeared that I was passing the information correctly to Facebook using the parameters they set up for blog post title (in green) and link (in red):

<a name=”fb_share” type=”button_count” href=”http://www.facebook.com/sharer.php?u=http://marketing-mojo.com/2010/10/19/301-redirects-in-htaccess-with-friendly-urls/&t=When Friendly Turns Ugly: 301 Redirects in .htaccess with Friendly URL Rewrites“>Share</a><script src=”http://static.ak.fbcdn.net/connect.php/js/FB.Share” type=”text/javascript”></script>

Further review of the Facebook Share developer documentation showed that the URL needed to be encoded properly. All symbols and spaces needed to use their associated HTML character code. In other words, for instance, spaces needed to be replace with %20. A complete list of HTML character codes can be found here. Sounds great, right? Well easier said than done in WordPress. I would have had to write a function to encode the_permalink(); value in WordPress to include these characters and a function to also encode the_title(); value. If you’re a WordPress expert that works well, but it likely doesn’t for the rest of us! That’s why I found the plugin route to be much faster and easier.

Setting Up the Plugin

Install the plugin in your WordPress, and the you can customize the button settings, just like you can with the Facebook Share button generator. The main benefit here, though, is that the plugin will encode your links and titles for each post on your home page, ensuring that the link shared via Facebook is that of the individual post, not just the home page itself.

Share this article

Share on LinkedIn Share on Twitter

Receive Monthly Digital Marketing Tips

Subscribe to monthly updates from the Marketing Mojo Blog to get the latest digital marketing tips, best practices and insights - hot off the presses and straight to your inbox!

 

Blog Search