How To Integrate facebook fan page to your blog

How to integrate facebook fan page to website/blog

I have seen almost every blogger linking their facebook fan page with their website so that there will be like box in their website where you can see the fans of the blog on facebook. Fan members can be increased when you click the like button on the like box.

Previously, you have done with like box setting but now facebook require you to go through page plugin and set up your fan page in your website. In this particular tutorial I am going to teach you two ways of creating a fan page, one is simple and one is dynamic, you can check here at my blog as well, right now I have two widgets of facebook fan page integrated to by blog.
For the simple one
1.       Go to the facebook developers page Click here, Skip add after 5 second and you will be redirected to facebook developers website.

2.       Enter your facebook page address, Open your facebook page with different browser and copy the url and paste it there at the developers page.

3.       Choose the width and height and choose other options aswell, like to show post or not to show friends’ faces or not etc…

4.       See designs and then choose your own style and then click get code.

5.       Now you will see two codes just in the figure below.

6.       Now copy the 1st code and go to your bloggers template and click Edit Template, Then click your cursor over anywhere inside the template code and click CTRL+F from your keyboard this will open a search box where you should enter<body>, When you find <body>, if you have inbuild blogger theme you should search only <body. Then just paste your code just below the  <body> or <body line and click Save.

Solve error with facebook page plugin javascript code

One thing, sometimes this code don’t work, I have faced the problem as well, It will show error like “Error parsing XML, line 662, column 64: The reference to entity "version" must end with the ';' delimiter.  For this, you have to add extra code in between the line that is showing the error, you have to place “amp;” only amp; into two places, just after ‘&’, First before editing the code looks like this:                                            js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.4&appId=140422499312488";  You should make this code look like this:
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&amp;version=v2.4&amp;appId=140422499312488"; You just need to add ‘amp;’ in between “& and version” and “& and appId”. Then save the template, it should work fine.

7.       Then you copy the next code and go to the “Layout section” and click Add New Gadgets and select Html/Javascript, give it a name like “Like us on Facebook, but it’s optional. Paste the code there and click save……Cheers your facebook fan page is integrated to your website.

Add Dynamic Facebook fan-page

This is the another way of putting your facebook fan page inside your website, I mean this will be dynamic that will move along the cursor where you will go the facebook tab will follow and when you hover your mouse over there it will pops out. See my blog, I guess you got me. Its right here to the right side of the screen.

Simple copy the below code and paste before the </head> tag. You may paste it just above the </head> tag.
The code is:

<!--facebook floating fan page -->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>
 <!-- Script end -->

Click Save

Now go to “Layout Section”, Add new gadget, Select  Html/ Javascript and then paste the below code in there with little bit of modification.

<!-- Facebook 2nd code paste these on Html/Javascript -->
<script type="text/javascript"> /*<![CDATA[*/ jQuery(document).ready(function() {jQuery(".abtlikebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);}); /*]]>*/ </script> <style type="text/css"> .abtlikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQqHsSy5kFroqn9Q98G9Dp-iBvcz6O8XyesKOr9phCxOjdYhRoPxs0AiBx720TBMP75GBV7yqhvz70xtKVQcLkn5BqV5_qX082KGrT1o9YRwQEwjDKHGqL5jFBZPf4-nJDdmcehfhF_L4/s320/fb1-right.png") no-repeat scroll left center transparent !important; float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index:  99999;position:fixed;right:-250px;top:20%;} .abtlikebox div{ padding: 0; margin-right:-8px; border:4px solid  #3b5998; background:#fafafa;} .abtlikebox span{bottom: 4px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} .abtlikebox span a{color: gray;text-decoration:none;} .abtlikebox span a:hover{text-decoration:underline;} } </style> <div class="abtlikebox" style="">     <div>     <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fpages%2FA-complete-blog%2F403726959822786&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;border_color=white&amp;connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: white; overflow: hidden; height: 270px; width: 245px;background:#fafafa;"></iframe><span><a href="http://www.askyuvi.com "> Askyuvi.com</a>
<!—Facebook 2nd code script ends -->

Now, you need to alter this code little bit, the part highlighted in red is my facebook page address, you need to replace is by your own. My facebook page is http://www.facebook.com/pages/A-complete-blog/2F403726959822786. I guess you have understood now, Copy your facebook page address and where there is http://www. You should replace it with “http%3A%2F%2F”. And where there is ‘/’ you should replace it with ‘%2F’. Now after this alteration save it to the gadget and check out the cool facebook fan-page in your blog.

Hope you liked this article on “Integrate facebook fan page to your blog”, if you like this please like and share this. Don’t forget to subscribe if you don’t want to miss similar articles like this. Thank you.

Post a Comment