• Registered: 2015-05-08
  • Posts: 8

Topic: Facebook Image Preview

Hello,

I've only just recently noticed this, but when clicking the 'Facebook' button to share images from the gallery to the social media site, it only comes up with the description of the gallery and no preview image.

When I looked on the demo version of Juicebox and the 'Facebook share' option it has a preview image.

Have I not added some info correctly when up loading?

I've attached a preview of what mine looks like below.

Any help on this would be great.

Post's attachments

Example Image - Juicebox.pdf 1.74 mb, 2 downloads since 2017-10-30 

You don't have the permssions to download the attachments of this post.
  • Registered: 2012-04-24
  • Posts: 5,924

Re: Facebook Image Preview

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.
This specified image is displayed when any image in your gallery is shared.
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.)

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 og:image Facebook thumbnail).
The tags will looks something like this.

<!-- START OPEN GRAPH TAGS-->
<meta property="og:title" content="This is the Gallery Title." />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://www.example.com" />
<meta property="og:image" content="http://www.example.com/images/IMG_0001.jpg" />
<meta property="og:description" content="This is the 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 embed your gallery into a custom web page (and do not use the 'index.html' file generated by JuiceboxBuilder-Pro), then you'll need to manually add an og:image meta tag to your web page. 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.

If, after adding an og:image meta tag to your web page, you do not see the specified image displayed in the Facebook share window, then you might need to use one or more of the following online tools that Facebook provides.

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

Running your web page's URL through these online tools should clear Facebook's cache of your web pages and fetch new scrape information from your gallery's web page.

Hopefully this will help.