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.
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.
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:
<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).