How to Create a Facebook Like Box for Website

0
315
creating facebook like box

Every one of us like to have a facebook like box on our website. But recently facebook just created a new plugin for the facebook page. So with some research around the internet( the research word gives me the swag feeling) and I listed the three best facebook like box you would have on your website.

Every business website has it’s own facebook like box on the website. this first of all create the image of the company that it has some active followers on social media. By creating a facebook like box on website provides more conversion in social media.

 For creating a facebook like box for your website you must know some basic things.

1. The technique I use is using the code. So if you are into wordpress or any CMS don’t worry we got you covered.

2. For wordpress user you can still go with the plugin, but that is not advisable. If just a simple code can get things work.

3. You don’t need to have any technical knowledge about any thing. Just follow the given below simple steps.

Facebook like box are quite strategy things to be present in your website. Firstly if somebody is in your website and likes any content or your website, then keeping the like box to his reach will make him like it. Some like box also display your friends in below. Which helps them to know who else like the page. And lastly some people just want facebook like box on their website because they saw it on another website.

Creating a facebook like box for website.

So in this article I will presenting three types of like box. Let’s get started.

#1 simple like box.

It’s a quite simple type of like box. it only has the like button, your profile and cover photo. This like box is for those people who like to keep it simple. the like box is as given below. Just copy the given below code in your website.

<div class=”fb-page”
data-href=”https://www.facebook.com/facebook” data-width=”380″
data-hide-cover=”false”
data-show-facepile=”false”
data-show-posts=”false”></div>

If you’re a wordpress user just go to the Appearance->widgets and drag a Text form their and place it as shown in the figure.

facebook like box

#2 like box with facebook friends image. 

This is an addition to the simple like box. Only difference is that you will also get some people listed below who are probably the friends of your visitors. That means whenever a new visitors come to your website the people listed in the like box will be the one from his/her friends list. for this like box copy the given below code to the website.

And if you are a wordpress user then follow the method shown in previous like box. The one we use in the our website is this like box. We have adopted the customization from labnol.org. Which give this amazing look to the box

<div class=“fb-page”data-href=“https://www.facebook.com/Geeksla”
data-small-header=“false”
data-hide-cover=“false”
data-show-facepile=“true”
data-show-posts=“false”>
</div> 
<div id=“fb-root”></div>
 <style>
 .fbpage, .fbpage:before, .fbpage:after {border: 1px solid #ccc;}.fbpage:before, .fbpage:after {content: “”;position: absolute;bottom: 3px;left: 2px;right: 2px;height: 1px;bordertop: none}.fbpage:after {left: 4px;right: 4px;bottom: 5px;box-shadow: 0 0 2px #ccc}</style><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&version=v2.4”;fjs.parentNode.insertBefore(js, fjs);}(document, ‘script’, ‘facebook-jssdk’));</script>

#3 Facebook plugin

This is the latest development from the facebook guys. They have created a new plugin which you can access through the link. They help you customize your like box. The new part about it is that now you also get feeds of what you upload on facebook below the like box. You can go to the facebook developer section and customize it according to your own need. You can then click on the get code button and the copy the code in the theme header.

facebook like box

These were the 3 methods of creating a facebook like box for website I found to be interesting enough to write an article. I know there are various ways to customize the facebook like box, but this is what I have.

Well the geeks out there are not quite to keep things simple. If you have a better customization then let us know. You can link us that in the comment section below.

If you like the article then share with the community of geeks and help us spread the word.

LEAVE A REPLY