How to Increase Your Site’s Traffic Through Facebook Share
Despite the growing interest in Facebook Connect as a way to integrate Facebook identity and sharing features on any site around the web, one of the untold stories about sharing on Facebook is the simple power of the Facebook Share button. With the latest Facebook home page redesign, the Facebook Share button just became a lot more powerful: now, every shared item is guaranteed to show up on users’ friends’ home pages.
By optimizing the way your site supports Facebook Share, webmasters can get as much as the 20-30 clicks per feed story that some Facebook Connect partners are seeing with much simpler integration work (it can be as simple as adding one line of code). Here’s how to optimize your site for maximum Facebook Share click-through traffic.
1. Add the Share Button to Your Site
There are 4 different versions of the Share button: icon only, link only, link and icon, and share button. Grab the code here and put the button you like best on all pages you want your visitors to share.
2. Make Sure Facebook Can See Your Title and Description
When sharing content on Facebook using Share, Facebook looks for a title, description, and thumbnail image to pull into the feed story. While Facebook will always try to find this for any shared link, you can actually specify this copy for the Facebook crawler if you want to have more control over the copy or images that show up in Facebook.
At the very least, you should test out sharing content from your site in order to make sure Facebook is picking up a title and description for pages shared from your site. Just make sure you’re setting these two lines of code in your site’s header:
<meta name=”title” content=”SXSW Driskill Flashmob: When Friends Converge & Create Memories” />
<meta name=”description” content=”When we peer into the looking glass into what truly made SXSW Interactive a unique and successful culmination of culture and real life networking, we see something very different and exceptional.” />
3. Specify a Particular Thumbnail Image
Once you have the basic plumbing in place, Facebook gives you the option to explicitly specify which image shows up next to content your users share. If you don’t specify what to pick here, Facebook will choose images from the page and let users pick which to show.
If you want to specify a particular image for Facebook Share, add this line of code to your header:
<link rel=”image_src” href=”http://farm4.static.flickr.com/3640/3354626316_25f2e12dbf.jpg?v=0″ />
Here’s how it would look inside Facebook:
4. Optimize for Multimedia
In addition to basic content sharing, Facebook also makes it possible to add metadata to your page to make audio and video sharing more powerful. When you use these tags, your shared content can be playable directly in the feed.
First, you have to add this line to your site’s header to let Facebook know which type of multimedia it is:
You may also specify the type of content being shared by using the following tag:
<meta name=”medium” content=”medium_type” /> (where medium_type could be “audio”, “image”, “video”, “news”, “blog” 0r “mult”)
<meta name=”title” content=”video_title” />
<meta name=”description” content=”video_description” />
<link rel=”image_src” href=”video_screenshot_image_src url” />
<link rel=”video_src” href=”video_src url”/>*
<meta name=”video_height” content=”video_height” />
<meta name=”video_width” content=”video_width” />
<meta name=”video_type” content=”Content-Type header field” />
<meta name=”title” content=”page_title” />
<meta name=”description” content=”audio_description” />
<link rel=”image_src” href=”audio_image_src url (eg. album art)” />
<link rel=”audio_src” href=”audio_src url” />
<meta name=”audio_type” content=”Content-Type header field” />
<meta name=”audio_title” content=”audio_title (eg. song name)” />
<meta name=”audio_artist” content=”audio_artist_name” />
<meta name=”audio_album” content=”audio_album_name” />
April 6th, 2009 at 2:14 pm
Nice tutorial. Tips for those of us who use wordpress and/or podcast might be handy for this topic.
April 6th, 2009 at 3:18 pm
I was just sharing some similar details with a colleague, not 2 weeks ago. Thanks for putting in all the code necessary to make it work properly. Cheers!
April 6th, 2009 at 3:50 pm
Justin, thanks including the Bub.blicio.us story as an example. This was an incredible post! Taking notes!
April 7th, 2009 at 9:41 am
I think it’s interesting that Facebook is now being used as a marketing tool. It kind of ruins it for those who are using it as a way to connect with friends.
April 9th, 2009 at 5:57 am
Great article , I have followed these practices for my site ( http://filmjamr.com)and have seen the difference ….really well written article…great help
cheers
Bally
Filmjamr Copr.
April 9th, 2009 at 2:57 pm
Anyone else having trouble prepopulating the image with the link rel=”image_src” technique? The image I’m linking to is not getting into the share form.
April 10th, 2009 at 2:24 pm
I’m trying to get this to work in a dynamically generated site, i.e. a blog. I got the icon to appear in each post, but no matter what post the icon is clicked from, the shared content is the blog as a whole, i.e. the most recent post at that moment. Can this be fine tuned somehow, so that the share link picks up the specific post it appears in (is clicked from), rather than the most recent one?
THANKS
April 20th, 2009 at 9:45 pm
Nice Article. I will apply all this to get more traffic to my site. Thank you.
April 21st, 2009 at 7:03 pm
Thanks for the information, really useful to know.
May 11th, 2009 at 6:14 am
[...] notare che, oltre a Facebook, questo tag funziona anche su Digg e su Yahoo!. Tre ottimi motivi per [...]
August 13th, 2009 at 11:29 am
Is there a way to do the sharing on the various facebook mobile sites?
August 23rd, 2009 at 11:38 pm
I am having trouble getting the Thumbnail image to work in the Share on Facebook thingy. I am using the AddThis tool. The meta title and description work but not the image_src! I would love to get some feedback on this :)
August 24th, 2009 at 9:58 am
Hm works first thing this morning, thanks for the happy thoughts evri1 :)
August 25th, 2009 at 9:54 am
hi!All.Everything work fine.But the link rel=”image_src” also NOT WORK.
NEED HELP!!!!!
Does Anyone integrated this code into OSCommcerce?
thank you
September 18th, 2009 at 6:19 pm
nice post keep it up also try redgage.com
October 21st, 2009 at 9:45 am
I have tested the rel=”image_src” on IE8 and Firefox 3.5. Seems to work with the AddThis tool through IE8 but not on Firefox.
AddThis stated that it was an FB issue in parsing the URL. Still have not been able to track down any documentation.
Anyone have a solution yet?
Chip
November 17th, 2009 at 7:43 am
Thanks for this article Justin. I’ve been using Facebook to share posts from my blog. but I learned that we need to protect our integrity by only sharing useful and interesting posts.
November 30th, 2009 at 9:06 am
Nice post. I am just starting my own blog, so these tips will be handy.
January 21st, 2010 at 8:35 pm
i wrote some code for asp and php to cloak the special meta tags so search engines will see correct tags and Facebook with still get the tags optimized for social networking
January 25th, 2010 at 7:57 am
This is a great article. More and more of my clients are requesting Facebook marketing and this couln’t ber more timely.
March 15th, 2010 at 9:16 pm
[...] other SEO-type WordPress plugins. For other sharing-specific meta tags, such as audio and video, check out this article, or Facebook’s developer [...]
March 24th, 2010 at 11:04 pm
this is really a nice article. Thanks a lot for sharing this trick.
March 31st, 2010 at 1:21 am
Great article. Thanks for putting in all the code necessary to make it work properly.
April 12th, 2010 at 8:40 am
Hi , thank you for sharing
I would like to check with you, as mentioned above Number 2,
It is my code should look like this when put in to my wordpress blog header.php
<meta name="title" content="”>
<meta name="description" content="” />
For number 3:
Should my code look like this while in hearder.php
<link rel="image_src" href="”
Please suggest where should i place the above code, and does the above code is correct.
Thank you In advanced
Thank you
Anthony
April 18th, 2010 at 2:40 pm
[...] notare che, oltre a Facebook, questo tag funziona anche su Digg e su Yahoo!. Tre ottimi motivi per [...]
September 26th, 2010 at 4:11 am
Nice tips,
There is also the Facebook meta tags, that help to optimize your website for Facebook and let you to control how your website will look in Facebook:
October 21st, 2010 at 11:15 pm
nice info…i have been doing this from last 3 months….very useful
March 11th, 2011 at 9:42 am
[...] image for Facebook Share, insidefacebook.com [...]