How to Add Facebook Social Plugins to Your WebsiteWhether you’re aware of it or not, there’s a social media arms race happening right now, and the battleground is your website.

Social networks are trying to leverage your website visitors, making it easier for people to interact with your various social media outposts right from your own website. Whether it’s the “Pin It” button from Pinterest or the Google+ Badge from Google+, these “social plugins” are becoming more important as website visitors increasingly view your business and social content as one and the same thing.

Facebook, the social network that arguably started this trend with its “Like” button, has considerably expanded its suite of social plugins. This article will show you five of the most popular social plugins (according to Facebook) and how to add them to your website.

The Like Button

Like Button

The Facebook Like Button allows visitors to your website to share the page that they’re on with their friends on Facebook. When a person clicks the Facebook Like Button on your website, a link to that page appears in that person’s Facebook News Feed. This is a very easy and effective way to expose your web content to a wider audience on Facebook.

To add the Facebook Like Button to your website, navigate to the Facebook Like Button Configuration Page. Find the section entitled “Step 1 – Get Like Button Code.” Start by filling in the field “URL to Like” which typically will be the website address of the page on which you’ll place the Like button. Fill out the rest of the required fields to customize things like the width of your Like Button, its color, font, and so on. Once the fields are complete, click the “Get Code” button to generate the code for the Like Button. A pop-up window will provide you the code, as well as detailed instructions on where to place the code on your website, depending on the protocol of your website (HTML5, XFBML, IFRAME).

You can also generate a host of additional “meta data,” in the form of “Open Graph Tags,” regarding the type of organization your webpage represents (e.g. a band, a restaurant). We recommend that you review the Open Graph Protocol Page on Facebook for more detailed information about how to implement this formatting standard on your website.

The Send Button

The Send Button

The Facebook Send Button allows people to very easily send your website content to their friends. Unlike the Like Button, the Send Button has a lot more options to share your content. In addition to the option of sending a link to your webpage URL to their Facebook friends, people who click the Send Button can also choose to send a link to their Facebook Groups, or an email to any address they specify.

To add the Facebook Send Button to your website, navigate to the Facebook Send Button Configuration Page. Find the section entitled “Get a Send Button.” Type your website address in the “URL to send” field. Customize the Send Button using the “Font” and “Color Scheme” fields, then click the “Get Code” button to generate the code you’ll copy wherever you’d like the Send Button to appear on your website.

Follow the instructions entitled “Get a combined Like and Send Button” if you’d like to combine these two functions into one customizable button. Just as with the Like Button, you can set up additional customization options for your Send Button by using the appropriate parameters in the Open Graph Protocol Page on Facebook.

The Comment Box

Comment Box

The Facebook Comment Box allows people to comment on your website and have those comments either appear on your website, and/or on their Facebook Walls. People can reply to the comments on Facebook, or within the Comment Box right on your website. This is an excellent way to encourage real-time interaction on both your website and your fans’ Facebook Walls.

To add the Facebook Comment Box to your website, navigate to the Facebook Comment Configuration Page. Just like in the examples above, you’ll have to fill out the fields corresponding to the webpage where you’d like comments to appear, as well as customization options like width and color scheme. Click the “Get Code” button to generate the code that you’ll copy to your website wherever you’d like the Comment Box to appear.

If you’d like to restrict the type of language that appears in the Comment Box, or if you’d like to specify who can see the comments and under what conditions, you can add additional Open Graph Protocol parameters as described in the Facebook Comment Configuration Page.

The Activity Feed

The Activity Feed

The Activity Feed displays the most interesting activity from your fans on Facebook and displays that activity right on your website. The Activity Feed displays links when people interact with content on your website, such as when they Like your page, Send a link to their friends, or Comment in the Comment Box. This can be a great way for your visitors and fans to interact with you, and with each other.

To add the Facebook Activity Feed to your website, navigate to the Facebook Activity Feed Configuration Page. Fill out the fields to customize the look and feel of your Activity Feed and click the “Get Code” button to generate the corresponding code for your website. You can choose a whole host of additional configuration options by selecting any of the suggested parameters on the configuration page above.



The Recommendations social plugin shows links to pages from your website that your visitors are “Liking” most often. Facebook describes this feature as a “people-powered most popular list” of content from your website. It encourages website visitors to dig deeper on your website, based on the pages that other visitors have recommended you check out.

To add the Recommendations social plugin to your website, navigate to the Recommendations Configuration Page. Fill out all of the required fields and click the “Get Code” button to generate the code for your website.

Unlike the other social plugins mentioned above there aren’t a lot of additional configuration options available for the Recommendations social plugin. However, be sure to review the parameters mentioned on the configuration page to see if any of these are appropriate for your needs.

Visit the Facebook Social Plugins Page for the complete list of available plugins.

[Image Credits: Eric Schwartzman, Sean MacEntee]