Skip to content


How to create own thumbnail for Facebook share button

Posted in WEB development.

Recently, I added cool Facebook share/like/recommend button to my new web project. At first, everything went well. I followed official tutorial from Facebook developers page and the result was as expected:

I pressed Recommend button, then visit my Facebook profile and there was selected probably the worst image thumbnail from my page! WHAT !?? Facebook magic?

I started to check this issue with our friend, Google Search, where I found many tutorials about how to edit Facebook share post. It’s easy and we will get to it later in this post. However, the Facebook is using cache for all pages that are shared. So when you change Facebook share settings, it will be in effect many hours or day later (after Facebook cache will be flushed).

Therefore, I wrote down this simple tutorial about how to change Facebook share settings with immediate changes:

    1. Customize and add Facebook Share html code to your web page by using official Facebook developers tutorial.
      Example:
<iframe
 src="http://www.facebook.com/plugins/like.php?app_id=1234567891011&amp;href=http%3A%2F%2Fwww.website.eu&amp;send=false&amp;layout=standard&amp;width=330&amp;show_faces=true&amp;action=recommend&amp;colorscheme=light&amp;font&amp;height=80"
 scrolling="no"
 frameborder="0"
 style="border:none; overflow:hidden; width:330px; height:80px;"
 allowTransparency="true">
</iframe>
    1. As per another documentation on the Facebook developer site, edit your html header with Facebook meta tags. Here you will specify, what will be displayed in the Facebook share post
      Example:
<head>
 <meta property="og:title" content="Displayed title" />
 <meta property="og:description" content="Summary description" />
 <meta property="og:url" content="url_of_the_page[if you want use other than default]" />
 <meta property="og:image" content="url_to_thumbnail_image" />
 ...
</head>

  1. When you try to share you web page now, you will see no changes in Facebook share post. This is caused by mentioned Facebook cache hell.
    Go to Facebook URL Linter (Facebook URL Lintner), enter your web page URL and click debug. The facebook cache will be flushed and renewed. Now, you will see all information of your web page from Facebook’s view.
  2. Try to click Facebook Share button now. Vuala, the magic happened correctly now.

Tip: Use official Facebook WordPress plug-in:  http://wordpress.org/extend/plugins/facebook-share-new/



Tagged with , .