For those who have followed Facebook F8 developer conference, you should know that Facebook CEO Mark Zuckerberg had made official the launch of Open Graph protocol and the social plugins. Being the successors of the Facebook Connect, these two things are going to change the whole ball game and bring the web “socialness” to a whole new level.

For those who are still unaware, the new Open Graph protocol and the social plugins are set of tools newly launched by Facebook that allow you to integrate Facebook deeply into your site and make your site more “sociable”. Things such as the “Like” button can now be easily added to your page and enable your users to share your content in their Facebook account.

How do I add a “Like” button to my site? (The easy way)

To add a “Like” button, simply paste the following iframe code to any part of the page (or the location where you want it to appear).

To change the setting of the “Like” button, go to this Facebook Like button page, customize the setting, grab the iframe code and paste it to your site.

Alternatively, install the Like plugin which can automate most of the basic stuffs for you.

Is that all? What if I want more?

You asked for it. So here you are, the method to integrate Facebook deeply into your site (and turn your site into a social graph).

There are basically two ways to implement Facebook social plugins in your site:

  • iFrame
  • XFBML

I would recommend using XFBML as it allows you to access to the whole wide range of plugins. The following method will be done using the XFBML protocol.

1. Register a Facebook app

Don’t worry, we don’t need you to learn programming and whip up an ad. All you need to do here is to register for a Facebook app (In short, just fill up a form and submit it).

Go to Facebook Application Creation page and create an app (you’ll need to login to your Facebook account).

Once the application is created successfully, you will see your application dashboard. Record down the Application ID (you will be using it later).

2. Adding customtag

Now, go to your Theme folder and open the header.php file. Change thetag to the following:

3. Adding custom meta tags to yourtag

Still in your header.php, add the following line in between thetag.

Note:

  • Remember to change all the CAPS field to your site setting in the meta tags.

  • To find out what is your Facebook USER_ID, go to http://graph.facebook.com/your-username. You will see your FB user ID.

  • Check out this page for full explanation of the meta tags and other meta tags that you can include

4. Adding of javascript sdk

To make use of the XFBML, we need to add the javascript SDK to yourtag.

Add the following lines right after thetag.

Now, you will need to replace “YOUR APP ID” with the application ID that you have created just now.

5. Choose the social plugins that you want to use

Go to the Facebook social plugins site, you will see a series of tools that you can implement in your site.

Like button: Show a “Like” button on your site. The most commonly used plugin. Recommendations: Show users personalized suggestions for pages on your site they might like. Login with Faces: Allow the users to sign up to your site with their Facebook account. it also shows a list of the user’s friends who have also signed up for your site. Comments: Allow users to comment on your site. The comments will also be posted back to the users Facebook wall. Activity Feed: shows users what their friends are doing on your site through likes and comments. Like Box: This is previously known as the Fan box. Facepile: Shows profile pictures of the user’s friends who have already signed up for your site. Live Stream: Lets your users share activity and comments in real-time as they interact during a live event.

6. Configure the social plugins

Choose the social plugin that you want to use on your site. In this example, I will use the “Like” button since it is the most commonly used among all.

Click on the Like Button link

Configure your “Like” button settings. Leave the URL field blank. Click on the “Get Code” button at the end to grab the source code.

Highlight and copy the XFBML code

Paste it to the places (either in the widgets area or the single.php file) where you want the “Like” button to appear.

Do the same for any other social plugins that you use.

That’s it!

Implementing of social plugins in MakeTechEasier

“Like” button for every post entry

Like box in the sidebar

Recommend box in the post footer

References

Here are some useful links for your reference:

  • Facebook OpenGraph protocol
  • Facebook Javascript SDK
  • Facebook Social Plugins
  • Facebook Application Dashboard

If you find this post useful, don’t forget to “Like” it and share it with your friends. Do let us know in the comments how have you make use of the social plugins in your site.

Damien Oh started writing tech articles since 2007 and has over 10 years of experience in the tech industry. He is proficient in Windows, Linux, Mac, Android and iOS, and worked as a part time WordPress Developer. He is currently the owner and Editor-in-Chief of Make Tech Easier.

Our latest tutorials delivered straight to your inbox