Easy Way to Change Facebook’s Share Image and Title

It is a very old post. It was working on year 2011. It may not work now

Update
The FB.Share script no longer available. If you want to share the you have to use Javascript SDK and Feed Dialog. If want like button then use https://developers.facebook.com/docs/reference/plugins/like/. The opengraph meta tags still works.

Now a days, every one wants to share every thing on Facebook. Sometimes there are no image on the page so Facebook will not show any image or you want to change the title of what you want to share.

For example you have a page on you site that shows a YouTube video or Vimeo video. Now you want to show the thumbnail of the video as the Facebook share’s image. How you do it? First we add the Share code on the page.

<a type="button" name="fb_share"></a>Share<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>

Now you add the image url and title in the meta tag.


You can add couple of other things on the meta to change the way the share shows information. You can find it HERE. You can see example of the share HERE.

You can also check page using this tool HERE. This tool also can be used as cache clear. For example, YOu had page where you show a image now you want to show a new image. But share is show old image. Just put the page url here and lint.

About Zakir Hyder

This entry was written by .

08. April 2011 by Zakir Hyder
Categories: Facebook, General, Social Networking Application Development | Comments

Comments

  1. john says:

    thanks man for this tip! finally solved my facebook sharing woes!

  2. jodi says:

    Hi,
    Thanks so much for this info. I’m ready to launch a new website and my logo just doesn’t come out clear so looking to use the main page photo.

    I am using the 2. code in my template for the share button, but which one and where do I add the meta share? I tried added to the first code but nothing happens. Thanks!

  3. Zakir Hyder says:

    HI Jody,
    You have to add the “og:image” meta image to head element. See this page https://developers.facebook.com/docs/opengraphprotocol/. BTW remember the page where you are using share that page has to be avaialaleb with out any authentication. Suppose http://www.site.com/user.php is the page you want to share. But you have authentication system so that user have to login to see http://www.site.com/user.php. Then when Facebook crawl this page the crawler will be redirected so the meta tags will not be available to user.