-
-
Notifications
You must be signed in to change notification settings - Fork 3.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Facebook share specific image on page / modifying og:image value #749
Comments
I would love to know the answer to this too... |
In contrast to Pinterest, Facebook isn't very good at sharing individual images, so if you want it to display image that is shared (not the gallery with link to it) - only method PhotoSwipe default UI has option getPageURLForShare: function( shareButtonData ) {
// `pswp` is the PhotoSwipe instance object,
// you should define it by yourself
return pswp.currItem.attachmentURL;
} assuming that slide objects look like this: {
src: 'path/to/img.jpg',
w: 100,
h: 200,
attachmentURL: 'http://example.com/?postid=123' // URL on your site that contains only one image
} subscribe here - http://dimsemenov.com/subscribe.html?i=pswp-wp if you want to get notified when official WP plugin will be released. |
What worked for me, in order to share the current slide image on FB, was using pswp.currItem.src instead of pswp.currItem.attachmentURL on the getPageURLForShare line -- that way, no need for the extra 'attachmentURL' line in the gallery items. |
It seems Facebook changed something not so far ago, or I missed this feature. You actually can pass image URL to share dialog without defining it in head of the page using
Just replace YOUR_APP_ID_HERE with the real app id, you can register your website at http://developers.facebook.com. The Read more at https://developers.facebook.com/docs/sharing/web Let me know if it works for you, or if you'll find out anything about the issue. It worked for me, not sure how reliable it is... |
That works great, the issue I am having now is that the first image in the gallery when a new image is added, gets redirected to the second image instead of the first image. I used the debugger tool to fetch new data but that hasn't helped. Facebook shows the correct URL, but for some reason it goes to the second image instead of the first even though the image on facebook and the url on facebook is correct. |
Worked for me without an app: correct image and link are shown, also og tags from page are displayed while sharing
|
also add the caption for the image being shared: |
Parameters From Facebook docs:
Read more at https://developers.facebook.com/docs/sharing/reference/feed-dialog#deprecated-params Any ideas? |
Yes, replace by [{id:"facebook",label:"Share on Facebook",url:"https://www.facebook.com/sharer/sharer.php?u={{image_url}}"}, |
Will that add the image URL as the status instead of the parent page rendering the image? |
I am not sure what you mean, but I think the answer is Yes. |
I used to be able to share images from a image gallery really simple using script which replaced the og:image. As of all these on going changes it doesnt take FB urls no more. Ive tested out these plain sharer script and adding a FB image url bu it wont take it. this is a example url; 'https://www.facebook.com/sharer/sharer.php?u=https://scontent.xx.fbcdn.net/v/t31.0-8/13735769_1138596126187164_3106035068213495774_o.jpg&oh=fd305eea3e1dd624ee05d72aef73158b&oe=5A21A57E |
^^ That's what I came to find too. FaceBook JS SDK used to support it but then in the latest JS SDK it doesn't anymore. The trick I've found, but haven't implemented yet, is to change the share URL to a URL that will dynamically generate the correct og:image meta property when loaded. GET params can't be used because the Open Graph URL scraper will cut them off (did manage to test this). So if you can find a way to make: using htaccess to help handle the URL params interpretation/redirect then it should be accomplishable. |
sorry im no HTML guru :) I actually bumped into this thread searching dynamically share function. It seems FB only takes the meta data which is in the header. Where before i could generate these tags easily in the body by script. Even using a test url with the new sharer.php doesnt show custom image, title or description. It only seems to look at the code which is in the header. I wonder if that can be dynamically changed after page load? |
After hours of head banging, its a Facebook API Shame. |
I've been implementing Photoswipe in a Wordpress Site and now I have this problem: I'm using Yoast SEO plugin and it assigns an og:image to the post that contains Photoswipe gallery (based in the posts' featured image). So when I share a photoswipe slide in Facebook, the link to the slide shares correctly but the image you're sharing is the image provided by Yoast for the post, not the image you're viewing in the slide you're sharing.
I'm thinking in several approaches and wanted to share them with you guys so we can discuss what would be the best (and maybe we can get some help from Dimitri's infinite knowledge ;-)
Modify the photoswipe sharing buttons to make them share the attachment_link (separate HTML page for image) of the attachment_page corresponding to the image you're viewing (and, make Yoast work with attachment pages assigning them as the og:image the attachment image url, what doesn't work out of the box as far as I've seen).
Pass the src of the image we are viewing in Photoswipe to the share link (https://www.facebook.com/sharer/sharer.php?... etc) that Photoswipe facebook share button use. But I think that Yoast value prevails over this, mmmm)
Modify dynamically via javascript the og:image meta content, each time we move to a photoswipe slide, so when we share, we overwrite Yoast value and (with luck) Facebook will share this og:image
Thank you in advance for your ideas, I'm a bit stuck with this. I really love Photoswipe and Dimitri, you're a star!
The text was updated successfully, but these errors were encountered: