Adding Facebook Likes and Shares to Your Site

While Facebook is currently getting some negative press over privacy concerns, it is still the second most visited site in the US. An estimated 137 million people visit Facebook each month, that’s about 45% of the US population. Any content producer simply can’t ignore the impact of such a massive audience and should assume that a significant portion their traffic is using Facebook.

The easiest way to start distributing your content on Facebook is to use one of the two iframe or javascript based technologies. These require very little development experience and will have your content shareable in no time.

Share Widget

This method requires only a single line of code to share the current page. This is very handy when you have a large site and you simply want to add an easy way for visitors to share your site with their network. Using the configuration tool, you can customize the look at feel to best suit your design. If you use the “link” method, you can also change the text to read whatever you wish, for example, “Share on Facebook”. You can also add a counter to include total number of times your content has been shared. However, on relatively low traffic sites, you may opt to simply make the sharing process easier. Nobody wants to be the first to share something.

This is the easiest way to get your content into the newsfeed. Facebook will parse the page that is being referenced and set a title, description and any related images automatically leaving the user to press “share” in the popup window that is generated. To use multiple shares on the same page, simply add a “share_url=” parameter to the link. The parameter you add here, should be a unique landing page that a visitor would get the intended content from. This is how AF-Design is generating the buttons beside article titles. The line breaks in the example code below are not necessary and are only included for clarity.

<a name="fb_share" 
      type="icon_link" 
      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>

Clicking on these shares generates a feed story like the one below.

Once you have completed this, be sure to read the section below on Good Meta Data. Now that you have made it easy for people to share your content, make sure you put your best face forward.

Like Button

The like button is a little bit more involved and may require more effort to enable on your site but it’s well worth the investment in time. The like button not only brings in the content, but if you fully adopt the open graph protocol for marking up your data, it will provide wider distribution in the long term. It’s still uncertain just how wide the additional semantic markup will spread your content, but with Facebook’s mass behind it, it’s certain to go far. It is likely, at some future date, the additional markup will be used by search engines and other content discovery tools.

If you are already using Facebook Connect, you can add a like button with a single line of XFBML. Since the premise of this post is that you need help getting started with your Facebook integration, we’re explaining the iframe approach. Facebook’s like tool provides you with a resource to configure the like button. Options include adding photographs, names and counters. On this site, the like button includes your friends who are engaged with the content, as well as a counter of engagement. You can see it in action, just above the comments below.

Another advantage of the like button, is if enough people “like” something, Facebook tends to elevate it in the newsfeed increasing distribution of your content.

This is how to create a properly escaped URL for each page, using PHP. The subsequent iframe includes the like button which you can then place on any page of your site.

<?php $like_url = urlencode('http://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']); ?>
<iframe src="http://www.facebook.com/plugins/like.php?href=<?php print $like_url ?>&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;font&amp;colorscheme=light&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>

Remember, regardless of how you create the URL, be sure it is escaped before generating the iframe code. When someone clicks on the like button, it will generate a network update like this on your profile.

Good Meta Data

Even if you choose not to implement one of the above strategies, it’s always important to have good accurate meta-data on your site. Facebook uses this meta-data when people share URL’s from the publisher. Facebook scans your page and provides to the user, whatever content it thinks is best. Providing good accurate meta-data for each page of your site is the best way to set those values.

Facebook supports an extended tag set to allow for direct embedding of audio, video and images directly into the newsfeed. It is likely these tags will change as the Open Graph protocol becomes more standardized, Facebook will continue supporting this for some time afterwards. Don’t use the impending changes as a reason to put off updating your meta-data, getting your information organized now will provide a leg up on your competition later.

This entry was posted in Facebook, Marketing, Social Networking, Websites and tagged , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>