This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
How does Facebook Sharer select Images?
Want to have share thumbnail when user shares site url using share button on site which uses http://www.facebook.com/sharer.php to achieve that.
Site dose not have img tags, all images are defined in css.
I added meta tags for image:
<meta property="og:image" content="/images/branding/branding-logo.png"/>
and
<link rel="image_src" href="/images/branding/branding-logo.png"/>
but it's not working :(
Use the full list of Open Graph Meta Tags:
og:title - The title of the entity.
og:type - The type of entity. You must select a type from the list of Open Graph types.
og:image - The URL to an image that represents the entity. Images must be at least 50 pixels by 50 pixels. Square images work best, but you are allowed to use images up to three times as wide as they are tall.
og:url - The canonical, permanent URL of the page representing the entity. When you use Open Graph tags, the Like button posts a link to the og:url instead of the URL in the Like button code.
og:site_name - A human-readable name for your site, e.g., "IMDb".
fb:admins or fb:app_id - A comma-separated list of either the Facebook IDs of page administrators or a Facebook Platform application ID. At a minimum, include only your own Facebook ID.
Also use absolute URLs instead of relative!
EDIT:
Please note that Facebook caches webpages for specific periods so you may not notice your changes right away. A good way to check if Facebook is/will actually take your changes is by faking a parameter in your URL.
for example if your URL reads: http://example.com/index.php
Add something like: http://example.com/index.php?123 and then use it in the URL Linter. ;-)
EDIT 2:
You could directly use the Facebook Linter (now called Debugger), but be aware that some data cannot be changed in some cases, described here:
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.
Paste your ulr here https://developers.facebook.com/tools/debug/ . The facebook Open Graph Debugger will tell you exactly what is reading from your page. And also will update facebook cache of your page so it can try to read images from it again.
As ifaour said, you have to use absolute URLs or they won't be displayed. The <link> tag should work fine.
Related
I've successfully added a Share button to my website using the following code:
https://developers.facebook.com/docs/plugins/share-button
It produces a popup with a link to the og:url along with the title of the linked page and a picture from it, which I can then post, and it shows up on my Facebook.
I am having 3 issues with this:
I've update the og:url and data-href after page load, using jquery, but the new values get ignored when I Share.
the og:title, og:description, and og:image don't appear to be used at all.
Sometimes I'd like to Share some custom text (and images if possible) without any url.
I'm aware that Facebook provide other tools/APIs that provide more versatility but it seems that would mean my site would have to go through a review process, and I'd have to code for security. This is not an option and I want to stick to the popup method.
Hope someone can help. Many thanks.
If the tags do not change when posting, refresh (and test) the tags in the debugger: https://developers.facebook.com/tools/debug/sharing/
Dynamically created Open Graph tags (with JavaScript) will be ignored, the tags have to be in the original page source.
I have inserted the OG meta tags in my pages and also have provided a simple link to help users share the contents on the Facebook using the
https://www.facebook.com/sharer/sharer.php?u=[the-urlencoded-link-to-my-page]
link. But I have two problems:
When attempting to share the content for the first time, the
Facebook sharer page only displays a preview box which only contains
the name of the site, and makes me use the Facebook's Object
Debugger to
fetch the meta tags. How can I automate this process?
And secondly, while the Object Debugger report says that it has
found the og:url, og:type, og:title, og:locale,
og:image:width, og:image:height, og:image and the
og:description raw tags on the page, but the image doesn't get
displayed in neither the preview box of the page nor on the shared
status. What I have missed? What's wrong?
To make things clear, sharing on google+ works perfectly (the image gets displayed, the title and the descriptions are in place.)
Thanks in advance :)
I have the following problem. I hope some one can help me :)
I have a client who has the following URL
http://www.clientwebsite.com/pageA.html
On the above page client has door images which he allows the visitor to select with a radio button. This page i.e. pageA.html does not have any open graph meta tags on it.
Once the visitor selects the door image on pageA.html he is taken to
http://www.clientwebsite.com/pageB.html
Now the client wants to use open graph meta tags on pageB.html which will pass the URL of pageA.html and the selected door image of the visitor from pageA.html to Facebook.
However this is not working as planned. I have tested this using the Facebook open graph debugger tool and below are my findings
When I pass the og:url meta tag with the URL of pageA.html, Facebook just picks random images from pageA.html and not the one I am passing in the og:image meta tag.
When I omit the og:url meta tag, Facebook picks up the image I am passing in the og:image meta tag but it does not know the URL which I need it to use.
Is there a solution to this?
UPDATE
Here is the URL in question
http://www.jvd.me.uk/share-test3.html
The above is pageB.html. The URL mentioned in the og:url meta tag is pageA.html
Anyone?
I am POSTing the values from pageA.html to pageB.html
Well, Facebook’s scraper doesn’t POST any data to your page B when it requests it, so this approach is of course bound to fail.
It is not possible to have different content based on the user’s choice under the same URL (because when the scraper visits the URL, there is no user to make that choice), so you will need to set up different URLs for your different images. (Using a GET parameter to determine what image to embed would be enough, since different GET parameters make different URLs.)
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
Is anyone experiencing what I'm experiencing when you go to http://aentan.com/design/more-natural-design-comps/ and click on the Facebook Like button. When I click on it, it changes to "1 person" and then the comment field appears but after half a second it goes back to the original like button like it did not register my click.
I'm using the social plugin on my WordPress single.php template and all the Like buttons on other pages work.
If I remove the open graph meta tags the Like button works.
<meta property="og:title" content="<?php single_post_title(); ?>">
<meta property="og:type" content="article">
What's wrong?
That's because you can either fill the required Open Graph tags or not using them at all (which is not recommended):
If you use Open Graph tags, the following six are required:
og:title - The title of the entity.
og:type - The type of entity. You must select a type from the list of Open Graph types.
og:image - The URL to an image that represents the entity. Images must be at least 50 pixels by 50 pixels. Square images work best, but you are allowed to use images up to three times as wide as they are tall.
og:url - The canonical, permanent URL of the page representing the entity. When you use Open Graph tags, the Like button posts a link to the og:url instead of the URL in the Like button code.
og:site_name - A human-readable name for your site, e.g., "IMDb".
fb:admins or fb:app_id - A comma-separated list of either the Facebook IDs of page administrators or a Facebook Platform application ID. At a minimum, include only your own Facebook ID.
It happen to me also. Check out this really useful facebook tool. It helped to solve my problem.