All the steps are same for adding facebook plugins like Like button / Login-Logout button , Comment Box etc. Only there is one step difference
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
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