Share This on Facebook

No doubt you’ve seen the nifty Share this on Facebook links on websites, maybe you even have them on your site already.  Did you know that you can also craft titles, descriptions, and a thumbnail for the page to pre-populate in the sharing box?  Follow the instructions after the break to get share this links on your site if you don’t already have them, and below that you’ll find some tips on getting titles, descriptions, and thumbnails added.

It’s impressive the number of sites that have been adding “share this on Facebook” links, and it’s a great way to help encourage your loyal viewers to spread the word to their friends.  What baffles me is when a site goes to the trouble of setting up the sharing links, but doesn’t set up the page with meta tags to declare a thumbnail, title, or description.  Make it easy for me! Just because I can write a title/description myself doesn’t mean I want to or that I’m going to.  I find posted links on Facebook profiles so much more enticing with a thumbnail attached, and while I have the ability to write my own title/description in the event you didn’t set something up for me, if you don’t specify a thumbnail and Facebook didn’t find any that fit their automated criteria (which often returns photos totally irrelevant to the link), then there’s nothing I can do. Carefully crafting your title, description, and thumbnail is going to enhance click through rates to help you get as much out of your users thoughtful sharing as you can!

Share This

Facebook Share ExampleTo include a convenient Share this on Facebook button on your page, simply paste the code below into your page code where you want the link to show up.

<script>function fbs_click() {u=location.href;t=document.title;window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width=626,height=436');return false;}</script><style> html .fb_share_button { display: -moz-inline-block; display:inline-block; padding:1px 20px 0 5px; height:15px; border:1px solid #d8dfea; background:url(http://static.ak.fbcdn.net/images/share/facebook_share_icon.gif?0:26981) no-repeat top right; } html .fb_share_button:hover { color:#fff; border-color:#295582; background:#3b5998 url(http://static.ak.fbcdn.net/images/share/facebook_share_icon.gif?0:26981) no-repeat top right; text-decoration:none; } </style> <a href="http://www.facebook.com/share.php?u=<url>" class="fb_share_button" onclick="return fbs_click()" target="_blank" style="text-decoration:none;">Share</a>

Link Title

Facebook TitleBy default, Facebook pulls your <title>Page Title</title> information. You can override this with a meta tag in the event you want the title on a Facebook shared link to be different than your page’s title.

<meta name="title" content="Facebook Link Title" />

Link Description

Facebook DescriptionIt appears that Facebook will try to pull a description from your main content in certain circumstances, however the primary source of a link description is your meta description tag. If you haven’t been good about creating these for SEO reasons (making your links more attractive in search results, not ranking), Facebook utilizing this tag should only add to the importancy for you.

<meta name="description" content="Brief description of your page for Facebook as well as popular search engines" />

Thumbnail

Facebook Thumbnail ChooserBy default, Facebook looks through all the photos included in your page and builds a list the user can scroll through. While I don’t have exact stats, I have to imagine that most users do not take the time to scroll through the thumbnails available and merely share the link as default. Often the first photo they detect has no real bearing on the link itself, potentially making the shared link less attractive to click on, despite the friend recommending it! Your best bet is to specify a specific thumbnail for Facebook to use, removing the options and making things as easy as can be for the user. As a bonus, a number of other websites will use this code including digg.com and yahoo.com.

<link rel="image_src" href="http://www.yoursite.com/images/fb-thumb.jpg" />

One warning on thumbnails, I’ve found that Facebook likes to ignore images that are disproportionately wide or tall and won’t show them, even if specified using the link tag as above. If you’re having problems with it not working, try using an image that is closer to square.

More Information

For more information on Facebook share links and even more advanced meta tags you can utilize if your page includes audio or video content, check out Facebook’s own resource, Share Partners.

This was originally posted on Andrew’s personal blog

Share Your Thoughts

Hi, is and , which you swear not to share with anyone, is .
If you're interested, I also have you can read at (optional).
Below are for this post: