When clicked on the fb like button on i.e. http://www.joanieart.com/collection.php?ix=15 I want to control the image posted to FB.
Im having a hard time getting this to work. Read tons of postings but no succes.
I tried meta property="og:image" and meta rel="image_src" but still it picks the wrong image.
Thanks for helping.
I am not sure, but I think the metadata
<meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>
is the right solution. If you have already tried this, try to force to refresh metadatas inserting page link here https://developers.facebook.com/tools/debug
It's the officially documentation
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. You can programmatically force your page to be scraped by cURL'ing the linter.
Related
I have a project, coded on codeigniter, which is basically a collection of posts by different users. While adding the fb share button and clicking on it, The image, title and description content is taken from the header of the home page and not of the page(view) where the share button is placed?
As mentioned here, The issue was that only those users could view the page who are signed in, and therefore even fb wasn't able to scrape the info from there.
EDIT: Whats important here is how FB scrapes the info. Apparantly the link you provide inside data-href if parsed by FB and they capture the og meta tags from the header on that page. However if you restrict those pages to logged in users, FB is also unable to parse the page and thus it reverts to the base URL's meta tags.
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 a Facebook Like/Share button on a webpage. When you click the Share button, a window pops up allowing you to share a message about the site. There's a photo in the popup as well, which is derived from the webpage the button is on.
The problem is, that webpage shows a composite photo, an image on top of another image, and instead of showing the whole composite, the popup shows one piece of it.
Is there a way to use a different image entirely on the Facebook popup window, some specific image that's not present on the webpage? I had thought the og:image meta tag would do the trick, but it doesn't seem to work.
Thanks.
Mark
Got it. My problem is that the info I need from the Facebook Developer pages is either incomplete or not presented in a way I can understand. So for the benefit of others in my boat:
It's not enough to add the Like/Share button javascript code and div tag (where you want the button to appear). You also need to add a group of meta tags in the <head> section of your html page. (Note that in the Facebook Developers "Like Tag" page, the phrase "meta tag" does not appear.) The meta tag format is this: <meta property="og:type" content="website">
There is apparently a lag between your adding these meta tags and Facebook finding them. Some have said this is because of the way Facebook caches its content. In any case, you can bypass this lag by using the Facebook Debugger https://developers.facebook.com/tools/debug/ You enter the URL of the page with the buttons, and it tells you what's missing from your code--and at the same time it now recognizes any new additions, like new meta tags.
It turned out I needed meta tags for og:url, og:title, og:image, og:site_name, og:type, and og:description. I also discovered that the og:image tag needs an absolute url.
I found out about a lot of this not from Facebook but from here: http://davidwalsh.name/facebook-meta-tags
The Debugger is now telling me I still need fb:admins and fb:app_id tags. To get those I apparently have to create a Facebook App, which I'd rather not do. I hope it's not necessary.
Now that I've added these meta tags and run my page through the Debugger, I'm now getting the image I want showing in the Share window.
My team recently launched a Web app that makes heavy use of Facebook's Like Button. Most of them work fine, but several of the Like URLs aren't recognized correctly by Facebook or its URL Linter. These URLs are for a page on our app that redirects to a corresponding page in a Facebook app...
Example URL:
http://www.3mframeworks.com/pages/redirect?url=http%3A%2F%2Fapps.facebook.com%2Fcouplespeak%3Fv%3Dvideos%26id%3D17
Facebook's URL Linter returns data as if the "id" parameter isn't there:
https://developers.facebook.com/tools/lint?url=http%3A%2F%2Fwww.3mframeworks.com%2Fpages%2Fredirect%3Furl%3Dhttp%253A%252F%252Fapps.facebook.com%252Fcouplespeak%253Fv%253Dvideos%2526id%253D17
Other Open Graph parsers return the correct data:
og:it: http://ogit.heroku.com/inspect?url=www.3mframeworks.com%2Fpages%2Fredirect%3Furl%3Dhttp%253A%252F%252Fapps.facebook.com%252Fcouplespeak%253Fv%253Dvideos%2526id%253D34
OpenGraph.In: http://www.opengraph.in/?url=www.3mframeworks.com%2Fpages%2Fredirect%3Furl%3Dhttp%253A%252F%252Fapps.facebook.com%252Fcouplespeak%253Fv%253Dvideos%2526id%253D34&format=html
I've spent hours searching for an explanation...
Facebook's documentation, under Editing Meta Tags, states:
"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." My Like counts are nowhere near these numbers.
"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. You can programmatically force your page to be scraped by cURL'ing the linter." I have tried all three of these methods without success.
Facebook Like button - fetches "wrong" image suggests that linting an URL doesn't reset the cache as Facebook claims.
Facebook Open Graph not clearing cache suggests this may be Facebook caching that will fix itself after an unknown period of time.
facebook like button liking wrong url suggests waiting 24-32 hours for Facebook's cache to be reset. It has been 64+ hours since my Open Graph tags were last set.
Why is Facebook returning the wrong page (affects Facebook Like and Share URL)? suggests that any URL provided to Facebook (e.g. via a Like Button) before being published should be changed. I tried changing the URL, renaming the id parameter, without success.
The most likely culprit seems to be Facebook caching, but it's already been suspiciously long and since this site is part of a currently live campaign that emphasizes Like activity, I'm hoping someone knows a trick to get this working ASAP. Thanks!
Some piece in Facebook's Graph API and URL Linter drops all but the first of multiple URL parameters.
Graph API
When the parameter string is "?v=videos&id=17", "id" is lost:
https://graph.facebook.com/http%3A%2F%2Fapps.facebook.com%2Fcouplespeak%3Fv%3Dvideos%26id%3D17
When the parameter string is "?id=17&v=videos", "v" is lost:
https://graph.facebook.com/http%3A%2F%2Fapps.facebook.com%2Fcouplespeak%3Fid%3D17%26v%3Dvideos
This doesn't happen if the Graph "id" parameter is declared explicitly: https://graph.facebook.com/?id=http%3A%2F%2Fapps.facebook.com%2Fcouplespeak%3Fv%3Dvideos%26id%3D17
Unfortunately that third point doesn't help my situation: I'm not accessing the Graph directly, so I can't just insert "?id=".
URL Linter
For my app, all parameters are needed to render the correct Open Graph meta tags, and the results support my discovery:
When the nested, encoded parameter string is "?v=videos&id=17", Open Graph tags are rendered for "3M Couple Speak Video Contest". This is the expected behavior when the "id" param is absent:
https://developers.facebook.com/tools/lint?url=http%3A%2F%2Fwww.3mframeworks.com%2Fpages%2Fredirect%3Furl%3Dhttp%253A%252F%252Fapps.facebook.com%252Fcouplespeak%253Fv%253Dvideos%2526id%253D17
When the nested, encoded parameter string is "?id=17&v=videos", Open Graph tags are rendered for "3M Couple Speak Translation Contest". This is the expected behavior when "v=videos" is absent:
https://developers.facebook.com/tools/lint?url=http%3A%2F%2Fwww.3mframeworks.com%2Fpages%2Fredirect%3Furl%3Dhttp%253A%252F%252Fapps.facebook.com%252Fcouplespeak%253Fid%253D17%2526v%253Dvideos
This doesn't happen with non-nested, non-encoded parameter strings:
https://developers.facebook.com/tools/lint?url=http%3A%2F%2Fapps.facebook.com%2Fcouplespeak%3Fv%3Dvideos%26id%3D17
For other Open Graph parsers, switching the order of nested, encoded parameters yields the same data, which is correct:
http://ogit.heroku.com/inspect?url=www.3mframeworks.com%2Fpages%2Fredirect%3Furl%3Dhttp%253A%252F%252Fapps.facebook.com%252Fcouplespeak%253Fv%253Dvideos%2526id%253D17
http://ogit.heroku.com/inspect?url=www.3mframeworks.com%2Fpages%2Fredirect%3Furl%3Dhttp%253A%252F%252Fapps.facebook.com%252Fcouplespeak%253Fid%253D17%2526v%253Dvideos
Unfortunately, again, that third point doesn't help my situation: we need to nest and encode the URL.
This explains the bad data I'm seeing, and why it only happens to the URLs with multiple parameters. I submitted a bug report to Facebook.
The iframe source on that Facebook page is at this url it seems:
couplespeak-3m-production.heroku.com/videos
and that page contains the tags that show up in the Facebook Linter.
<meta content='3M Couple Speak Video Contest' property='og:site_name' />
<meta content="3M Couple Speak Video Contest" property="og:title" />
<meta content="website" property="og:type" />
<meta content="http://apps.facebook.com/couplespeak?v=videos" property="og:url" />
<meta content="http://www.3mframeworks.com/images/video_background.jpg" property="og:image" />
<meta content="100001154487117" property="fb:admins" />
I'm implementing a facebook like button on a simple blog/news section I created in an MVC 3 web application.
I used the XFBML way to implement this.
It works, but not completely.
When clicking and checking it on facebook, it shows the title I specified.
Here is a piece of code.
The viewbag information comes from my view, this is in the layout/master page.
<meta property="og:title" content="#ViewBag.FGTitle" />
But since it's a news item, I also want the content of the article to be displayed.
It only shows, the title, the site name and that's it.
I checked the facebook developer page, but I cant find a meta property/Open graph type in which i can set this content.
any ideas?
see the facebook url linter it shows you exactly what facebook sees when greping the url. Also you should read up on the other meta tags