9

How to Use Facebook Social Plugins on Your Website

1273169132 facebook How to Use Facebook Social Plugins on Your WebsiteFor 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.

form How to Use Facebook Social Plugins 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.

code How to Use Facebook Social Plugins 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.

sourcebutton How to Use Facebook Social Plugins on Your Website

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

source How to Use Facebook Social Plugins on Your Website

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!

likebutton How to Use Facebook Social Plugins on Your Website

  • Share/Bookmark

Comments

  1. Tweets that mention How to Use Facebook Social Plugins on Your Website - CityMax Small Business Website Builder Blog | CityMax Small Business Website Builder Blog -- Topsy.com Says:

    [...] This post was mentioned on Twitter by CityMax.com, Hypercat Racing . Hypercat Racing said: Thanks for the info! RT @CityMax: Not sure how to put Facebook on your website? http://j.mp/gfKNI3 [...]

  2. Lisa Says:

    I have tried several times to create a plug-in for FaceBook like this article has stated and it has not worked for me yet. Is there something I am doing wrong because the plug-in has yet to appear.

  3. Mara Creighton Says:

    Hi Lisa,

    I can see the widget on your website, but it looks like you need to specify your own Facebook page for the URL - right now it’s directing to the default of “Facebook Platform”.

    You need to create a new widget and where it says Facebook Page URL, use the URL (the website address in the top of your browser) for your own ANEW You Facebook page.

    Hope that helps!

  4. jackie Says:

    I am trying to do this-however, the code shows on the web page-not the like button….????

  5. admin Says:

    Jackie, sounds like you need to switch your editor to HTML mode. Click the “Source” button in the editor toolbar before pasting the code in.

    Hope that helps! If you have any other trouble with this, try sending a request to the Support team.

  6. Inspiro Assistant Says:

    Thanks for this info. I have been using facebook for years and have not ever known about this social plugin ever since. I sure want to try this, I’m excited!

  7. inspiroSocial Says:

    Great for programmers. All I can do now is just wait for you to finish creating your plug ins and then maybe you can share it with us.

  8. Lorine Thede Says:

    I’ve been a reader of this blog for ages. Keep up the amazing writing you’re doing.

  9. Emily Hirai Says:

    Thanks for the encouragement! :)

Leave a Reply

CityMax.com has been featured in...