How to Get More Facebook Likes for Your Website and Fan Page

Facebook Likes are a powerful way to get website visitors to socially engage with your brand. There are two types of likes you can solicit with Facebook’s developer code – likes for website pages and likes for your fan page. The best part is users can like both of these directly on your website without having to go anywhere else!

Using the Facebook Javascript SDK

Some features for the Facebook Like options are only available if you use the XFBML code for the buttons. In order to use XFBML, you must implement Facebook’s JavaScript SDK onto your website. It’s not just an additional line of code, however. You have to have an Application ID to use the JavaScript SDK.

Creating a Facebook Application for Your Website

So let’s look at creating an application on Facebook – it’s easier than you think!

Step 1: Create an App

To create an application for your website, you will want to start on the Create an App page and enter your site’s name, URL, and language.

Facebook Developer - Create an App

Click on the Create an App button to continue, and enter the captcha.

Step 2. Copy Your Application Data

On the following screen, you will get your App ID and Secret Key. Be sure to keep this handy as you will need it to implement some of the following Facebook Like code.

Facebook Developer Application Settings

You can also get it by visiting your Applications Dashboard at a later date.

Installing the JavaScript SDK on Your Website

Next, you will want to install the JavaScript SDK on your website using the code on the JavaScript SDK page.

Facebook Developer - JavaScript SDK Loading Code

There are two versions of the code as shown above – I personally go with the code under Loading the SDK Asynchronously as this option will make sure that, should the Facebook code not be responding, it will not hinder other objects from loading on your page, leading to faster page load times.

You will want to replace the text YOUR APP ID in either version with the App ID you generated earlier. Then place this code between your website’s <HEAD> </HEAD> tags. Depending on your CMS, you may need to place this in your header.php file or similar header template file.

Now that we have the JavaScript SDK covered, let’s move onto Facebook Like buttons.

Installing Facebook Like for Your Website Content

The general consensus is that Facebook Likes may influence search rankings. Whether it is direct, or just one among many other social indicators of good content is still debatable, but search engines nonetheless are taking cues from social signals. Hence, it can’t hurt to increase the likes of your website and its content.

Implementation of the Facebook Like button for your website content is relatively simple. Facebook has an easy to use code generator for the Like button.

Facebook Like Button Code Generator

Here, you will:

1. Enter the URL you want a Facebook user to like which can be your homepage or an internal page on your site.

2. Decide whether or not you want to use the Send button which allows Facebook users to privately send the URL specified to another user, group, or email address. This option requires you to use the XFBML code along with the JavaScript SDK.

Facebook Like Send Button

3. Choose between a standard, button, or box count layout – changing the dropdown will show you an example of each.

4. Set the appropriate width.

5. Show the faces of a user’s friends who have also liked the URL specified. This only applies to the standard layout.

6. Set the button to say Like or Recommend. This will change the verbiage on the user’s profile to say that person likes or recommends your URL.

7. Choose a color scheme. Most sites seem to choose the light one.

8. Choose a particular font to match your website.

Once you have all of these settings the way you like them and the Like button appears the way you want it as previewed on the side of the screen, you can hit the Get Code button to get your code.

Facebook Like Button Code Generation

If you did not want to install the JavaScript SDK and do not need the Send button, then you can use the iFrame code – just insert it where you want the Like button to appear on your page.

If you did install the JavaScript SDK and would like to use the Send button and give users the option to add an additional comment to the post when they like it, use the XFBML version. Again, just insert it where you want the Like button to appear on your page.

I like the option to add a comment, as it allows users to add in their personalized recommendation with the link. Here’s an example with and without a comment on the same link.

Facebook Recommended Link with Comment

A personalized comment makes the recommendation much stronger and likely a user’s friends will click on it!

Installing Facebook Like in a Template

If you want to have the Facebook Like button installed in a theme, such as a single post template file, you will need to modify the code to reflect the changing current page’s permalink. For WordPress, you would need to enter any URL to generate the code, then replace that url in the code with <?php echo rawurlencode(get_permalink()); ?>. For both the iFrame and XFBML Like button code, this is the part you would change:

href=<?php echo rawurlencode(get_permalink()); ?>

If you use a CMS other than WordPress, you will need to figure out what code you need to use to ensure that no matter what page the user is on, that is the one they will like.

Implementation of the Like button can go from blog posts to article content. But it’s not just about website content. What about product pages? Buy.com is a great example of using the Facebook Like button as social proof when you’re about to make a purchase!

Facebook Like on Product Pages

Facebook Share – The Facebook Like Alternative

Some sites alternatively use the Facebook Share button instead of the Like button because of the difference in functionality. The Share button will give users the following screen.

Facebook Share Button Display

This allows users to always have the opportunity to add their own comment to an item they like, change the thumbnail for the post if there are other images on the page, and even change the page title and description before it posts to their wall. The code is also a bit more simple, as it has only one option that works no matter where you place it on templates or directly in the content.

<a name="fb_share" type="button_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>

This code will simply try to share the URL it is displayed upon.

Installing Facebook Like for Your Fan Page

Now let’s say your next goal is to increase the number of fans for your fan page, and you want to do so directly on your website. Not a problem! You have two different options for allowing users to become a fan of your Facebook page without leaving your site.

The Facebook Like Box

The most popular option for adding information about your Facebook page on your website is the Facebook Like Box. By entering the URL of your Facebook Fan page, you can get the following customize-able box.

Facebook Like Box for Your Facebook Fan Page

Here, you can change the settings for the width and whether to display the faces of people who like the page, latest stream of status updates, and the “Find us on Facebook” header.

Once you have customized your settings, you can click the Get Code button and choose either the iFrame or XFBML code. The functionality between the two is the same.

The Facebook Like Button for Your Fan Page

If you want something a little more subtle, you can use the same Like button as you used for your website content. Just use the URL of your fan page to ensure that any likes will count as fans for your fan page.

One of my favorite implementations of this is Mashable’s subscribe box.

Subscribe to Mashable Facebook Like Button

They simply used their fan page’s URL, set the width to 286, left the checkbox for Show faces checked and used the XFBML code. Why the XFBML? Because in this instance, if people are not logged into Facebook, the iframe code would leave a big blank whitespace where the faces of friends who have liked the page would normally be. The XFBML will collapse that space and keep it neat.

Subscribe to Mashable Facebook Like Button When Logged Out

This way, people won’t have to wonder what is missing in the whitespace.

Parting Thoughts on Facebook Likes

The Facebook Like button is powerful for bringing social proof to your website content and fans to your fan page, and the beauty is it all can be done without a Facebook user leaving your website. So what do you have to lose? If you aren’t using the Facebook Like button, be sure to start using it today so your visitors, fans, and customers can engage with you through their favorite social network.

How do you use Facebook Like? Share your strategies and any results you’ve seen in the comments!

About the Author: Kristi Hines is a freelance writer, blogger, and social media enthusiast. Her blog Kikolani focuses on blog marketing, including social networking strategies and blogging tips.

  1. Christy Broccardo-Davis Jun 21, 2011 at 10:28 am

    Thanks, helpful for some issues and features we have been recently trying to implement.

  2. I’m currently using sharebar and that’s it.

    I don’t like the Facebook Fan page box in the sidebars. It just takes up space and distracts the reader.

    Limit your Facebook integrations. It’s another site and not yours. Don’t lose control!

    • Hi Brad,

      I definitely agree that your main site should be your main focus. But getting people to like your page or fan page on Facebook will help get more exposure to your brand and ultimately to your website.

  3. Kristi – as usual you are the master of good instructions. While I knew this already, I certainly could appreciate this as a person new to using facebook. I could have used this information about 2 years ago and saved myself hours.

    • I could have used this a few months ago while trying to figure out what to do with implementing my fan page onto my website. The Mashable subscribe box finally inspired me enough to work on it, so I had to share!

  4. Thanks for another rocking post, Kristi.

    Sleep much?

    In all seriousness, (and I know you’ll be proud of me) I finally moved (almost done) my main site and blog-I’m combining them, to WP.

    Are my like buttons etc. cool?

    Here- http://www.thefranchiseking.com/blog

    Thanks,

    The Franchise King®

  5. I’m annoyed with how the iframe version of the like button doesn’t resize dynamically according to the likes thus far. I’ve had to resort to changing the option of showing faces to false, which isn’t exactly ideal. Time to experiment with the XFBML version! Thanks for the tutorial!

    • That was my problem with it. The width will still be whatever you specify, but at least the height will compress if there are no faces there using the XFBML. :)

  6. This post is a keeper. I’ve had problems synching my blog with the Facebook page.

  7. This is a fun site, and this is a join to our friend and all time contact with us. This is a good site. More then feature are available in this site.

  8. Just wondering if you know of a way to make it so fans can Like both the website and the fan page with one click.

  9. Very valuable post Kristi, thank you. I’m wondering if you have any thoughts on how this manual method compares to using a WP plugin solution such as “ShareThis”.

    The ShareThis” plugin is what I am currently using on my site, and I didn’t have to do anything with the SDK or application code. Are there any pros/cons for this manual method over a plugin?

    • The Share This plugin works fine for sharing the page that people are on. If you are looking to have the functionality of people becoming a fan of your fan page from your website though, you have to go the manual coding route.

      You can do it with the simple iframe version without the application / Javascript, you just lose that feature of having it auto collapse if there are no friends displayed that like the page. More of an aesthetics thing for me.

  10. Very nice Kristi!

  11. Hey, Great article… It finally got me into the code trying to implement the XFBML way and including the send button too… The thing is I followed it all to the letter and yet I can’t get the like button to show up on page.

    I use the iFrame version on top of the posts and test the XFBML one on the bottom… Could this be a conflict issue?

  12. Great article! Very informative! I have one question regarding the Javascript SDK. When you copy and paste the code for “Loading the SDK Asynchronously” do you only put the … between the tags. I didn’t think you could have tags in the section. Can you just put the in the ?

    • Haha, it removed my tags… my question was do with pasting the script. Do you only paste the script in the HEAD and paste the DIV in the BODY? I didn’t think you could place a DIV in the HEAD section.

  13. Very nicely done. You made a task that seems very difficult simple for everyone to follow.. kodos to you my friend!

  14. You don’t need the SDK to use xfbml, just paste the xfbml code where you want the plugin to show and it works fine…

  15. gr8 tutorial. thank you so much..you made by day…been searching for this for generations! i couldn’t hav integrated facebook like iframe button with comment without ur tut!HATS OFF TO YOU!!! :) :D ;)

  16. Your idea worked well. Thanks a lot for the information.

  17. Totally lost. I want the like button with send for my fan page, so I need the xfbml version, but it seems so complicated.

  18. Thanks.
    Wonderful information & I am using your tip for getting more likes on my blog.Lets see how many likes I am going to receive for my Facebook fan page.

  19. Very well defined. I have been looking for ways to increase likes on our company’s page but most of the blogs I came across where suggesting ways where you would be connecting to non-targeted and useless likes but this post helped well.

    Thanks and cheers to the awesome cool tricks! :)

  20. helpful as always.

  21. Installing the Facebook like button onto my website was the first step I took to increasing the number of fans to my page. Once you have the likes it’s easy to get your message across to people in an informal manner.

    The most important factor to take into consideration is that your Facebook likes can be turned into paying customers very easily.

  22. We don’t use Facebook for our primary business but my wife’s business uses it to great affect. She uses Facebook CPC adverts as a way of drawing in extra likes to her page but these pay for themselves with the revenue they bring in.

  23. Hi
    I need some info for linking my facebook profile and my website.
    I have website and created a profile with same name. and i have created a Link for my Website(not page) from the same profile.
    I just want to know if share link on my “Facebook Profile” wall. will that appear in the wall of those who liked my link? If not how can i share a link with the people who have Liked my website link.

    Thanks

  24. I’m not sure if this is the way the “like” button works, but the “likes” on my website and the “likes” on my fan page do not matchup. Have I put the code in wrong? Nothing matches on insights either.

  25. I wonder if anyone has come up with a solution to like both the page and the fanpage at the same time (one-click)?

Comments are closed.

← Previous ArticleNext Article →
Buffer