Firstly you have to begin with this:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://ogp.me/ns#"
xmlns:fb="http://www.facebook.com/2008/fbml">
If you have a lot of images on your website and want to be able to select the thumbnails just from a part of them, use this:
<meta property="og:image" content="PATH/TO/IMAGE1.JPG"/>
<meta property="og:image" content="PATH/TO/IMAGE2.JPG"/>
...........
See http://developers.facebook.com/docs/share/ for a complete list with og: properties.
Now, let's create a custom share button
<a href="http://www.facebook.com/sharer.php?u='YourURL'" target="_blank">
<img src="PATH/TO/IMAGE.JPG" alt="Share on Facebook!" class="share">
</a>
If you want to use just the share button, directly without other meta just use this
<a href='http://www.facebook.com/sharer.php?s=100&p[title]=YOUR_TITLE&p[summary]=SHOME_DESCRIPTION_HERE&p[url]=http://www.YOUR_URL.com&p[images][0]=IMAGE1.JPG'><img src="PATH/TO/SHARE_IMAGE_BUTTON.JPG /></a>NOTE: You can not select select a specific thumbnail after clicking the share button. The default thumbnail will be the you have defined here p[images][0]=IMAGE1.JPG and you CAN'T USE p[images][1]=IMAGE2.JPG
All you need is the ?u= param because all other params will be parsed from the header meta tags (og:image, og:title, etc.)
Also this is useful because you can insert it in emails content.
If it doesn't work, it could be because the Facebook cache. While developing the page, you will make a lot of changes and maybe click the share button a few times to see how it works. When you first click the share button, Facebook will create a cache and when you will click the share button again, you will probably see the old result. This could be a little bit annoying. Facebook will recache your date in 1 to 7 days. Anyway, you can see the result here
developers.facebook.com/tools/debug
No comments:
Post a Comment