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.
Related
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.
im using Zend Framework v1, I have implemented the facebook share button on my site. If I click the share button for the first time, the data is fetched (title, description and URL) but not thumbnail. However if I refresh the page, come back and press again the button, the thumbnail is being displayed.
Same thing is when i post a link via fb website - at first time there is no thumbnail but after refreshing fb site and posting link again it is being displayed.
Does anyone know how to make it working?
The meta tags seems to be ok, the fb developer tool shows no errors.
Code in the ZF Controller
$this->view->doctype('XHTML1_RDFA');
$this->view->headMeta()->appendProperty('og:title', 'some value');
$this->view->headMeta()->appendProperty('og:type', 'website');
$this->view->headMeta()->appendProperty('og:url', 'http://mydomain/file?name='.$_GET["name"]);
$this->view->headMeta()->appendProperty('og:description', 'some value');
$this->view->headMeta()->appendProperty('og:image', 'http://mydomain/up/'.$_GET["name"]);
You can either trigger a first scrape via API when you publish a new piece of content, or specify the image dimensions via OG meta tags as well.
https://developers.facebook.com/docs/sharing/best-practices#precaching:
There are two ways to avoid this and have images render on the first Like or Share action:
Pre-cache the image with the URL Debugger
Use og:image:width and og:image:height Open Graph tags
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
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 have a photo website which gathers images from a folder with PHP, displays their thumbnails on a page and, when clicked, opens a fancybox (fancybox.net) to display the full image. I am pretty satisfied with the result but as users start posting, they start asking for new features, and problems come out since I'm not a programmer. What I would like to do is a photo commenting/rating system (like the one on facebook to get the idea, but obviously not as complex): I've been trying to add a Disqus code to each picture, but it won't get displayed in my fancyboxes...So the question is, can you give me any (easy-to-implement) ideas on how to achieve this? I don't mind using already existing softwares like disqus for comments and polldaddy for ratings, since I guess it would require me to setup a mysql database to do it on my own...
To brief it again:
I have a "thumbs" folder which are gathered on a page.
I have an "originals" folder with the full size images that are called back by the fancybox.
I would like to have comments+rating in the fancybox.
Thanks in advance for any advice you can give me.
For your fancybox implementation I'm assuming that it's just pulling the image into the lightbox, not other content (i.e. a html page). What you'd need to do is set up a page which would grab an image, and output it along with your comments + rating code, then set up your script to use that page as the fancybox URL instead of a direct link to the image.
Without more information to go on I can't really help more than that.
ps for comments the Facebook Comments plugin might be easier for a non programmer to implement than Disqus.