If you have a Facebook fan page or an official Facebook page of your blog or website, then you can place it in your site. Certainly this will ease your interaction with visitors or fans. Another issue you should keep in mind that it is also a part of SEO. Placing a like box may attract visitors to visit your site!
Earlier I wrote about how to create a pop out like box in your site. And also discussed how to create Facebook fan page. Remember: You must have a fan page to create a Facebook Like Box. If you don't know please read this first:
If you're ready then I can start. Read carefully.
To add a like box in your website or blog you have to place two codes in two different places. These are as below:
Code 1: Place this code on your page once, just after the opening <body> tag. If your site already has this code then you don't need to place it again.
<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/all.js#xfbml=1";fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</script>
Code 2: Place this code on your page wherever you want the plugin to appear on your page.
<div class="fb-like-box" data-href="http://www.facebook.com/markstips" data-width="240" data-height="350" data-show-faces="false" data-stream="false" data-header="false"></div>
You know, the second code is the main code. And the first one is just to help the second one. If your HTML has already the first code then you don't need to paste the code again.
Customization: The Red Parts of Code 2
- Name: The word markstips should be replaced with your page name.
- Width: Current width is 240. You can increase or decrease.
- Height: Current height is 350. Change it if necessary.
Tips: Try to place the second at the footer of your page. It will be helpful to load the site faster. Not only this code, you should place any Java Code at the bottom. If more java codes are placed at the header it will dramatically affect your site's loading time.
Implementing the Code on Blogger:
Code 1: Template > Edit HTML > Proceed > Now find <body tag by pressing Ctrl + F > After few lines paste the code from code 1 above > Save. If you placed any code like it earlier then you don't need to paste again.
Code 2: Layout > Add a Gadget > HTML/ JavaScript > Copy and paste the code from Code 2 above > Save.
Now view your blog or refresh it. You will be able to see this within few seconds. If the server is down, then the like box may delay to appear on your site. Until then, keep waiting.
Advice: If you don't think the like box not important for you, or if you think it consumes your site space then you can try this one: Pop Out Facebook Like Box.
If this code is not working properly, or if you face any problem to implement the code, then try to make the code directly from Facebook Developers.
