Sunday, May 22, 2011

How to Configure Facebook Share (fb-sahre) Thumbnail & Texts?

Update on 18/12/2014: The latest version has been updated here.

This could be something a lots of new web developers wanted to know as Facebook is gaining substantial popularity each day.

If one can share its web content to Facebook, it could mean a big help to the marketing of the website.


The link you need to put the Facebook link (<fb-share>) to your website or blog:


<HEAD>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>

<meta property="og:title" content="Your Title" />
<meta property="og:type" content="website" />
<meta property="og:image" content="Your Thumbnail Image Link" />
<meta property="og:url" content="Your URL" />
<meta name="description" content="Your Description" />

<HEAD>


<a name="fb_share" type="button_count" href="http://www.facebook.com/sharer.php">Share</a>







You can also configure the font for the "Share" text.


IMPORTANT Note: If you make a mistake somewhere in your code, you need to go to Facebook URL Linter to refresh the fb-share information of your page. If not, it will be stuck at your first submission as it is cached in Facebook server for future use until you run this Linter. I also heard it will be rerun 24 hours later. I did not take this chance to wait for another 12 hours to do another round of debug. Going to this lint link should be the easiest way to debug your fb-share link:

http://developers.facebook.com/tools/lint
Posted by at
Labels: ,

7 comments:

  1. Adi KurniawanMay 25, 2011 at 10:04 AM

    Hi,
    I have set the meta tags as shown in your example.
    Everything works fine, except the og:url tag. Before i hit the share button, it's displaying the correct url as set in the tag. But after I hit the share button, the shared message display the domain name of the site instead. So for example if I set the og:url as 'www.google.com/helloworld', the shared message (this can be seen after i hit share) will instead display 'www.helloworld.com'.
    Does anyone probably have any idea how to fix this ?

    Thanks

    ReplyDelete
  2. Adi KurniawanMay 25, 2011 at 10:05 AM

    This comment has been removed by the author.

    ReplyDelete
  3. Caveman BloggerJune 5, 2011 at 3:24 PM

    Thanks for your feedback. You can use this link to debug:

    http://developers.facebook.com/tools/lint

    I might be wrong or FB may be changing the standard from time to time. The best is still to use the FB linter to debug.

    Thanks!!!

    ReplyDelete
  4. joeOctober 5, 2011 at 3:21 AM

    Excuse me, how do i make my og:url have the url: http://www.facebook.com/username?sk=app_000000000000000

    ReplyDelete
  5. Caveman BloggerOctober 5, 2011 at 11:09 AM

    You can check with this simulator:

    http://developers.facebook.com/tools/lint

    It's the ultimate tool to verify. Since facebook changes its system from time to time, it's the last resort to double check.

    ReplyDelete
  6. Caveman BloggerOctober 5, 2011 at 4:00 PM

    It's now called:

    http://developers.facebook.com/tools/debug

    No longer called linter.

    ReplyDelete
  7. joeOctober 7, 2011 at 3:14 AM

    Thank you soo much!

    I now have the issue of the OG:URL displaying in the popup and the wall post when it I prefer it to display a third party client sub title. According to the fb docs, og:site_name should appear under the og:title. Very frustrating that its not working

    ReplyDelete

Subscribe to: Post Comments (Atom)