Facebook share specific image on page / modifying og:image value

[exhtml]

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 ;-)

1) 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).

2) 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)

3) 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!

[spiritofjin]

I would love to know the answer to this too...

[dimsemenov]

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 #1 will work. Facebook does not execute JavaScript on the page, page that is shared should be gettable via HTTP, so changing meta tags dynamically won't work.

PhotoSwipe default UI has option getPageURLToShare http://photoswipe.com/documentation/options.html :

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.

[jamminjames]

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.

[dimsemenov]

@forchun,

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 og:image, but you'll need to register your app. Use such URL for Facebook shareButtons option:

https://www.facebook.com/dialog/share?app_id=YOUR_APP_ID_HERE&href={{url}}&picture={{raw_image_url}}

Just replace YOUR_APP_ID_HERE with the real app id, you can register your website at http://developers.facebook.com.

The picture attribute is not documented very well by Facebook, they state it applies only to "Feed Dialog" and not for "Share Dialog", but for some reason it works for both, and I don't really understand the difference between those.

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...

[forchun]

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.

[hardsubs]

Worked for me without an app: correct image and link are shown, also og tags from page are displayed while sharing

{id:'facebook', label:'Share on Facebook', url:'https://www.facebook.com/sharer/sharer.php?u={{url}}&picture={{image_url}}'},

[Jon007]

also add the caption for the image being shared: {id:'facebook', label:'Share on Facebook', url:'https://www.facebook.com/sharer/sharer.php?u={{url}}&picture={{raw_image_url}}&description={{text}}'} [these parameters may not be fully supported in the FB documentation but they work at time of writing..]

[damian-gora]

Parameters picture, name, caption and description are deprecated and no longer supported. It seems that we need to find a new way to support facebook share for Photoswipe.

From Facebook docs:

As of April 18, 2017, the following parameters are no longer supported by Graph API versions 2.9 and higher. For versions 2.8 and lower, the parameters will continue working until July 17, 2017.

Read more at https://developers.facebook.com/docs/sharing/reference/feed-dialog#deprecated-params

Any ideas?

[acwolff]

Yes, replace [{id:"facebook",label:"Share on Facebook",url:"https://www.facebook.com/sharer/sharer.php?u={{url}}"},

by

[{id:"facebook",label:"Share on Facebook",url:"https://www.facebook.com/sharer/sharer.php?u={{image_url}}"},

[atwellpub]

Will that add the image URL as the status instead of the parent page rendering the image?

[acwolff]

I am not sure what you mean, but I think the answer is Yes.

[schroef]

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 ' Does anyone know a tip or trick here?

[atwellpub]

^^ 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: gallery.com?ogimage=token turn into galler.com/ogimage/token

using htaccess to help handle the URL params interpretation/redirect then it should be accomplishable.

[schroef]

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?

[NitinPrakash]

After hours of head banging, its a Facebook API Shame. Lol, what type of developers work at facebook, turning feature into crap