@plato1123
Thank you for the link!
I do not know what suggestions the developers will implement in future versions (or how long it may take for suggestions to be implemented) so my notes below might help for anyone hoping to implement such functionality in the short-term.
The only user that I know of that has managed to overcome the restriction of one og:image per web page for Facebook sharing is sly in this forum thread. (He achieved this by overriding Juicebox's own Facebook sharing handler with what looks like quite a lot of complex custom JavaScript.)
Using the code from the link you quoted, the following might work, although please note that it is untested as I do not currently have a Facebook App ID. (Replace '123456789012345' in the following code with your own Facebook App ID.)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" id="jb-viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta property="og:description" content="" />
<meta property="og:image" content="" />
<meta property="og:title" content="" />
<meta property="og:type" content="website" />
<meta property="og:url" content="" />
<style type="text/css">
body {
margin: 0px;
}
</style>
<script type="text/javascript" src="jbcore/juicebox.js"></script>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '123456789012345',
autoLogAppEvents : true,
xfbml : true,
version : 'v2.10'
});
FB.AppEvents.logPageView();
};
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<script>
function shareOverrideOGMeta(overrideLink, overrideTitle, overrideDescription, overrideImage)
{
FB.ui({
method: 'share_open_graph',
action_type: 'og.likes',
action_properties: JSON.stringify({
object: {
'og:url': overrideLink,
'og:title': overrideTitle,
'og:description': overrideDescription,
'og:image': overrideImage
}
})
},
function (response) {
// Action after response
});
}
</script>
<script type="text/javascript">
var jb = new juicebox({
containerId: "juicebox-container",
shareFacebook: "TRUE"
});
jb.onImageChange = function(e) {
var index = e.id;
var info = jb.getImageInfo(index);
var url = info.imageURL;
var link = 'http://www.example.com/';
var title = info.title;
var description = info.caption;
var image = link + url;
shareOverrideOGMeta(link, title, description, image);
};
</script>
<title>Test</title>
</head>
<body>
<div id="juicebox-container"></div>
</body>
</html>