1 (edited by pascalriben 2019-06-20 05:54:16)

Topic: Facebook share problem

Hello,

Using the Juicebox Facebook button to share http://pascalriben.com/About%20Color/#1 I don't get an image as showed on the screenshot.

Thank you.

Best Regards,

Pascal RIBEN

Post's attachments

Capture d’écran 2019-06-20 à 14.41.52.png
Capture d’écran 2019-06-20 à 14.41.52.png 27.39 kb, file has never been downloaded. 

You don't have the permssions to download the attachments of this post.

Re: Facebook share problem

You og:image meta tag (in your gallery's 'index.html' file) is currently:

<meta property="og:image" content="/images/or_2011_05_0022.jpg" />

Facebook requires that the og:image path be an absolute path (rather than a relative path).

There are a couple of ways to fix this.

(1) Open your gallery in JuiceboxBuilder-Pro, go to the 'Customize -> Sharing' section, and enter the absolute path to the directory containing your 'images' folder in the 'Share Url' input box i.e.:

http://pascalriben.com/About Color/

Now re-save your gallery on the 'Publish' tab.
JuiceboxBuilder-Pro will use the 'Share Url' at the beginning of the og:image path and will append the path to the first image in the gallery after it.

... or:

(2) Open your gallery's 'index.html' file in a plain text editor and replace:

<meta property="og:image" content="/images/or_2011_05_0022.jpg" />

... with:

<meta property="og:image" content="http://pascalriben.com/About Color/images/or_2011_05_0022.jpg" />

(You can use the absolute path to whatever image you like.)

If, after making this change, you still do not see the image in the Facebook share window, then you might need to run your gallery's web page URL through Facebook's online debuggers to instruct Facebook to fetch new scrape information (including the og:image path) from your page.
(1) Facebook's Sharing Debugger: https://developers.facebook.com/tools/debug/sharing/
(2) Facebook's Batch Invalidator: https://developers.facebook.com/tools/d … ing/batch/
(3) Facebook's Open Graph Object Debugger: https://developers.facebook.com/tools/debug/og/object/
(Click the 'Fetch new scrape information' button.)

This should hopefully resolve your problem.

Re: Facebook share problem

Hello,

Many thanks for your quick answer but I don't understand:
- why Juicebox Lightroom plugin has created a relative path and not an absolute one?
- Facebook is going to display the same image for all the photos in the gallery, not the specific photo shared. Or am I wrong?

Best Regards,

Pascal RIBEN

Re: Facebook share problem

- why Juicebox Lightroom plugin has created a relative path and not an absolute one?

In order for both JuiceboxBuilder-Pro and the Juicebox Plugin for Lightroom to generate an absolute path for the og:image entry, it is necessary to complete the Share URLcorrectly (in both applications).
Both applications generate an absolute path by concatenating the Share URL and the path to the first image in the gallery.
The only difference between JuiceboxBuilder-Pro and the Juicebox Plugin for Lightroom in this respect is that, in JuiceboxBuilder-Pro, the og:image entry is left empty if the Share URL is empty whereas the Juicebox Plugin for Lightroom still outputs the path to the first image even if the Share URL is empty.
The end result is the same in both cases, though: the Share URL must be completed correctly (in both applications) for the Facebook share window to display the image.

- Facebook is going to display the same image for all the photos in the gallery, not the specific photo shared. Or am I wrong?

That is correct. This is just how Facebook works (by using the web page's Open Graph og:image entry for all shared links on the page).
It is not possible (at least not easily) to have the shared image's thumbnail displayed in the pop-up Facebook share window due to limitations imposed by Facebook on what data can be passed via their share URL. Only one thumbnail image can be used per web page. However, the shared link itself will still point towards the correct image within your gallery.

You can think of the og:image as being representative of the gallery as a whole so you could use an image which best represents your gallery.
The og:image does not need to be an image from the gallery itself. You can edit the gallery's 'index.html' in a plain text editor to change the og:image path. (Just make sure that the path you use is an absolute one.)

Just in case you are thinking of delving much deeper into this, the only user I know of who seems to have managed to overcome this restriction is sly from this thread.
His solution seems to be included within a rather complex custom JavaScript file (check out the 'jcaddon.js' file on his gallery pages) which overrides some of Juicebox-Pro's own sharing functionality and, therefore, is not officially supported.
(As such, I have not tested his solution myself and I cannot be sure that it will work across all platforms and in all browsers.)
However, I hope this points you in the right direction.

Re: Facebook share problem

Hello Steven,

Thanks again. Yes, I completely missed the Share Url field... Sorry.

Too bad for og:image displaying only one image but I've no skill on Javascript so I won't try sly's solution.

Many thanks for your help, great support as always.

Pascal RIBEN

Re: Facebook share problem

You're welcome!
It's a shame that there isn't a quick and easy solution to overcome the image share limitation but I hope that you've at least got things working within the design specifications.

Re: Facebook share problem

Really great information