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.



No comments:

Post a Comment