How to show particular image as thumbnail while implementing share on Facebook

Question

I am trying to implement share this method  I am using the code as follows  http   www facebook com share php u my website url   Now when Facebook is showing it showing some thumbnails at left side  These images are picked from my website  How can I pick a particular image as thumbnail or at least stop it showing thumbnail   You can check it with my blog address

User · Answer

My tags were correct but Facebook only scrapes every 24 hours, according to their documentation. Using the Facebook Lint page got the image into Facebook.

Enter your URL here and FB will update the metadata from your page:

https://developers.facebook.com/tools/debug (updated link)

User · Answer

I was having the same problems and believe I have solved it  I used the link meta tag as mentioned here to point to the image I wanted  but the key is that if you do that FB won t pull any other images as choices  Also if your image is too big  you won t have any choices at all   Here s how I fixed my site http   gnorml com blog facebook-link-thumbnails

User · Answer

I see that all the answers provided are correct  However  one important detail was overlooked  The size of the image MUST be at least 200 X 200 px  otherwise Facebook will substitute the thumbnail with the first available image that meets the criteria on the page  Another fact is that the minimum required is to include the 3 metas that Facebook requires for the og image to take effect    lt meta property  og title  content  Title of the page    gt   lt  -- NEXT LINE Even if page is dynamically generated and URL contains query parameters -- gt   lt meta property  og url  content  http   yoursite com    gt   lt meta property  og image  content  http   convertaholics com convertaholics-og png    gt    Debug your page with Facebook debugger and fix all the warnings and it should work like a charm  https   developers facebook com tools debug

User · Answer

The easiest way I found to set Facebook Open Graph to every Joomla article  was to place in com content article default php override  next code    app      JFactory  getApplication     path     JURI  root      document   JFactory  getDocument     document- gt addCustomTag   lt meta property  og title  content  YOUR SITE TITLE    gt      document- gt addCustomTag   lt meta property  og name  content  YOUR SITE NAME    gt      document- gt addCustomTag   lt meta property  og description  content  YOUR SITE DESCRIPTION    gt      document- gt addCustomTag   lt meta property  og site name  content  YOUR SITE NAME    gt     if  isset  images- gt image fulltext  and  empty  images- gt image fulltext           document- gt addCustomTag   lt meta property  og image  content     path   lt  php echo htmlspecialchars  images- gt image fulltext     gt     gt     else        document- gt addCustomTag   lt meta property  og image  content     path  images logo png    gt      endif    This will place meta og tags in the head with details from current article

User · Answer

Facebook uses og tags and the Open Graph Protocol to decipher what information to display when previewing your URL in a share dialog  or in a news feed on facebook    The og tags contain information such as     The title of the page The type of page The URL The websites name A description of the page Facebook user id s of administrators of the page   on facebook     Here is an example   taken from the facebook documentation   of some og tags   lt meta property  og title  content  The Rock   gt   lt meta property  og type  content  movie   gt   lt meta property  og url  content  http   www imdb com title tt0117500    gt   lt meta property  og image  content  http   ia media-imdb com rock jpg   gt   Once you have implemented the correct markup of the og tags and set their values  you can test how facebook will view your URL by using the Facebook Debugger   The debugger tool will also highlight any problems it finds with the og tags on the page or lack there-of   One thing to keep in mind is that facebook does do some caching with regard to this information  so in order for changes to take effect your page will have t be scraped as stated in the documentation         Editing Meta Tags      You can update the attributes of your page by updating your page s    tags  Note that og title and og type are only editable   initially - after your page receives 50 likes the title becomes fixed    and after your page receives 10 000 likes the type becomes fixed    These properties are fixed to avoid surprising users who have liked   the page already  Changing the title or type tags after these limits   are reached does nothing  your page retains the original title and   type       For the changes to be reflected on Facebook  you must force your page   to be scraped  The page is scraped when an admin for the page clicks   the Like button or when the URL is entered into the Facebook URL   Linter Facebook Debugger

User · Answer

Here   s how this works all    You need the ability to access the HTML on the particular webpage you are sharing  It ll probably work site wide too if you use a common header file  I have not tried this  but it should work  You ll just get the same image for all pages if you do this though  You need to add these HTML meta tags into page in the   It will not work if you put it in the   Make sure to customize per your a  image  b  description  c  URL  and d  title    A Real Example    lt meta property  og image  content  http   www coachesneedsocial com wp-content uploads 2014 12 BannerWCircleImages-1 jpg    gt    lt meta property  og description  content  Coaches share their secrets to success so you can rock 2015     gt    lt meta property  og url content  http   www coachesneedsocial com coacheswisdomtelesummit     gt    lt meta property  og title  content  Coaches Wisdom Telesummit    gt     Save Open a fresh Facebook post  and retry the page you wanted to share  If you are having trouble    you can debug it with this Facebook tool  It looks more geeky than it is  It tells you what Facebook is seeing when you post in the URL to share    https   developers facebook com tools debug og object   Big Tip   make sure the    quote marks    are the same in your HTML  they should look like 2 straight marks and no curves    sometimes programs change these to different fonts and it goofs up the code

User · Answer

I also had an issue on a site I was working on last week  I implemented a like box and tested the like box  Then I went ahead to add an image to my header  the ob image meta   Still the correct image did not show up on my facebook notification   I tried everything  and came to the conclusion that every single implementation of a like button is cached  So let s say you clock the Like button on url A  then you specify an image in the header and you test it by clicking the Luke button again on url A  You won t see the image as the page is cached  The image will show up when you click on the Like button on page B   To reset the cache  you have to use the lint debugger tool that s mentioned above  and validate all the Urls for those that are cached    That s the only thing that worked for me

User · Answer

From Facebook s spec  use a code like this    lt meta property  og image  content  http   siim lepisk com wp-content uploads 2011 01 siim-blog-fb png    gt    Source  Facebook Share

User · Answer

Sharing on Facebook  How to Improve Your Results by Customizing the Image  Title  and Text  From the link above  For the best possible share  you ll want to suggest 3 pieces of data in your HTML    Title  Short description  Image   This accomplished by the following  placed inside the  head  tag of your HTML    Title   lt title gt INSERT POST TITLE lt  title gt  Image   lt meta property og image content  http   site com YOUR IMAGE jpg   gt  Description   lt meta name description content  INSERT YOUR SUMMARY TEXT   gt    If you website is static HTML  you ll have to do this for every page using your HTML editor   If you re using a CMS like Drupal  you can automate a lot of it  see above link   If you use wordpress  you can probably implement something similar using the Drupal example as a guideline  I hope you found these useful   Finally  you can always manually edit your share posts  See this example with illustrations

User · Answer

This blog post seems to have your answer  http   blog capstrat com articles facebook-share-thumbnail-image   Specifically  use a tag like the following    lt link rel  image src         type  image jpeg         href  http   www domain com path icon-facebook gif    gt    The name of the image must be the same as in the example   Click  Making Sure the Preview Works   Note  Tags can be correct but Facebook only scrapes every 24 hours  according to their documentation  Use the Facebook Lint page to get the image into Facebook   http   developers facebook com tools lint

[facebook] How to show particular image as thumbnail while implementing share on Facebook?

Examples related to facebook

[facebook] How to show particular image as thumbnail while implementing share on Facebook?

Examples related to facebook

Examples related to sharethis