For those who have been under a rock for the past few years, there’s a social juggernaut called Facebook which has captured an audience of over 500 million people. Facebook is a fun place to catch up with your friends, post photos and videos of your vacations, and to simply socialize with all of your connections in a convenient place.  The ability to tap into this vast resource would be hugely beneficial for any e-commerce website.

Luckily Facebook offers you, a website owner, the ability to add some of their own functionality to your website, plus it’s much easier than you think!

Figure Out Which Social Plugin is Right for You

The first step is to head on over to Facebook’s developer pages and determine which plug-in best suits your needs.  There are many to choose from, like the simple, yet effective “Like Button” which shares pages from your site to the users’ Facebook profile, and the “Comments” plugin, which allows users to comment on content on your site and have it reflected on their Facebook profile to be displayed to all of their friends.

Customize Your Plugin

Facebook’s Social Plugins interface allows you to completely customize how your plugin looks and how it will function on your website.

Once you’re satisfied with how your plug-in looks, click on the “Get Code” button which can be found at the bottom of the customize form.

Copy the Code

After clicking the “Get Code” button, a window will pop up containing two textboxes filled with letters, numbers, and symbols.  What you’re looking at is the code required to display the plug-in on your website.

While either one of these textboxes of code will work in most cases, this example will use the “iframe” version of the plug-in.

Simply select all of the text within the textbox labeled “iframe” and copy it (in your web browser go to Edit > Copy or use Ctrl + C on your keyboard) and then paste that code into the page you’d like it to be displayed on.  Make sure that you paste your code into a textbox which allows HTML.  For example, if you’re using CityMax.com’s Easy Editor, pictured below, click on the “Source” button to switch to a code view.

After pasting your code into your web builder (and clicking “Save”), you should see something like the image below:

The Moment of Truth

After the code is pasted into your website, you’re almost done.  The only thing you need to do is actually see how your new Facebook Social Plugin looks on your website!