Showing posts with label add facebook like button to blogspot. Show all posts
Showing posts with label add facebook like button to blogspot. Show all posts

Sunday, August 31, 2014

Adding Facebok Login / Like / Logout button to Blogger / Website.

All the steps are same for adding facebook plugins like Like button / Login-Logout button , Comment Box etc. Only there is one step difference

Below are the steps with screenshot to embed the buttons on Blogger. 

Step 1 & Step 2:  Open your blog and log-in into it. Then you will see "Templates" menu in the left, Click on it and the step 2 is click on "Edit HTML" as shown in below screenshot:




Step 3:  Clicking on Edit HTML, We need to add namespace "xmlns:fb='http://ogp.me/ns/fb#'" as highlighted in below image. Once you add the namespace, Click on "Save Template" as highlighted.



Step 4: Once you save the template, click on "Layout" menu(3rd last) in the left menu list.
             This will open up a page as shown in below screenshot.
Click on "Add a Gadget" button wherever you wish to add facebook plugins. 


Clicking on "Add a Gadget" will open up a popup with multiple option of Gadgets as shown below:

from this popup, we have to select "HTML/Javascript" which is at 3rd last position in above screenshot.
This will further open up a popup as shown below, where we need to add below code snippet:

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&appId=694894273921188&version=v2.0";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>


<div class="fb-like"   data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div>



The above code is for "Like" button only, if you want to add Login/Logout or comment plugin, you only need to change the highlighted div from above step only.

<div class="fb-like"   data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div>

You can get other plugins code from https://developers.facebook.com/docs/plugins
Step 5:
After saving this, popup will be closed. Then click on "Save Agreement" as shown in below figure.



Step 6: Yipeee!!! you are done, this will show you Facebook like button.