Facebook for Websites: Social Plugins for Your Blog and Business

Facebook offers webmasters and bloggers a lot of options for integrating their platform onto websites. Consider the number of users that are logging into Facebook on a daily basis and staying logged in throughout the day while perusing the Internet.

facebook for webistes infographic

Above: Portion of the Multiple Identities infographic provided by Gigya, a leading provider of social plugins.

It makes sense that website owners would want to take advantage of the power of Facebook on their own sites, especially since Facebook is the most used identity when it comes to people signing into sites, as shown in the infographic above.

The best part is that Facebook offers several social plugins that you can implement onto virtually any website, some with very little coding knowledge required. Let’s look at these plugins, and the reason why you would want to have a few of them on your site.

Like Button

The Like Button is probably the most well known and recognized of the Facebook social plugins. Like buttons can be placed on any page of your website and can be targeted to like the page that the button is on, or a URL that you specify. For example, you can have a Like button on every page of your site that, when clicked, will create a Like to your homepage.

To get the code for the Like Button, simply visit the developer’s page, enter the URL you want visitors to like and then customize the other features such as layout style, showing faces of people who have liked it, width, wording (Like or Recommend), font, and color then get the code.

If you want to incorporate the Like Button on a WordPress theme (say in your single post templates to work with each of your posts), you can use the following code in place of the URL:

<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo rawurlencode(get_permalink()); ?>&layout=button_count&show_faces=false&width=100&action=like&font=verdana&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"></iframe>

This will dynamically put the current page’s permalink in place of the URL for the Like, as used in the blog posts here at Kissmetrics!

facebook like button

The benefit of using the Like Button? It is great social proof when people come to a page or domain to see a large number who have liked it. Also, when people like or recommend your page, it shows up on their personal profile…

facebook likes on profile

…to be shared in their news feed with all of their friends.

facebook likes news feed

The visitor benefit – it’s easy to use. One click and they have shown their support. For your website – it makes it easy for visitors to promote you to their friends as well as increase the social support count. A win-win situation!

Activity Feed

The Activity Feed shows all of the recent activity on a website to anyone, whether or not they are logged into Facebook. The Activity Feed box will start with activity on a website by a user’s friends (if they are logged in), and also can show the number of times certain content on the website has been recommended.

facebook activity feed recent activity

This will help guide logged in Facebook users to the items that their friends have liked as well as the top items that others like. To add the Activity Feed box, visit the documentation page, enter your website’s domain, and customize options such as the size, header, colors, and font. Then check whether you want to show recommendations (which I would recommend) and get the code to place on your website.

Recommendations

Similar to the Activity Feed’s show recommendations option, the Recommendations plugin shows the recent top content and the number of times that content has been liked to users whether or not they are logged into Facebook. If the user is logged into Facebook, they will see any friends who have liked content on the site.

facebook recommendations

This will make it easy for you to highlight the top content on your site for new visitors to find. To implement Recommendations, visit the documentation page, enter your website’s domain, customize the design options, and get the code to place on your website.

Like Box

The Like Box allows website owners who have Facebook fan pages to see how many users are fans of their page on Facebook, see recent Facebook fan page posts, and like the fan page directly from their website.

facebook like box fan pages

To place a Like Box for your website’s fan page on your website, visit the documentation page, enter your fan page URL, customize the design options, and get the code to place on your website.

Comments

The Comments plugin allows you to incorporate Facebook comments onto any part of your website.

facebook comments

This can be a great way for a static website to incorporate comments onto a feedback or other interactive page on their website. Why use Facebook comments? Some users will prefer to simply comment with Facebook because they won’t have to fill out any other information or register.

facebook comments on profile

Users also have the option to publish the comment to their profile, which will include their comment plus a link to the page they are commenting upon. This is a great way to expose your page to a Facebook user’s friends through their news feed.

The catch with the Comments plugin is that you have to take an additional step beyond just getting the code from the plugin’s documentation page. First, you must register your website as an application with Facebook by creating an application. You will start by entering the App Name as your website or company name and agree to the Facebook terms and conditions.

facebook create an application

After a captcha, you will then enter details about your application / website. The main essentials are entering your website’s privacy policy and terms of condition URL’s.

facebook website application settings

Also, be sure to enter your website URL and domain so that Facebook knows to authenticate on the correct domain.

facebook-website-application-settings-2

Once you have your application setup, you may need to wait a day or two to start using it.

To implement Comments on a web page on your site, head over to the Comments’ documentation page, customize the settings and get the code. After that, go to the Developer’s App and copy your App ID. Replace that number with the APP_ID in the Comments code. Then paste the code onto the page of your site you want to have Facebook comments.

Login Button

The Login Button allows users to connect to your site through their Facebook accounts. This social plugin can be implemented simply to show how many people connect to your site, or using more complex aspects of your website application (the same one you create for the Comment plugin above) to pull in user information such as email, location, interests and more, or even publish information from your website application to the user’s profile.

facebook login permissions

This plugin requires you to get more in-depth into authentication and permissions and use of the Javascript SDK, but it can be a powerful way to connect Facebook users to your website. Learn more about the Login Button from the documentation page.

Facepile

The Facepile plugin allows you to show a row of users that have liked your page or connect to your site through the Login Button via the website’s application ID.

facebook facepile

While this is a simple way to show how many people have liked or connected with your page, it is (in my opinion) not any stronger than the Like Button, and certainly not more powerful than the Activity Feed or Recommendations box.

Live Stream

Last, but not least, the Live Stream plugin allows you to create a real-time chat for users on your website or connected through your website’s application.

facebook live stream

This plugin is useful when you are holding an event, such as a webcast, webinar, or online class. I haven’t seen any Live Stream applications in action, but it does sound like a good concept. You can learn how to implement this on your site on the plugin’s documentation page.

Your Thoughts on Facebook Social Plugins

There you have it – a roundup of Facebook plugins for your website. If you haven’t used any of them, you ought to try them out as Facebook is the second most popular website on the Internet.

What social plugins have you tried out on your blog or business website, and what kind of benefits have you seen from using them? Feel free to share your experiences 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. Recently, I created a personal blog where I link my Facebook personal profile..

    Am I wrong by linking my personal profile on my blog? Should I create a Facebook page even though is just my personal blog? What are your thoughts?

    • It depends.. I have a personal profile and a fan page. A lot of people create the pages so that people who want to be a fan simply of the blog can do so, and they have the personal profile available so people can interact with them on a personal level (seeing photos, posting on the wall, etc.).

      Allowing everyone access to your personal profile has a lot of advantages, but what I have seen happen often is that people get tired of not being able to just see stuff from their friends and family because they have opened their profile up to everyone, so they end up asking people to be a fan of their page instead and then have to remove all of the people they don’t personally know.

      So it really depends on how you want to use it and how public you want your personal profile to be.

      • I think that by using all the customized privacy features that Facebook offers, you can pretty much solve any issue. From my experience with fan pages, they usually only work well with public figures, celebrities, or businesses.

  2. Thanks for the wonderful post.

    Some people may not be comfortable sharing their Facebook conversation in public. Even though FB conversation may add value its a challenge to open it in public domain.

    • Very true! There are some people who would rather not connect with their personal profile, but at the same time, there are also a lot of people who are less likely to want to create a new account on a website vs. just connecting easily with their Facebook profile. It really depends how much your site will do to their profile in terms of posting content to it.

      • True, it really does just depend of the type of interaction you’re looking for. But again, I think the privacy settings and the group segmentation helps a lot.

    • I would suggest you play with the privacy settings as they’ve gotten quite customizable.

  3. Tracy Chatman Jan 11, 2011 at 3:24 pm

    This information right here is very informative. You have explain plugins that I didn’t even know I had on Face book and its purpose.I don’t mind going public the more plugins I the more responses i get to my website….
    Sincerely,
    Tracy Chatman

    • Not all of them maybe a good fit for you, but the ones you use that work for you should definitely create more user engagement.

  4. What a great resource you’ve put together, Kristi! Do you have any idea which of these plugins is the most efficient?

    I find some of the social media plugins slow down my page load time. I’d prefer to use a lean, mean Facebook plugin than one that makes my site slow to a crawl.

    • I’m currently using the Like button on all of my single post pages, and the Like box for my fan page in the footer of the site.

      I have noticed that if you have the Like button showing up on your homepage multiple times, it can be a bit of a loading slow down if Facebook is having issues, but if you just have it on a page once, it really doesn’t hurt that badly.

      As far as other sites I’ve seen using various other plugins, I haven’t seen many load time issues specific to the Facebook integration. Usually you can tell by watching your status bar and seeing if that is what is hanging up a website.

      Overall, the benefits of having some of these on your site outweigh the occasional time delay. I wouldn’t suggest all of them, but 2 – 3 don’t really hurt.

      • I know what you mean Kristi… unfortunately sometimes people push their sites to the limits and just throw up anything to see what sticks so to speak. However, like you said, with moderation, it isn’t too bad.

    • I agree with Kristi on the “like” button being one of the most powerful ones you can use on your site. Also depending on your level of engagement, you can integrate the comments plug-in as well.

  5. I created a nice facebook jQuery plugin which is dynamic. The problem with the facebook like button on the API, is that you are unable to use it on a dynamic website.

    http://onerutter.com/open-source/jquery-facebook-like-plugin.html

  6. I added the like button and the tweet button to a few posts this month as a trial. I don’t want to impact my page load speed too much. So far the like button has been getting some action besides myself =) so that made me start to consider Facebook, where before I did not think it was for my business. Now I’ll have to try it out.

    • I have been hearing that more and more businesses are focusing their efforts more strongly on Facebook. I have seen more delays from the tweet sharing buttons than the Facebook ones (both are rare, but they happen). Either way, as I said earlier, the benefits of having it in terms of having your fans share your content outweighs the occasional server issue.

    • I can’t tell you how many businesses love Facebook as a promoting tool. I don’t think the load speed will be affected to any degree that will hurt your blog.

  7. There is definitely a Facebook frenzy happening. We have a lot of clients who want more Facebook exposure (which we’re happy to provide). However, I for one don’t like Facebook anymore. I’m over it… but, cannot escape it because of client demand. Interested to see how this ultimately plays out.

    • Facebook is becoming more and more popular for business. And businesses are good at keeping their customers hooked – I know a few people who were adamant about not ever using Facebook, but were then sucked in because a favorite company of theirs was doing a giveaway exclusively for fans of their Facebook page.

    • lol… yeah I know how you feel. More and more people are starting to see the power and jumping on the band wagon. I do believe something else will come out soon, it always does, and that’ll be the new craze after that.

  8. Thanks for the post as I actually had some questions on these very points. One question remains, if one use the Login button. Can the site be private to others i.e. people that aren’t a FB friend?

  9. I happen to use the Ingboo Facebook like for tags plugin because it not only likes the page but subscribers the user to blog categories so they can get updates when you publish a new post in the same category, it turns the like button into a sort of subscription.

    • That’s a great way to get a high level of user engagement! I definitely need to integrate that with some of my sites too ;)

      What kind of results are you starting to see for yourself?

  10. Amusing you mentioned all possible Facebook buttons except the Share button. Though, that number is now proven to be inflated.

  11. I think replacing the wordpress comments ability with a Facebook login/comments hybrid feature would be very powerful. You get the social aspect of comments on your blog with the ease of having someone use their already established Facebook profile to login.

    But does such a WordPress plugin exist that REPLACES the wordpress commenting feature?

    • Yes it does and it could be powerful just depending on the types of responses you normally get. I’d say it really depends on your blog topic and how relevant it is.

  12. I tried the Facebook like button on one of our sites but it did not work. Afterwards I realized that there is a Friend Connect share with Twitter and Facebook widget already on the page. These two share buttons do work. Go figure.

  13. They need to bring google or twitter login button for Fb comments so that everyone can access the comment system easily. If not it will be only usefull for facebook users and it cannot compete with other competitors like disqus, js kit etc.,

  14. Great article and gave me just the info I wanted. I read it when you published it and it is a great resource.

    Now I have a question: Is anyone else using the ‘dark’ version of the FB ‘like’ widget? We like it and have implemented it, but wonder whether visitors will even recognise it?!

  15. Great post, thanks for sharing.

    I’ve created a Fan Page for my company and I’ve also added the Like button to my company homepage. I’ve linked the Like button to the fan page but I’m wondering if I should link it to my homepage instead – so people can like the homepage rather than the fan page?

    Interested in hearing your thoughts on this.

  16. Hi, I’ve recently installed this plugin and think it’s great. However, I’ve spent the last few hours trying to fiddle with a problem— the comment’s font color is dark, and my blog’s background is also dark. Therefore, the comments left on the blog are hard to read. Is there a way to customize the font color of the comments? I tried ‘colorscheme=”dark”‘ but nothing happened.

    • Not sure of what the answer to this would be, but I would suggest googling it. You’ll probably find it in a yahoo answers or something.

  17. Kristi, maybe you can help me with an error I’m having. I’ve used the facebook development/social plugin on my website/blog (hosted through fatcow using wordpress).

    I’m trying to use sidetabs to link people from my website to my facebook site (showing my recent activity, photo posts, etc) and instead of using my PAGES activity, it’s using some sub-part of the governing profile – I’m seeing recent activity from friends who aren’t even subscribed to my business page. I’m trying to link to wall>502Photos to show only my pages activity as opposed to ‘Most Recent’ (which will show all recent activity on my page.

    Help?

  18. I followed the instructions to implement Comments on a web page on my site, Got the code. After that, went to Developer’s App and copied my App ID. “Replace that number with the APP_ID in the Comments code.” There was no number to replace in the code. I pasted the code anyway in the page and the comments thing does not come up in the page after publishing. But I made a comment on the page and it came out on my profile. Am I missing something here? Thanks. Carlos

  19. Please i want to share informations on facebook directly from my website. Please, How do i go about it?

  20. Hi
    I am agree, It is very beneficial if you create facebook plugins with your blogs and business. Then it can help.

  21. Hi,

    I added a like button to my website, but someone just told me that they were logged into their Facebook business page & when they clicked my web page like button it doesn’t increase the likes.

    Do you have to be logged in to a personal FB page to add likes?

  22. Hi Can you help me add the image/profile of people that liked my website. I added the like button and people are clicking it, but their images are not showing. I need to know who they are for the prize drawing. Thank you. This is my code so far:<iframe src="http://www.facebook.com/plugins/like.php?href=ID)); ?>&layout=standard&show_faces=true;width=450&action=like&colorscheme=light” scrolling=”no” frameborder=”20″ allowTransparency=”true” style=”border:none; overflow:hidden; width:450px; height:60px”>

  23. Hi, I am actually trying to edit my Facebook social plugin, by removing one and adding another. I can’t find it in the HTML code. Does anyone have any advice for removing a social plugin?

  24. I added the Like box to my college’s Blackboard course site and ironically posted how to do this on Posterous last night! I found that this plugin seems to show posts from the page owner not those from friend or fans.

    A developer account is required as well.

  25. now that the stupid new timeline or whatever is called way to show my facebook page, I cannot see the stream in my like button plugin in my website… do you have any ideas of what can I do to have my stream back to my plugin? thanks in advance…

  26. Dina Gheorghe May 06, 2012 at 2:17 am

    Blonnie This is a great tutorial. I love the inset notes and arrows visually supporting the more verbose instructions. Nicely done.

  27. Kristi,

    As always, you have provided outstanding and very detailed information. I am investigating the various social media WordPress plugins and options and you have covered FB here beautifully.

    Many thx,
    Richard

  28. 1. The problem is that I don’t want a flow of comments. I want an archive, with separate threads.

    2. I want to be able to google index and search the comments.

    3. I want someone to be able to comment on a page, then someone else 3 months later respond to that comment.

  29. Also a share button on a page, allows users to share the page on facebook…

Comments are closed.

← Previous ArticleNext Article →
Buffer