I am Jeff

Today at the Facebook developers conference, better known as f8, Facebook announced a new set of plugins (more like widgets) for your website or blog. One of the widgets is the new “like” button, which as you may already know recently replaced the “become a fan” button where visitors can become a fan of your Facebook fan pages. The thing that caught my eye on this new button was the ability to use it on blogs and websites outside of Facebook to promote your content back inside Facebook.

While the functionality is pretty much the same as the current “share this” Facebook plugin, I think this new version will actually perform better.  My two main reasons for thinking this are that the plugin now tells you which of your friends have “liked” the content, and then it displays pictures of other people who have done the same. I guess it comes down to the fact that this plugin/widget just looks better in my opinion. Check it out:

In the setup options for the plugin, you can specify the width, number of rows, color, and whether you want it to display “like” or “recommend”, which ties in perfectly with the “recommend” sidebar widget as seen in the sidebar to the right of this post. This widget shows who has recommended or liked specific content on your site. Kinda like a “most popular” blog posts widget, that also posts the status to each users Facebook page.

Getting it to work on a WordPress blog

I found that using the stock code that Facebook generates doesn’t work for promoting specific posts on your blog. It sends over the title and URL of your blog to the persons Facebook page. So basically when someone named Bob clicks the Like button, they would see ” Bob likes XXXXXX on YYYYYY” where the X’s are the name of your blog, and the Y’s are the URL. This works, but isn’t ideal for promoting the awesome blog posts we all write.

So how do you fix this problem? Well, I had to do a little digging, but I finally came across someone who had figured it out. You just have to replace a snippet of the Facebook generated code with a piece that tells it to use the title of your individual blog posts in your single.php file. It took a couple tries to get it in the exact location I wanted, but I finally got it.

So, instead of going into detail on which code you need to change, I’m just going to give you the exact code you need to use:

<iframe src=”http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&amp;layout=standard&amp;show-faces=true&amp;width=500&amp;action=like&amp;colorscheme=light” scrolling=”no” frameborder=”0″ allowTransparency=”true” style=”border:none; overflow:hidden; width:500px; height:60px”></iframe>

A couple items to note:

You can change the width and height variables.

The basic “Like” button is available via a simple iframe(code above) you can drop into your site easily. A fuller-featured “Like” button is available via the <fb:like> XFBML tag and requires you use the JavaScript SDK. The XFBML version also allows users to add a comment to their “Like” as it is posted back to Facebook.

I tried using the XFBML code on one of my other WordPress blogs running the Thesis theme, using Open Hooks, and had no luck. I then tried the iFrame code above and it worked fine. However, by doing so it screwed up my original Fan Page box in my sidebar. But then I was able to use the XFBML code to replace that box with the new “Like Box”, so it all worked out in the end.

So what does all this mean?

Well, basically it means a couple things. You’re now going to have a better looking, more flexible way for readers to share your content with their friends on Facebook. Plus, you’ve now got more options for building community engagement (with the other plugins/widgets) if you are using a Facebook page along with your WordPress blog. Will this result in more traffic? I hope so. Will it promote better interaction with readers? I hope so. Only time will tell.

Want to see this plugin in action? Go ahead and click the “Like” button down below. It’d be much appreciated!