I'm using facebook share functionality on my site via the following anchor-
<a href="//www.facebook.com/sharer/sharer.php?u='<URL W/ QUERY STRING>'" target="_blank">
The thumbnail image for the share is set via a value in the query string.
Trouble is, when I share via the above link, facebook pulls the wrong image for the share.
This is in spite of the following:
The correct image is present in the meta og:image tag of the header
The FB debugger pulls the correct image and returns no errors.
When the anchor tag is clicked a SECOND time, the correct image is pulled and is correct from then one for that url
The behaviour can be reproduced here
http://www.z100.com/pages/contest/quiz/match.php?match&key=Taylor+Swift&139f8787897
attempting to share 2x( thus witnessing how the 2nd time works)
and then navigating to a different query string
http://www.z100.com/pages/contest/quiz/match.php?match&key=Demi+Lovato&139f8787897
and witnessing the same issue
Any ideas on why this would be? Thanks
Related
We have a share button (our own button) for our clients. For a page such as:
https://www.wyomingforsale.net/idx/listing/WY-CCBOR/22-658/3-Pine-Cone-Ln-Moorcroft-WY-82721
We get to this page:
https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.wyomingforsale.net%2Fidx%2Flisting%2FWY-CCBOR%2F22-658%2F3-Pine-Cone-Ln-Moorcroft-WY-82721&
The problem is that the image is blank. There is a valid og:image tag on the page. I have used the sharing debugger with the same results - the preview shows an empty image. The canonical URL looks correct and identical to the fetched URL. Looking in the debugger at the value for og:image, that URL looks good, and if I plug that into my browser, the image shows up. What am I missing? This is a React-drawn page, if that makes any difference.
Here's the scenario, when you post a link to Facebook, the scraper makes an open graph story based on og tags. However, I woudl like to know if it's possible to change the image retrieved by the scraper with one loaded by the user.
Imagine it like this, I want to post a link but the referenced site has no image, I'd like to modify the story so that its image is one I upload manually. Is that possible?
I found the answer in the API as suggested by CBroe. To clarify, I'm posting to a page, not to a profile, so I used the parameter link to, obviously, specify the link I was sharing. I also used the parameter picture to replace the thumbnail the scraper fetches with one I wanted.
This picture is a url, not an uploaded file, if someone is wondering.
So, the final array that will be sent to Facebook's API looks like this:
$data = ['message' => 'your message', 'link' => 'your-link.com', 'picture' => 'url/to/image.jpg'];
As I said, this will post a link to a page and replace the thumbnail fetched from Facebook's scraper with the image specified in the picture parameter.
Hope this helps anyone else with the same question :)
If I correct understood your question.
FB takes image from OG tag, no other way, also you cannot change this tag dynamically. I faced a long time ago with problem, that scraper could not find image on dynamically generated page. The solution was - send to FB another permament link. For example - permament link on main page site.com/module, this page for sharing to FB site.com/module/?c=123123123 (generated page by user, $c - here uniq parameter which was responsible for image in OG tag)
So - anyway if want to share page with picture - it should be contained in OG tags.
I'm new to using the FB share buttons terminology so forgive me if I use the wrong syntax in describing this.
My site is setup to load pages based on the passed parameters in the URL (...?page=somepage&imageid=idnum).
So I have my index file which contains my head, as well as sidebar, etc. Then my main body is generated according to the passed parameter. Simple Enough.
On the homepage, the main body is a gallery of images. When they click on one of those images it takes them to a page that just displays that one image. The page is loaded with parameters of ?page=detail&image_id=1 /*or whatever the id of that image is */
So when they click on the share on FB button on those individual images page, I would like it to populate with the image that is displayed on that page. What I have done is included a php file in my head tag. The php script included gets the page info and passed parameters and then fills out the image url based on the imageid.
echo '<meta property="og:image" content="http://www.chiseledimages.com/clients/vote/'.$imgurl.'"/>';
This works in that when displaying the page source, the meta tag with og:image shows perfectly, also in that when I run it through the FB Object debugger, it gets the correct image and doesn't show me any errors. It even posts the correct image when the users shares on their wall. What is does not do, is show the correct image in the pop window after the uses presses the share button on my site. So even though the result is what I want, the problem with the user not seeing the correct image in the share pop-up, may lead them not to want to share on their wall.
Current location of site: http://www.chiseledimages.com/clients/vote/
Example of a specific pages: http://chiseledimages.com/clients/vote/?page=detail&angel_id=1
Screenshots of pop-up with wrong image, but final posted story having correct image.
How can I make the image in the pop-up match the image that is going to be shared. Thanks.
Edit: I forgot to mention and I'm sure it matters that I'm using Addthis to implement the FB share.
Check https://developers.facebook.com/docs/reference/dialogs/feed/ - look for the 'picture' parameter description
I suggest to you use this http://support.addthis.com/customer/portal/articles/1365475-attribute-based-configuration#.UwPQB6LW6So. just follow their example and you good to go.
I have tried almost everything to link picture to Facebook status that is created via Facebook Graph API from other web application.
I am sending POST request to https://graph.facebook.com/me/feed with these fields:
message = text that is correctly displayed
link = link to page that also works well
picture = link to picture that I want to display in status (not working)
type = picture
I have tried to use source field instead of picture field, tried to ommit type field, I have also tried to use picture directly as a link field.
I have also tried to use picture (or source) field to point on URL directly with picture data, or to page containing that image mentioned in og:image meta tag.
None of mentioned worked. I can only post a status with text and correct link, picture is never included. On the other hand, I have realized, that link to my picture is wrapped in some Facebook link (this is visible in element inspector in one of div elements of status on Facebook wall), but this link does not work – it shows gray gif picture large 1px by 1px. I have tried to remove all special characters from link, now it is in simple form eg. foo.bar/some/path/picture12.
Nothing worked
Make sure that you include the link to in the post:
link=http://url.to.your.canvas.app/another.link
The link provided as a landing page needs to be on the same domain as the one you have specified in the application settings on developers.facebook.com
Also instead of me you should use your Facebook ID ( as a good practice )`
i just want to copy and paste my website links on users facebook walls , when share from http://www.tvguide.dk/nyheder/2011-10-15/TV2_satser:_Nu_med_spritnye_v%C3%A6rter_!/ share buttons it works and picks a correct og:image thumbnail ,
however when i copy paste the link on the wall the facebook picks the logo image. insted of og:image value
can you guys help me please
You won't be able to change that, unless you always upload a picture when you post on someones wall! The og:image is only used for the open graph which is used from like and share buttons, comments etc, but not in facebook itself.
Read up on internationalization: http://developers.facebook.com/docs/internationalization/
Your website is in Danish but you have used set locale as en_US. Also the title, type and URL properties are not being interpreted correctly by Facebook. http://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fwww.tvguide.dk%2Fnyheder%2F2011-10-15%2FTV2_satser%3A_Nu_med_spritnye_v%25C3%25A6rter_%21%2F
Make changes and check the progress at URL Debugger(Linter) given above. If everything fails try including the FBJS SDK and use fb:share-button. I had a similar problem once with WordPress which got solved using the JS SDK