quick question:
one tiny prob i have is when i try to share a page from my site on facebook (for example:http://pent-house.co.il/index.php/sale/52-2013-12-12-13-41-40), i cannot see thumbnails for the gallery. i see only the logo :\
is there any way that i can share the photos throw facebook?
thank you very much and have a damm nice day! XD
i wanted to shar a pic but i dont have enough reputation
You have to set an og:image meta tag like this:
<meta property="og:image" content="THE LINK TO YOUR IMAGE"/>
In the <head> of your document otherwise facebook bot uses (usualy) the biggest images he can fin. On the example page you linked to the biggest one is the logo.
Once you have set the og:image meta tag don't forget to delete facebook's cache by entering your page url on this page so you can see the modifications you make.
More information about thos meta tags and open graph here
I have a share button on my site (I use AddThis tool)
and Open Graph meta tags with article as a type:
meta property="fb:app_id" content="No"
meta property="og:image" content="LogoUrl"
meta property="og:image:type" content="image/jpg"
meta property="og:image:width" content="200"
meta property="og:image:height" content="500"
meta property="og:url" content="LogoUrl"
meta property="og:title" content="title"
meta property="og:type" content="article"
My url looks like that: [mySite]/9095210/1811, so for every different url, I insert different thumbnail, title and description.
My images are from an absolute url.
The problem: I see the details in facebook share preview window, only after the second time I click on the share button. On the first time the facebook share window appears, but without any details. If I continue and share the link in the first time (as in the times after) I see all the details in my facebook. So, the problem in only in the facebook share preview window.
Anyone meet this problem already, and maybe can help?
I had the same problem, and the solution was the next:
You need to create an application in the facebook developer area: https://developers.facebook.com/apps
And need to put the application id to the the fb_init just like this:
js.src = "//connect.facebook.net/hu_HU/all.js#xfbml=1&appId=YOUR_APP_ID";
After providing the correct appliaction id, my problem has been solved.
A similar issue is explained in the "facebook for developers" in sharing , best practices
Pre-caching images.
When content is shared for the first time, the Facebook crawler will scrape and cache the metadata from the URL shared. The crawler has to see an image at least once before it can be rendered. This means that the first person who shares a piece of content won't see a rendered image.
There are two ways to avoid this and have images render on the first Like or Share action:
Pre-cache the image with the Sharing Debugger
Run the URL through the URL debugger to pre-fetch metadata for the page. You should also do this if you update the image for a piece of content.
Use og:image:width and og:image:height Open Graph tags
Using these tags will specify the image dimensions to the crawler so that it can render the image immediately without having to asynchronously download and process it.
The third way, which is the way we do it, is to put in the link, and facebook responds with "fetching a preview" , close it and re-post. This works very well.
I hope that I understood your problem correctly and that this helps you.
I have these og meta tags in place:
(I'm replacing the actual values with examples here, it's a client's site and I'd like to be descrete)
<meta property="og:title" content="Article title"/>
<meta property="og:type" content="article"/>
<meta property="og:url" content="http://www.site.com/articles/article"/>
<meta property="og:site_name" content="Site title"/>
<meta property="og:description" content="Description, cca 200 characters"/>
<meta property="og:image" content="http://www.site.com/images/thumb.jpg"/>
The thumbnail used for og:image is 300x300px.
When I run the URL through facebook's debugger (ex linter) tool, it finds no errors or warnings. It displays one og:image, the one that is defined in the meta tags, as it should.
However, when the URL is actually shared on facebook, facebook offers two thumbnails - one which is the actual og:image, and also one completely random image, which is actually part of the layout.
Sometimes it offers the og:image first, but sometimes the other one is loaded first instead. So it happens that people share the link on facebook with a random piece-of-the-layout image in it.
I can't figure this out. Why is facebook doing it? I believe I've done everything by the book? Why is it loading this one extra image? Every google search I've run on "facebook loads wrong image" and similar strings only provides obvious advice that you need to have one og:image specified - which I do!!
I thought it might be a matter of fb cache, but it loads it on every single article. I have tried changing the image file name, and even loading it from a different domain name - and changing its colour to be sure facebook is loading it from the server and not its own cache. Nothing helped, facebook seems to have taken an extreme liking to it, it just won't let go of it.
Is there any way on earth to prevent this? I'm at my wits end. Has anyone had similar problems? :(
Remove the url meta tag. Looks like the metadata is not on the same page as the content. What FB crawler is doing is fetching the meta tag info from the provided url.
One of possible reason can be size of image that you are setting in
<meta property="og:image" content="domain/images/thumb.jpg"/>
Image size of specified image in above meta data should be greater than 200*200 for facebook sharing else it takes some random image probably the last in that html.Hopefully someone can still find it useful.
When I try to link my website on the Shared feature no thumbnails show up. What do I need to do so that Facebook will generate those thumbnails?
Your thumbnail must be at least 50x50 pixels, and you must specify it with a special meta tag in your site's HTML.
<meta property="og:image" content="http://yersite.com/yerimage.png"/>
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.
From Facebook's spec, use a code like this:
<meta property="og:image" content="http://siim.lepisk.com/wp-content/uploads/2011/01/siim-blog-fb.png" />
Source: Facebook Share
This blog post seems to have your answer:
http://blog.capstrat.com/articles/facebook-share-thumbnail-image/
Specifically, use a tag like the following:
<link rel="image_src"
type="image/jpeg"
href="http://www.domain.com/path/icon-facebook.gif" />
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/
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)
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
<meta property="og:title" content="The Rock"/>
<meta property="og:type" content="movie"/>
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/"/>
<meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>
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...
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:
<meta property="og:title" content="Title of the page" />
<!-- NEXT LINE Even if page is dynamically generated and URL contains query parameters -->
<meta property="og:url" content="http://yoursite.com" />
<meta property="og:image" content="http://convertaholics.com/convertaholics-og.png" />
Debug your page with Facebook debugger and fix all the warnings and it should work like a charm!
https://developers.facebook.com/tools/debug
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/
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.
<meta property="og:image" content="http://www.coachesneedsocial.com/wp-content/uploads/2014/12/BannerWCircleImages-1.jpg" />
<meta property="og:description" content="Coaches share their secrets to success so you can rock 2015." />
<meta property="og:url"content="http://www.coachesneedsocial.com/coacheswisdomtelesummit/" />
<meta property="og:title" content="Coaches Wisdom Telesummit" />
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.
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: <title>INSERT POST TITLE</title>
Image: <meta property=og:image content="http://site.com/YOUR_IMAGE.jpg"/>
Description: <meta name=description content="INSERT YOUR SUMMARY TEXT"/>
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.
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.
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->addCustomTag('<meta property="og:title" content="YOUR SITE TITLE" />');
$document->addCustomTag('<meta property="og:name" content="YOUR SITE NAME" />');
$document->addCustomTag('<meta property="og:description" content="YOUR SITE DESCRIPTION" />');
$document->addCustomTag('<meta property="og:site_name" content="YOUR SITE NAME" />');
if (isset($images->image_fulltext) and !empty($images->image_fulltext)) :
$document->addCustomTag('<meta property="og:image" content="'.$path.'<?php echo htmlspecialchars($images->image_fulltext); ?>" />');
else :
$document->addCustomTag('<meta property="og:image" content="'.$path.'images/logo.png" />');
endif;
This will place meta og tags in the head with details from current article.