Thursday 4 August 2016

How To Add a Facebook Page To Blogger / Website

How To Add a Facebook Page To Blogger Website
If you owns a website or blog, then here is How you can add a Facebook page to your blog or website. As connecting your Facebook page to your blog can bring the potential out of Facebook to your Blog or Website.

Adding Facebook Page To Your Blog

How to add facebook to blogger
How to Add Facebook Page to Blogger 


1. First Go to Dashboard of your Blog or Website.
2. Then at blogger navigate to 'Layout' tab.
3. Now click on 'Add a Gadget' and click on 'HTML/JavaScript'
how to add a facebook page to blogger
Add HTML/JavaScipt 


4. Now paste the following code to content section of 'HTML/Java Script' tab and replace 'guycomputer' with your Facebook's Page's URL or user name.

<div class="fb-page" 
  data-href="https://www.facebook.com/guycomputer/"
  data-tabs="timeline,events,messages" 
  data-width="380" 
  data-height="380"
  data-hide-cover="false"
  data-show-facepile="false" 
  data-show-posts="false"></div>
Adding Facebook Code To Blog


Now to makes changes to the Styles of your Facebook Page in your website  you can change the Value of this code to True or False as required.  Here "data-hide-cover" stands for your Facebook cover photo, 'data-show-facepile' stands for the user's faces who already had liked your Facebook Page and 'data-show-posts' controls the display of your Page's post here at your blog or website.

  data-hide-cover="false"
  data-show-facepile="false" 

  data-show-posts="false"


Now if the above method of adding a Facebook page doesn't work then you must try this method.


Adding Facebook's JavaScript to your blog's/website's  Body  

Now the above codes failed because your website or blog had missing Facebook java-script. So it's time to add it to your blog.

First go to 'Template' and click on 'Edit HTML'
edit html of blogger
Customise Blog's Template


Then click inside that HTML code and press 'Ctrl + F' and type '</head>'. Now after that search for '< body' which must be below two or three lines of '</head>' tag. Now paste below code somewhere inside the body tag.

<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_GB/sdk.js#xfbml=1&version=v2.7";fjs.parentNode.insertBefore(js,fjs);}(document,'script','facebook-jssdk'));</script>  
add facebook code to blog or website
Paste Facebook code as Shown Here

Now after this save your HTML template. And now again navigate to 'Layout' and 'Add a Gadget' and then click 'HTML/Java Script' and paste the code shown in 1st method above

If you still faces the problem, then you can verify the code from Facebook Developer Page. 

Further you can check the live version of adding Facebook to your blog by this Video on 'How to add Facebook page to blogger'.






So it is now very easy to connect Facebook with your blog. Now start connecting with the people at Facebook and make a Post right now to your new people. 

If you liked the article then share this post with your friends too. And if you have any questions regarding this topic then you can let me know in comments. 


No comments:
Write comments

Hey, we've just launched a new account on Twitter You'll like to connect - https://twitter.com/theguyscomputer
Join Our Newsletter