Integrating Facebook Social Plugins Into your Website - Like Box

  Reading Time:

Facebook is a Platform where you can grow your audience in a massive amount. In this post you will learn how to integrate Facebook social plugins into your website. When i first decided to write this post i was only going to write integration of the Facebook Like Box. But all the social plugins have the same method for integration. Facebook helps us to grow our audience using Facebook pages and Facebook Social plugin.

Social Plugins

Social Plugins are small components or widgets that Facebook provides for developers to integrate the various social activities of Facebook users into our website. For example, people like a page inside of Facebook. But you can integrate the same Like Button into a website that you are building. Suppose if you have a shopping cart website you could Create a Facebook Page for your shopping cart at Facebook and you could integrate the social plugins of that Facebook page into your website.

There are various social plugins provided by facebook.

Facebok Social Plugins
Facebok Social Plugins

Social plugins – Like Button, Like Box, Share Button, Send Button, Follow Button and Activity Feeds are most popular and used in most of the sites that gain lot of traffic.

In this post we are going to be focusing on integrating the Like Box. Just follow this method and you can easily learn how to integrate the remaining plugins, because all the plugins have the same method.

Note: For you to integrate social plugins into your website you must have a facebook page with your website name.

Your Facebook Page URL

Once you have a Facebook page, login to your Facebook account. In the settings menu at the top right corner you will see your page name. Right click on that and select open link in a new page. Move to the opened tab and copy the URL at the address bar of your browser. That is your Facebook page address. This Facebook Page Address is what you need for most of the social plugins.

Getting the Social Plugin Code

Once you have your Facebook page URL, visit Facebook Developers Plugins page. In that page choose the Like Box option from the Social Plugins menu.

Facebook Like Box Social Plugin Options
Facebook Like Box Social Plugin Options

In the URL to Share text box paste the Facebook page URL that we obtained. You can also choose the width and height of the plugin, Color Scheme of the plugin and various options are available based on the plugin that you are trying to integrate.

In the Like Box plugin you have various options to choose, like to Show Friends Face, Show Header, Show Border and Show posts. I unchecked Show Posts and checked the remaining.

Hit the Get Code Button

Once you have options for your plugins press the Get Code button. Now Facebook provided various ways for you to integrate the plugins into your website.

Social Plugin Code
Social Plugin Code

You can integrate it using HTML 5, XFBML, iFrame and URL. I am going to use HTML 5 method. You could also use iFrame. For the Facebook Plugin to work You must first include the Facebook JavaScript SDK into your page. Just include the code shown just after the <body> tag.

The code show in the second box is the plugin code and you can place this code any where you want the plugin to be displayed in your website. You can also use the iFrame option to integrate the plugin where you feel JavaScript way of doing this is long. Press on the iFrame option from the code widow and the iFrame code will be displayed.

Social Plugin iFrame Code
Social Plugin iFrame Code

Copy the Code show in the box and pasted it wherever you want the plugin to be displayed.

Once you have pasted the codes in your website, visit your website and you will see the plugin being loaded. The Facebook like box for this site is shown at the sidebar.

Social Plugin Sample Screen Of Dreamsoft
Social Plugin Sample Screen Of Dreamsoft

That is the base workflow of integrating the Facebook social plugins into your website. If you need to know how to integrate any other plugin, leave a comment and i will add a seperate post for that.

Google Plus Like Hash Tag Style Effect

If you have a Google Plus account then you would have seen the Hash Tags shown by the side of posts in the column. That is...

Object Oriented Programming In Javascript Part One

For most developers JavaScript is like a procedural language. It’s just a language that can interact with the DOM, Create Element in the HTML...