Tuesday, February 8, 2011

How to Add Facebook XFBFML Like Button & Social Plugins to Your Web Pages & Wordpress Posts

Facebook's new Open Graph protocol is now official, having been announced and launched this past Wednesday at the Facebook f8 Conference. It is the successor to Facebook Connect which will be slowly phased out, and it is a big improvement, making it much easier to "socialize" your Web pages into Facebook's hyper-expanding social network.

According to Hyperarts "I must admit it was hard to sit still at the f8 conference after Mark Zuckerberg made the announcement in his keynote address and I attended a couple sessions that delved deeper into the Social Plugins and the Open Graph protocol. As soon as possible, which happens to be today, I decided to start experimenting by adding some social plugins to my WordPress blog."

Hyperarts Tim Ware decided he could save others a lot of time by writing up a tutorial. So here it is....

Adding the Facebook Social Plugins to your Web Page or Blog — XFBML or iFrame?

Facebook offers two methods to add their social plugins to your Web page or blog posts:

1.A simple iframe which can be easily dropped into the Web page code;

2.The XFBML tag, which requires that your page/post make a call to the JavaScript SDK and that your page be set up as a Facebook application (quite easy).

I decided to go the XFBML route which, although a bit more complicated, is more feature rich than the iframe method. For example, after clicking on your Like/Recommend button, the user can add a comment to the profile post. With the XFBML Like button, the post on the user's personal profile looks like this (if, and only if, they add a comment)

With the iFrame Like button (or if the user doesn't add a comment with your XFBML version), the post on a user's profile shows up like this:

With the iFrame Like button (or if the user doesn't add a comment with your XFBML version), the post on a user's profile shows up like this:


New WordPress Plugins for Facebook Social Plugins

If you'd be happy with the simpler iframe method, there are already several WordPress plugins to add the Like button. And here's a good post on adding the iframe Like button. But, remember, with the iframe method you can't use the extended features such as the user being able to add a comment when "liking" your post or blog. There is also a WordPress plugin that will add the XFBML social plugins to your blog, by Otto.


Create an Application - Tell Facebook Your Website, Web Page or Post is an Application

The Web page or blog post to which you will add Facebook's social plugins or other features that interact with Facebook's Graph API will be viewed by Facebook as an "application," which allows the page or post to use the JavaScript SDK. Here is the drill:



Finish reading this article by going to Hyperarts website. 


 











Read more: http://www.hyperarts.com/blog/how-to-add-facebook-like-button-social-plugins-to-wordpress-posts/#ixzz1DPdzkBlN