Make Facebook Share and Facebook Like Play Nice Together
As 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.