Facebook - Share a link - My image is not showing up !

on
I try to share my page on facebook and it doesnt show up my image.
OR
I try to share my page on facebook and it shows all the images on my page - except the one I want.

I faced this problem while working on my website. And I had no clue about the facebook API as it was worked upon by our UI team. Damn! I wasted 2 days to find out the solution.

So here are my findings:
  1. Facebook has a very good documentation. Please refer it.
  2. Facebook uses Open Graph Protocol.
  3. Now  a user can do 2 things with our page
    1.  Like our page OR
    2. Share our page.
Like Button
We can have like buttons in 2 styles.
  1. Simple button
  2. Button with a count of the number of likes.
Now since I am not writing about like button, I would ask you to use a tool to generate code for your like button. Please refer - http://developers.facebook.com/docs/reference/plugins/like/

 Share Button
Sharing a page is trickier than liking a page. Like is simple. But share takes in a lot more parameters.

I found out a lot more ways to share a page.

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

    This javascript must be included in page only once - irrespective of the number of share buttons. And the name of the anchor tag - fb_share - plays a big role.
    Here is an example of the button mentioned above. SHARE SHARE SHARE
    This code shares your page - the page where this code exists.
  2. Share href
    This code (unlike the code above) allows us to share some other page as well. Here is the code. Share Harley Davidson - Superlow.
    Now this tag takes a URL - facebook URL with 2 parameters.
    1. u - the URL that is to be shared.
    2. t - The title (description text) with which this page will be shared.
    Now about the images and the title and the text and so on. Facebook while sharing a page, parses the target page and decides what to show, and what not. So there must be something, facebook looks for. Yes, these are the meta tags that describe the page.
    The format of meta tag is
    The content is where we put our values. And the property is the variable for which we define these values. So the property for the current page is og:url where og stands for open graph protocol. Following are a few properties generally used.
    1. og:url - for the URL of current page that must appear while sharing.
    2. og:title - for the title that must appear while sharing
    3. og:description - for the description that must appear for the current page
    4. og:image - for the image that must appear for the current page. We can have multiple og:image meta for multiple images
    5. og:video - for videos to be shared for this page. It needs height and width too as og:video:height and og:video:width meta tags.
    An example would be this page itself. If you see the source code of this page, you will find the example meta tags.
    In absence of these meta tags, the page title is taken in place of og:title and all the images appearing in the page are taken in place of og:image and what not.
    Another thing worth noting is that we can even have videos to be shared. Please refer facebook documentation for more information.
    If meta tag is perfectly set, then all the image problems, video problems etc are resolved. So I would suggest you to re-check these tags. If any of them is missing or wrong, you will have problems. 
I had 2 problems in my case.
  1. The image size that I was using violated the facebook standards. This is what the facebook documentation says: The og:image is the URL to the image that appears in the Feed story. The thumbnail's width AND height must be at least 50 pixels, and cannot exceed 130x110 pixels. The ratio of both height divided by width and width divided by height (w/h, h/w) cannot exceed 3.0. For example, an image of 126x39 pixels will not be displayed, as the ratio of width divided by height is greater than 3.0 (126/39 = 3.23). Images will be resized proportionally.
  2. I didn't have og:url tag set properly - This must be your internet accessible URL for the current page.
References
  1. Open Graph Protocol - http://developers.facebook.com/docs/opengraph/
  2. Like Button - http://developers.facebook.com/docs/reference/plugins/like/
  3. Share Button - http://developers.facebook.com/docs/share/ 

Finally,  to check if your facebook related code is working perfectly or not - use the facebook debugger tool - http://developers.facebook.com/tools/debug. It is really helpful.




Comments

Post a Comment