Make Facebook Share and Facebook Like Play Nice Together

FB Like peeing on FB ShareAs I was messing around with adding things to my blog I decided that I wanted to include the new Facebook Like button along with the Facebook Share button. I realize that they both perform similar functions, but I think they are different enough to warrant having both of them. I like the fact the Share button publishes the information about the post and seems more prominent. I realize that some people may just want something quick and easy though. That is where the Like button comes in.

So I immediately went to my WordPress plug-ins and grabbed one for the Facebook Like button. After installing it and activating it I checked my blog to see what it would look like. Unfortunately nothing showed up. When I checked the source code I saw that the code the plug-in was suppose to add was there, but for some reason it wasn’t displaying anything. At first I thought this was an issue with the plug-in I had used. So I grabbed another one. It had the same issue. Then I switched the settings from XFBML to iframe and I could now see the Like button. So I started looking around the internet and couldn’t find anything that would resolve my issue. I started going over the code and checking the page for errors. I noticed that I was getting a JavaScript error of “fb.provide is not a function”. This was odd to me as that call was coming from the FBShare JavaScript libraries directly from Facebook.

After digging around more I discovered that the Facebook Share uses Facebook’s new JavaScript Libraries. These apparently conflict with the old ones that Facebook used for Facebook Connect and the Facebook Share button. It seems as if Facebook didn’t care about the people using their old version. I completely understand wanting to keep technology moving forward, but they should make some sort of check or validation to make sure that the two can coexist for the people who want to use their new technology while transitioning from the old.

Anyways, the solution that I came up with was to use the XFBML version of the Facebook Share button. All the Share plug-ins that I looked at seem to just be  using a link and then JavaScript. It was this JavaScript call that was preventing the new Like button from being displayed. So I decided to edit the Facebook Share plug-in I was using and change the code that used the JavaScript to now use the XFBML code. I’m sure you can edit whatever plug-in you are using and change similar lines to make it work. For the plug-in I am using, I changed the following code in the function that generates the button:

$button = '<div id="fb_share_1" style="'.get_option('fb_style').'"><a name="fb_share" type="'. get_fb_type() .'" share_url="'.$url.'" href="http://www.facebook.com/sharer.php">Share</a></div><div><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></div>';

And I replaced it with this:

$button = '<div id="fb_share_1" style="'.get_option('fb_style').'"> <fb:share-button href="'.$url.'" type="'. get_fb_type() .'"></fb:share-button></div>';

I hope this information can help someone. It seems like a very easy fix that I wish someone would have already had out there that was easy find. If you have any questions feel free to leave comments and I’ll try to answer them.

Facebook comments:

Fedil

I was originally born in Missouri, but traveled around most of my childhood. My mom finally got tired of moving while we were in Dallas, Texas and I have been here ever since. After high school I started college at the University of North Texas (UNT) and started working in the computer field. I currently work for JCPenney as a front end software engineer for their e-commerce website. Before this I worked for AT&T about 12 years and started with them in 1999 (when they were Southwestern Bell). I have many passions and I really love photography. Besides photography I also love sports. I not only like to watch it, but I also love to play. Currently my friends and I play indoor soccer and flag football.

Leave a Reply

Your email address will not be published. Required fields are marked *