This time there would be no talking about here and there, totally straightforward to the topic. Now its time to implement New Facebook Responsive Page Plugin to your blogger/blogspot blog.
Step 1: Go to this Link
Step 2: Choose your Page Name, custom height and width of plugin, cover image and post according to your need.
Step 3: Now click on Get Code Button. It pop-up with two list of code example in this image
Step 4: Then in the 1st code replace
<script> with <script> //<![CDATA[ and </script>with //]]> </script> this code or you simply copy the below code formatted for blogger/blogspot.<div id="fb-root"></div>
<script>
//<![CDATA[
(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&version=v2.3";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]>
</script><body> or if you don't find <body> tag then search for<body expr:class='"loading" + data:blog.mobileClass'> tag and save the template. (Backup Your Template Before Doing This)Step 6: Now go to Layout >> Add a Gadget >> Choose HTML/JavaScript, give title as Facebook or different and paste 2nd piece of code of Page plugin in the content box.The code Look like this:
<div class="fb-page"
data-href="https://www.facebook.com/mubyblog"
data-hide-cover="false"
data-show-facepile="true"
data-show-posts="false">
<div class="fb-xfbml-parse-ignore">
<blockquote cite="https://www.facebook.com/mubyblog">
<a href="https://www.facebook.com/mubyblog">mubyblog
</a>
</blockquote>
</div>
</div>
Post a Comment