ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel
  • »
  • Technology»
  • Internet & the Web»
  • Social Networking»
  • Facebook

How to Add a Facebook Button to Your Website - Made Easy

Updated on August 15, 2012
AskJoanne profile image

Joanne Marcinek is a woman with a mission. Her passion is to help people get the relevant information they need on the Internet.

Adding a Facebook Button to Your Website

This Hub will cover how to add a Facebook Like Button to your website. It will also introduce where to get the code for the Facebook "Like" button and a variety of other Facebook plugins for your website. Other Hubs will cover in more detail how to add the Like button to your Blogger blog.

Facebook has a developers page that offers information on how to install several different "Social Plugins"

Also addressed in this Hub is how to add a Facebook icon that links to your Facebook page to your website. This is not code copied from the Facebook developers page, but simply an icon and a link to your personal or business Facebook page.

Facebook Developers: Like Button, Like Box and More

Adding a Facebook Like Button or Like Box?

I personally feel that the Like Button is better suited to a Blog or Article site... a site where the button links to very specific topic, whereas the Like Box is better suited to adding to a website because it directs website visitors to your Facebook Business page where they can see your Wall, your photos, discussions, video, etc.

Either the button or box can be customized for your website or blog by changing the options on the Facebook developers page.

The first thing you need to do is to paste the URL of your site into the box that says, "Facebook Page URL." You can then customized the width, the color scheme and whether you want to display the faces of people that like your page, the news feed stream on your page wall or the header of the like box.

Each time you change an option on the left hand side of the screen, the change will be reflected on the right hand side of the screen so you can see what your finished Like Box is going to look like.

Once you have the options you are happy with, click on the button that says Get Code to get the code needed to paste into your website.

Copy the code and paste it on your site where you'd like the box or button to go. To do this, you will need to have access to the HTML code of your site, or be using a site like that allows you to add "gadgets" or modules that include iframe code.

Adding Find Us on Facebook Link

For some people, even reducing the size and number of elements on the Facebook Like Box is still too big or too much, they would prefer just to have a small Facebook icon on their website that links to either their Facebook personal or business page.

To do that, all you need is a graphic image of the Facebook icon of your choice (search Google images)  In another Hub, I discuss using Royalty Free Images.  For this case, using a small, low resolution icon that links to the Facebook application, I believe this is considered Fair Use.  However, if you are concerned, there are some Free for Personal and Commercial Use social icons available.

Once you've saved your image, add it to your website with the link target to your Facebook page.

<a href="">
<img src="IMAGES/facebook_icon.png" width="200" height="80" alt="Anticipation Villa on Facebook" /></a>

How to Add a Facebook Button to Your Website


    0 of 8192 characters used
    Post Comment

    • FitFamily profile image

      FitFamily 5 years ago from Lynnwood, Washington

      Hi Laura - No, I never got an answer and have actually stopped doing a Facebook counterpart to my Hubpages because I can't figure out how to link the two. And I'm doing fewer Hubpages articles. Kindof disappointing. If only fellow hubbers can "follow" our articles, it really limits the ongoing readership for our writing. Facebook seems like a natural partner to hubpages to allow non-hubbers to receive regular updates from authors they enjoy. Let me know if you ever get an answer!

    • LauraGSpeaks profile image

      LauraGSpeaks 5 years ago from Raleigh, NC

      FitFamily - did you get an answer? I have the same question regardingpasting the code into hubpages. How do you manipulate the html on hubpages to insert the code?

    • FitFamily profile image

      FitFamily 5 years ago from Lynnwood, Washington

      How do you paste code into a hub? As hub authors, do we have access to manipulating the html? I have created a Facebook page FitFamilyBlog where I share one hub daily, and I'd like to get followers but I don't know how. Thanks for any help!

    • AskJoanne profile image

      AskJoanne 6 years ago from USA

      Hi Lilian, You can paste the FB like button code into the html of your site wherever you want it to appear.

    • profile image

      Lilian 6 years ago

      Hi Joanne,

      I already got the code for the FB like button, but where to paste it??