:: TheOneAndTheOnly.com – Andrew Buckman ::

Share on Facebook

Blogged in Social Networking by Andrew · Friday May 8, 2009

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.

Fine Print

Before anybody chirps at me for not having this on my site here, yeah I know. Do as I say, not as I do? :) To be fair, I do practice what I preach on client’s sites, this blog is getting old and I haven’t gotten around to updating it.

4 Responses to “Share on Facebook”

  1. Al says:

    thanks so much, have managed to now solve this problem on my site, genius!

  2. Jared says:

    I experienced tons of problems getting this working. I tracked my problem down to use of special IE if statements to display different stylesheets to IE7/IE8 users.

    When facebooks hits a page with these tags in it, the Meta Tags are ignored.

    Took hours of testing, but this was the problem for me.

  3. @janetpotts says:

    My problem is just the opposite. I'm a volunteer for an animal shelter and do most of their website and Facebook updating. I don't have access to the underlying structure of the website and can only modify the content div. When I want to share something from the website to the Facebook account, I can't choose an image appropriate to the content because of the meta tags in the header. Everything I post just has the shelter's logo. It's okay, but then everything looks the same so how does someone scanning the Facebook wall distinguish between one post and another? We usually have some kind of topic appropriate image in the content div but it's useless for sharing to Facebook because Facebook only ever sees the image in the <link> tag. My work around has been to upload the image to the Facebook wall and add a link in the text. Not the prettiest solution. I'd like a way to over ride the meta tags where appropriate so that the image and heading level tags of the content div can be used. The site uses ASP Net and I have used iFrames when necessary to embed forms for Paypal. Is there any way of over riding the meta tags to share a specific piece of the content?

Leave a Reply

©2010 Andrew Buckman
34 queries. 0.295 seconds.
Powered by Wordpress
theme based on desert by evil.bert