Integrating Facebook with Blogger Blog via Facebook Social Plugins

Web 3.0 is here and if you are still using the old technology you are bound to be extinct soon. At F8 conference on April 21, Facebook took a giant leap into showing who owns the internet. Beating Google in internet race, the tortoise again beat the quick rabbit who had paused to create a buzz a while back.
Remember the cute 'Like' buttons on facebook where you Like your friends pictures, names and everything? Now, with this revolutionary Facebook Social Plugins this Like can be integrated anywhere, even in your blogs.
Check the Ossum screen shot here:

The live demo is available on the blog, just Like the post and check your profile.
What's more? If a person from your friend list has liked this post, you can see his/her name right on top of the post, creating it  much more amazing social experience.
The moment someone likes your post, the similar activity is seen in the timeline of the person.

This is the best user social interaction you can give to users. A great help for the pro bloggers who wish to create more engaging stuff to users.
Installation Guide:
  1. Select ‘Layout’ tab
  2. Select ‘Edit HTML’ tab
  3. Download a full template of your existing template. If you fail, you can quickly revert back to original works and no one will know.

  4. Check the ‘Expand Widget Templates’ box
  5. Now lets get our hands dirty with HTML and XML (don't get scared, just do as I say.)
  6. To install the Like button plugin on your blog, you first need to install Facebook JavaScript SDK
  7. In your code search for <body> tag and inside it, install Facebook JavaScript SDK (Copy-paste the code in green from that page)
  8. Save the template, if you are successful blogger will allow you to save, else go back to point number 3 and upload older template you downloaded.
  9. (Optional:This step we do as Blogger has an annoying habit to make the title of the blog post as the blog title, to over come this we customize our title with post title. To skip jump to step 11) Now, search for <head> in your HTML template and just below it copy the following lines of code:


    <b:if cond='data:blog.pageType == &quot;item&quot;'>
          <meta expr:content='data:blog.pageName' property='og:title'/>
    <b:else/>
           <meta expr:content='data:blog.pageTitle' property='og:title'/>
    </b:if>
             
  10. Save the template. If it saves you are successful or start over.
  11. Now Find that line that looks similar to:


    <b:loop values='data:posts' var='post'>  
  12. Place the code below between this line and the line reading ‘</b:loop>’


    <fb:like action='like' colorscheme='light' expr:href='data:post.url' layout='standard' show_faces='true' width='450'/>
  13. Save it. If it saves you owe me a cookie. Else go back to step 3
To customize the Like button use the Like Plugin page, just replace the href=’Some url’ in the code with expr:href='data:post.url' so that every blog post you make has its own life button.
You can use other Facebook Social Plugins by using them in the HTML/JavaScript widget.
If you like this post do drop in a comment or Like this to your friends so they can also benefit from this.
Other Blogger Widget: Blogger Copying prevention Widget

9 comments

  1. Great! and since I am good friends with the author, if I can't manage this, I'll ask the author himself to do it! ;)
    But seriously, all these widgets will decrease that one thing we all cherish, words of our readers: comments! :)

    ReplyDelete
  2. That's interesting sid. I saw that you liked some of your posts on FB and was wondering how you did that. Thanks for the info

    ReplyDelete
  3. In your code search for tag

    What tag?don't get this part...

    Now, search for in your HTML template

    What do I search for?the code underneath needs to be pasted below that right?

    Help please I wanna install the 'like' thingie.

    ReplyDelete
  4. I like the idea of integration of blog with face-book with the help of inbuilt featured plug-in.I saw that you liked some of your posts on Face-book and was wondering how you did that. Thanks for the information regarding the code-snippet for the particular integration module.

    ReplyDelete
  5. @Guria
    Its real easy you don't need to be a PHD to do it...:P

    ReplyDelete
  6. @Avada
    Sorry don't know how to use it on wordpress but there are sites for that...:D

    ReplyDelete
  7. @Sammy
    Oops...my bad...made the changes...:D

    ReplyDelete
  8. @Rick
    Thanks a lot...:D hope u use it....

    ReplyDelete

What do you think about the post? Have your say, like, dislike or even hate me. Tell me.

You might also want to Subscribe to RSS feeds or follow me on Twitter (@sidoscope) or on facebook

I don't need weapon, I have a sharp tongue.

Home

Contact Form

Name

Email *

Message *