• Registered: 2014-10-18
  • Posts: 3

Topic: Sharing image on facebook [SOLVED]

Hi, how can I make so that when sharing on facebook the gallery it shows the first image of the gallery and not another image on the page.

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Sharing image on facebook [SOLVED]

Facebook uses the data from Open Graph meta tags to populate the sharing window.

The thumbnail image displayed in the Facebook sharing window is determined by the og:image tag.

When you create a Juicebox-Pro gallery with JuiceboxBuilder-Pro, Open Graph tags are included in the gallery's 'index.html' file (and the first image in the gallery is used as the Facebook thumbnail).
The tags will looks something like this.

<!-- START OPEN GRAPH TAGS-->
<meta property="og:title" content="Gallery Title" />
<meta property="og:type" content="website" />
<meta property="og:url" content="Share Url" />
<meta property="og:image" content="Share Url/images/IMG_1116.jpg" />
<meta property="og:description" content="Gallery Description" />
<!-- END OPEN GRAPH TAGS-->

og:title uses the Gallery Title ('Customize -> Lite').
og:url uses the Share Url ('Customize -> Sharing').
og:image uses the Share Url and appends the relative path to the first image in the gallery.
og:description uses the Gallery Description ('Customize -> General').

If you manually add an og:image tag to your web page, then please make sure that the content is in the form of an absolute URL (such as http://www/example.com/images/image.jpg) and not a relative URL.

After adding an og:image tag to your web page, you may need to clear Facebook's own cache of your web page (so that the new image is used) by entering your web page's URL into Facebook's Open Graph Debugger.

3 Reply by s.trafalgar (edited by s.trafalgar 2014-10-20 15:10:50)

  • Registered: 2014-10-18
  • Posts: 3

Re: Sharing image on facebook [SOLVED]

Thank you but it seams not to be working. We have the full version. http://www.arbitration-icca.org/AV_Libr … i2014.html


Thank you.

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Sharing image on facebook [SOLVED]

Your gallery is embedded into your photogallery_Miami2014.html web page but there is no og:image meta tag in that web page.
Add an og:image meta tag (such as the one in my post above) to the <head> section of your photogallery_Miami2014.html web page pointing towards an image you would like to use for the sharing window (using an absolute URL) and the image should be used by Facebook.

  • Registered: 2014-10-18
  • Posts: 3

Re: Sharing image on facebook [SOLVED]

ok. thank you. I will try that then.

  • Registered: 2015-05-26
  • Posts: 2

Re: Sharing image on facebook [SOLVED]

I'm having the same problem.  The index.html in my gallery has this:

<meta property="og:image" content="http://photo.ntay.com/pandora2/images/P5150101-Edit.jpg" />
<meta property="og:title" content="Pandora" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://photo.ntay.com/pandora2/" />

but the Facebook popup consistently tries to use another image (P5150188-edit.jpg), which is particularly troublesome because the image is not Facebook safe.

Moreover, the Facebook post generated does not actually show the image, just a blank frame.  Looking at the properties of the image in the post on Facebook, this seems to be because it is not trying to show http://photo.ntay.com/pandora2/images/P … -Edit.jpg, but http://photo.ntay.com/images/P5150013-Edit.jpg
This is not only another completely different image (not the one that appears in the sharing popup), but it has missed the gallery name from the URL.

My config.xml has

shareURL="http://photo.ntay.com/pandora2/"

(I put that line in manually because Juicebox didn't seem to do it, but the behaviour is the same/without it.)

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Sharing image on facebook [SOLVED]

@NeillTaylor

When I click the Facebook share icon in your gallery, the correct image (the og:image) is being used in the pop-up window.
It sounds like Facebook (or your browser) may have been using an older, cached version of your web page.

Just for good measure, try clearing Facebook's own cache of your web page (so that the new image is used) by entering your web page's URL into Facebook's Open Graph Debugger.
Also, clear your browser's cache before reloading your web page.

Hopefully this will help.

Incidentally, the shareURL is used only by JuiceboxBuilder-Pro (and not by Juicebox-Pro itself when the gallery is displayed) to know what URL to use when populating the Open Graph tags in the index page when the gallery is created.

  • Registered: 2015-05-26
  • Posts: 2

Re: Sharing image on facebook [SOLVED]

Thank you for your very useful advice.  It turns out Facebook had cached a copy from about a week ago, when I was still using Juicebox-light before I upgraded to Juicebox-pro.  Forcing Facebook to re-scrape the page has cleared the problem.

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Sharing image on facebook [SOLVED]

You're welcome!
I'm glad it's working as expected now. Thanks for letting me know.