AddThis Share with Facebook Passing Title, Description, And Thumbnail Image
AddThis.com is a website service that allows webpages to easily share their content with many social networking sites such as Facebook, Twitter, Digg, etc… This service is now integrated into the ShopSite ecommerce software in the latest version 10 Service Pack 1 (SP1) release. One of the more popular sites to share with is Facebook. However, people looking to share a page / product on Facebook may not get the title, description, and thumbnail image pre-populated as you would like.
Fortunately, there’s an easy way to insure that visitors clicking the share link to post your page to Facebook will get their Facebook status textbox pre-populated with related information.
addthis example (click to enlarge)
addthis popup image
What happens by default?
By default, when a URL is passed to Facebook to be shared with friends, Facebook tries to determine the best content for the title of the page, a short description, and an optional thumbnail image. If your page is not setup in a way that Facebook recognizes, random things may be inserted by default, or possibly nothing at all.
Share with Facebook Example (click to enlarge)
When the shared link is not populated with relevant information, this lessens the chance that a Facebook user will actually share your page / product with others, as they now have to add this information themselves, or may not want a blank link added to a status update.
Tell Facebook what you want displayed
Luckily the Facebook developers were smart enough to realize they cannot predict every type of web page on the internet. Instead, they offer a few simple meta tags that control how this information is passed to Facebook:
- TITLE
<meta name=”title” content=”The title of the link being shared” />
- SHORT DESCRIPTION
<meta name=”description” content=”A description of the page” />
- OPTIONAL THUMBNAIL IMAGE
<link rel=”image_src” href=”http://www.ABC.com/images/XYZ.jpg” />
That’s all you need to tell Facebook what to populate in the link details when someone shares your page with others on Facebook. For more options and details, visit the Facebook Share/Specifying Meta Tags page on the Facebook Wiki site.
ShopSite custom template example
If you are using ShopSite and want to make sure this functionality exists in your “More Information” product template, you could use the following tags/code:
<meta name="title" content="[-- PRODUCT.MoreInformationTitle --]" /> <meta name="description" content="[-- PRODUCT.MoreInformationMetaDescription --]" /> <link rel="image_src" href="http://www.ABC.com/media/[-- IMAGE Product.MoreInformationGraphic --]" />
Just place this code in the “<head>” region of your more information section of your product template(s).
Looking for a web host that understands ecommerce and business hosting?
Check us out today!
i wrote some code to cloak the special headers that Facebook looks for show you can show different meta tags to search engines and Facebook
Thanks for the link to enhance sharing with Facebook. Looks good!
Hey does anyone know if the addthis toolbar drains page rank? If so how would you apply the rel=”nofollow” attribute to it?
I find it kind of suspicious that addthis.com has a Page rank of 10 while Yahoo.com has only a Page Rank of 9. Just thoughts from a geek!
Aaron,
You can just add the [rel=”nofollow”] modifier to the “a” html tag. That is all that is needed. I don’t know if it causes page rank issues, but if you add nofollow, Google should respect it.
Very handy, just what I was looking for, thanks.
how do you addthis to my business FB page which is a sub account to my personal FB page
Not sure I understand your question. The addthis service allows you to put a link on your site so users can easily share your webpage with others. With Facebook, you can define what gets passed in the share link. You do not link directly to your FB page.
The post from Rob Mangiafico above works for the AddThis standard button, but does anyone know how I can add a “No Follow” tag to a “customised” series of buttons. Is it like this?
BEFORE
<a>Facebook</a>
<a>MySpace</a>
AFTER
<a>Facebook rel=”nofollow”</a>
<a>MySpace rel=”nofollow”</a>
I know this is right after an explicit url reference, but not sure here?
Many thanks,
Ray
The format would be:
<a rel=”nofollow”>Facebook</a>
Thank you SO much Rob, but the way the forum renders my code as I type it in, is not the way it appears on the screen or the way you are seeing it. I will try here again, and see if I can get around the problem:
LINE BEGIN <a>Facebook</a>
LINE BEGIN <a>MySpace</a>
Ray
you cannot type html tags directly. If you need to show examples, you can use brackets “[ ]” instead of html tags “<>“.
Thank you Rob. With your help I now understand the right syntax:
[a rel=”nofollow” class=”addthis_button_facebook”]Facebook[/a]
[a rel=”nofollow” class=”addthis_button_myspace”]MySpace[/a]
Tahnk’s Rob… I think that AddThis is one of the best plugin for WordPress…
Thanks for the awesome tutorial!! I didn’t realise it was so simple, now I get to have fuuuun with AddThis 😀 keep up the great work!
This is an excellent resource. I use Facebook as part of my advertising efforts and as of now, the share link has not been fully utilized. The ‘no follow’ tag is a big help, too. Thanks!
This assumes you are sharing the current page.
What do you do in the scenario when when you are sharing an external page (or other page)? ..
e.g. addthis code on SiteA/PageA actually shares page on SiteB/PageB – this is a common issue