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 Blogger.com 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="http://www.facebook.com/pages/Anticipation-Villa/174391555938617?sk=wall">
<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

Comments

    0 of 8192 characters used
    Post Comment

    • FitFamily profile image

      FitFamily 6 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 6 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 6 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
      Author

      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??

    working

    This website uses cookies

    As a user in the EEA, your approval is needed on a few things. To provide a better website experience, hubpages.com uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

    For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at: "https://hubpages.com/privacy-policy#gdpr"

    Show Details
    Necessary
    HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
    LoginThis is necessary to sign in to the HubPages Service.
    Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
    AkismetThis is used to detect comment spam. (Privacy Policy)
    HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
    HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
    Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
    CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
    Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the googleapis.com or gstatic.com domains, for performance and efficiency reasons. (Privacy Policy)
    Features
    Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
    Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
    Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
    Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
    Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
    VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
    PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
    Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
    MavenThis supports the Maven widget and search functionality. (Privacy Policy)
    Marketing
    Google AdSenseThis is an ad network. (Privacy Policy)
    Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
    Index ExchangeThis is an ad network. (Privacy Policy)
    SovrnThis is an ad network. (Privacy Policy)
    Facebook AdsThis is an ad network. (Privacy Policy)
    Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
    AppNexusThis is an ad network. (Privacy Policy)
    OpenxThis is an ad network. (Privacy Policy)
    Rubicon ProjectThis is an ad network. (Privacy Policy)
    TripleLiftThis is an ad network. (Privacy Policy)
    Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
    Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
    Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
    Statistics
    Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
    ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
    Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)