The Howto Guide to Add Facebook Social Plugins to Your WordPress Site

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).

<iframe src=”http://www.facebook.com/plugins/like.php?layout=standard&show_faces=true&width=450&action=like&colorscheme=light” scrolling=”no” frameborder=”0″ allowTransparency=”true” style=”border:none; overflow:hidden; width:450px; height:px”></iframe>

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:

  1. iFrame
  2. 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).

facebook-create-app

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

facebook-app-id

2. Adding custom <html> tag

Now, go to your Theme folder and open the header.php file. Change the <html> tag to the following:

3. Adding custom meta tags to your <head> tag

Still in your header.php, add the following line in between the <head> </head> tag.

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.

facebook-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 your <body> tag.

Add the following lines right after the <body> tag.

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

facebook-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.

facebook-like-button-config

Highlight and copy the XFBML code

facebook-like-button-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

facebook-in-MTE1

Like box in the sidebar

facebook-like-box-in-MTE

Recommend box in the post footer

facebook-recommend-in-MTE

References

Here are some useful links for your reference:

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.

35 comments

  1. This is great. However, now when anyone posts a link to any of my blog posts in their news feed the related image doesn't appear… Any ideas??

  2. Did you set the absolute path for the image in the meta tag <meta property=”og:image” content=”URL TO YOUR THUMBNAIL IMAGE”/>?

  3. That is due to the initialization of the script on the Facebook side. It usually loads faster on subsequent visit.

  4. Thank you for a good, clear and valuable guide – all is working well on a couple of blogs I am trying – but – and I am sure this is a simple question and I am just thick – but how do I find out the “URL TO YOUR THUMBNAIL IMAGE”

  5. First, create a thumbnail image for your site.
    Second, upload the thumbnail image to anywhere in your site
    Third, include the URL of the thumbnail image in the respective field.

    That's it.

  6. I need help! Anyone knows the reson why adding the script block mentioned at #4 crashes IE7?
    specifically this line: document.getElementById('fb-root').appendChild(e);

    There is not much documentation about it online and I was hoping to hear from others who had the same problem.
    Thanks!

  7. oh,my god ! Thant's good article. We like reading article ! We will always come come here reading. thanks a lot.

  8. Question for you before I go through all these changes.
    For a good year, I have been using this code to put a facebook like box on my website:

    <script type=”text/javascript” src=”http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US”></script><script type=”text/javascript”>FB.init(“9d3c860cd3dd1fc23973fd49ed92142c”);</script><fb:fan profile_id=”298892494621″ stream=”1″ connections=”10″ logobar=”0″ width=”300″></fb:fan>

    It works great. On subsequent websites for other people, I have attempted to use this code but put in their profile id instead of mine. Their data appears, but the box is cut off at the bottom…fans pictures are cut in half.

    I've tried using the iframe code that is generated via facebook for them, but I neither like iframes nor like the “facebook social plugin” footer that it attaches.

    What is wrong with the above code that it works for my profile id, but no one elses?

    Thanks in advance.

  9. First of all, are you putting the script in a div of fixed height? Check the css code for the site. It could have a fixed height that restricted the display of the fanbox.

  10. I followed the instruction above and added the FB comments to a wordpress blog. Unfortunately any comment posted to a particular post shows up on each and every other post in the blog.

    Any idea what I need to do to keep them confined to the page / post they were posted on?

    • You might need to add in another line

      <meta property=”og:url” content=”<?php echo get_permalink();?>”>

      in the header portion.

  11. Thanks for this article. It’s the first I’ve come across with this information…

    I’ve implemented the XFBML version of the Like button on my posts/pages. It’s working, but I’m curious as to why after “sharing with a comment” some posts/pages get posted to my profile’s news feed with the default thumbnail and no excerpt while others get posted with an image from the post/page and an excerpt.

    http://SavoAuctioneers.com

    • You might want to want to add in another field to the head portion

      <meta property=”og:url” content=”<?php echo get_permalink();?>”>

      and see if it works

      • Thanks. That keeps it consistent now. When something is Liked with a comment, the news shows the comment, the title, the default blog description, and the default thumbnail.

        BTW, is there any instance or value in a meta tag in which one might put and if so what would the full string be?

      • Sorry, that last comment weeded out part of my question. can the_excerpt(); function be used in the header meta tags?

        • You can use the_excerpt(); function, provided you initialize the post before the start of the header tag.

  12. Hi…thank you so much for this post :)
    I almost have the “Like” button figured out…followed your steps and placed the button where I want it to be within my sites content. However, I’m using my ‘dummy’ facebook page to test it and it’s not working how I thought it would.

    I would like my guests to be able to “Like” individual posts. As I’m testing this, if I click “Like” from the button I placed in single posts, it’s showing up…
    On my website: Every post now has a (1) “Like”
    On my ‘dummy’ Facebook page: Name Likes “site name” on “site url”

    1. What can I do to make this feature be enabled for individual posts?
    2. What do I need to change/add to make it appear on Facebook as – Name Likes “post title” on “site name”

    Thanks :)

  13. Damien,

    My site is http://savoauctioneers.com

    I have used your tutorial and combined the functions of the All in One SEO Pack so I can have a custom description and title for each post/page using the following code between the head tags:

    ID, ‘_aioseop_description’, true)); ?>

    ID, ‘_aioseop_title’, true)); ?>

    <meta property="og:url" content="”>
    <meta property="og:title" content="”/>

    <meta property="og:description" content="”/>

    This is working great except on the home page. I am using a template called inFocus that automatically generates a static home page. When setting up this theme, I don’t have to change my reading options in the WP setting menu. So there is no home page to add meta data to. What’s happening is when you share via Facebook or use the FB Linter on the root directory/home page (http://savoauctioneers.com), both the share feature and the Linter pull the title, permalink, and description of the latest blog post.

    Is there a way to use the is_home() function in the header to create a custom set of meta data just for the home page while allowing the rest of what I have done do it’s job?

  14. Sorry, forgot to use the code tags. Here’s the whole code:

    `
    ID, ‘_aioseop_description’, true)); ?>

    ID, ‘_aioseop_title’, true)); ?>

    <meta property="og:url" content="”>
    <meta property="og:title" content="”/>

    <meta property="og:description" content="”/>

    `

  15. I am the admin for about 10 different blogs belonging to other people. Do I have to set up a separate application for each blog? or can I use the same application on all the blogs. The problem I see with this is the website URL…….

    • You can use the same application, but you have to specify the URL for each blog to avoid mixing up the other blogs.

  16. I am having trouble getting the recommendations box to show the thumbs on my WP blog. I had to use something like but cant recall how it worked. Does anyone know?

  17. Thanks v much for sharing this.  I setup a little comp using FB comments then discovered it wasn’t working with IE8 – aRGGHH!

  18. My developer added the live stream to my website by can’t figure out how to make me the admin. Is there code he needs to add for that?

    • Do you mean admin for your blog or your facebook page? If facebook page, you can add admin user in the Edit Page -> Manage Admins section

Comments are closed.

Sponsored Stories