I am working on a wp blog site. Currently not using og tags at all.
I use the social sharing toolkit plugin to allow visitors to share articles on Facebook.
The problem:
When FB share box pops up, all of the images on the page are shown as thumbnail options to be published along with the article information. In some cases over 20 sometimes.
How can i specify only 1 image to be shown in the available thumbnail options?
I'd like to do this so that visitors don't, for example, select a meaningless image (such as page ad images or layout components)?
I tried using rel="image_src" as suggested but it made no difference.
Thanks.
This is working for me: I found out that even with OG meta tags Facebook Share plugin may present various thumbnails from my page, including all sorts of unwanted images. To work around it I add the wanted image with small size, first thing after the tag:
<img src="image_wanted_as_thumbnail.whatever" style="width:1px;height:1px;">
But I always use the OG meta tags as well.
Related
We use the Facebook Share option on a website with newsarticles. The website is build with PHP and uses Smarty. We generate a unique URL (stripped like /news/headline-of-the-article) and have the meta properties defined.
When the owner shares a links with an image that was previously uploaded, everything is fine. When he uploads a news image, inserts it into the article and shares, Facebook takes another pictures, the pictures that it finds first on the source-code. Altho, in the preview-box just before you publish, it shows the correct image. Once placed, it's the wrong one.
The Facebook Debug Tool shows as og:image tag > og:image domain/UserFiles/images/news/standard_14.jpg
But when I look at the RAW tags og:image shows > domain/UserFiles/images/news/bosuil_1.jpg
So the og:image tag does it job and generates the correct URL, but facebook still posts the wrong image. When I force Facebook (manually) to scrape again, it shows everything good and also shares it correct.
I don't get it...
I had the same problem and found these best practices on facebook's developer wiki: https://developers.facebook.com/docs/sharing/best-practices#precaching
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.
After specifying the width and height we have not had a problem with facebook crawling the right picture immediately.
This is my post featured image.
This is my post entitled "First post" with social icons at the bottom for sharing using social media feather plugin
This is what shows up when I clicked the facebook button
The image above shows that it doesn't return the right image set as featured image for the first post to be shared in facebook. I also encountered the same problem using WP Social Sharing. Can anybody help me solve this please. Thanks a lot.
Facebook, and other platforms that allow social sharing (LinkedIn, Twitter, G+, etc), all use a protocol called OpenGraph.
In it's simplest form, OpenGraph is a series of meta tags placed on a web page that describe that page. Common tags include a title of the page, description, image and a category. It is this OpenGraph image that Facebook uses in it's preview for the social share.
The tag itself is called og:image, and Facebook suggest it is at least 1200x630 pixels, although they will still use the image if it is less than that. As a side note for anyone viewing this thread and having the same issue with Facebook apps - you'll need to serve the image over HTTPS for that, something you don't need to do in this case.
I would suggest viewing the source of your page and finding the OpenGraph tags. If none are present (very possible) then Facebook is just doing it's best based on what it sees on the page. You can remedy this by adding your own tags, or using one of the many OpenGraph plugins available for WordPress.
More information on Facebook's best practices for social sharing are available.
Upon sharing a link on Facebook with og:image and og:video tags it will, under the right conditions, consistently display the wrong thumbnail image. Our clients are having this problem but unfortunately I cannot consistently replicate the conditions under which this issue occurs.
Go to the QVC UK Facebook page and look for video shares (example post). You'll see that the thumbnail for the video is the QVC logo when it should be the image given in the og:image tag. When putting the link through Facebook's debug tool the correct image is displayed with no content warnings or errors. This only seems to be happening when the URL is shared for the first time as subsequent shares will display the correct image. The image is present on our CDN before the URL is shared on Facebook. When I did manage to luckily replicate this issue; running the debugger before sharing on Facebook did not seem to solve the problem.
Am I missing something obvious, is there something wrong with my meta tags or could this be a potential facebook bug?
I've seen that multiple people are recording the same sort of problem on Facebook however only this bug has been left open (as of June 21st). In a related bug report Facebook mention that their crawlers don't only look at the image in the og tag but also look for other relevant images within the page.
Is it possible that it is seeing the QVC logo used so many times on the page that it decides to randomly overwrite the one specified?
Thanks
-- UPDATE
This only seems to be a problem when sharing to Facebook pages as opposed to a user's timeline. Changing the image URL seems to have temporarily fixed the problem. This looks like a Facebook bug
So, I've searched and searched this site before posting this question -- I know there is a lot of facebook like questions -- but I can't find an answer to mine.
I have a page VERY similar to Mashable.com. They have multiple teaser articles with LIKE buttons next to each. When you click the LIKE button, you see the article thumbnail, and the article description.
I already have this set-up and it works EXCEPT for the thumbnail and description. They are wrong or not showing up at all. How can I make sure these LIKE buttons are pulling the correct thumbnails and descriptions for each of my articles.
(They are not using Open Graph I don't think, because Mashable.com has no facebook meta tags (and even if they did, the meta tags only specify one thumbnail image, and one title, and one link).
Can anyone tell me how to customise the thumbnails and descriptions for each individual news story?
Thank you!
The href in each like button needs to point to the full URL of that article, which needs to have a full set of open graph meta tags.
Run the (article) page through the debugger at http://developers.facebook.com/tools/debug to make sure the correct tags are present and being detected by Facebook's crawler.
The crawler will fall back to using tags and other non-Open Graph meta tags if there aren't a full set present, but the behaviour in that case isn't easy to debug, especially in relation to the images.
Mashable's like buttons are pointing at page which do have open graph meta tags by the way, e.g. https://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fmashable.com%2F2011%2F10%2F28%2Fsteve-jobs-tributes%2F
So I want users to be able to share this link on facebook but I want only a specific picture to be the thumbnail for this sharing picture and no other images that appear on my web site
I read the documentation about facebook share and I got this
http://developers.facebook.com/docs/share
Basically what I understand is that
<link rel="image_src" href="thumbnail_image" / >
should do what I want. However, I cannot get this to work. My site is programmed using rails and, inside the layout, I have the above tag to take in an image url coming from a model instance.
Does anyone know how to use this properly? Am I misunderstanding something about this tag? I want to disable user from selecting through the images that I have on my page and just allow the user to share with only 1 image which I have to specify.
To specify a specific picture you will need to add open graph meta tags to your page. Take a look at http://developers.facebook.com/docs/opengraph/.
The open graph tag for your case is: og:image