1 Topic by mikeh (edited by mikeh 2012-07-04 09:57:09)

  • Registered: 2012-06-29
  • Posts: 3

Topic: Facebook like?

Hello everyone!

Sorry if this issue might not be directly related with the Juicebox but who knows.....
So the problem is quite simple, regardless the option I choose (HTML5, XFBML or IFRAME) facebook "like" button will not appear. This "like button" is just a simple "like" for entire page/domain (as per script -https://developers.facebook.com/docs/reference/plugins/like/) - not each/single picture.

So the question is ... is there any "loading issues" between java from JuiceBox and SDK java from facebook, or simply I'm doing something wrong?

My steps:
1. fill the form on https://developers.facebook.com/docs/re … gins/like/
2. click go
3. copy the code as provided

and voilà it doesn't appear ;)

btw Im not a tech guy, so java script is like a magic for me  ;)

Thanks

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

Re: Facebook like?

Juicebox works fine alongside a Facebook Like button.
There are a couple of things to bear in mind, though.

(1) If you are trying to insert a Facebook Like button into the 'index.html' page of a 100% x 100% gallery, the gallery will take up the entire browser window so if you place the button after the embedding code, it will be pushed off the bottom of the browser window and will not be displayed. You would need to either reduce the size of your gallery to accommodate the button or position the button on the page via CSS and give it a high 'z-index' value (so that it is stacked above the gallery layer) in order for the button to be active.
For example, if using the HTML5 implementation of the button, you would change the line:

<div class="fb-like" data-href="http://www.example.com" data-send="false" data-width="450" data-show-faces="true"></div>

... to:

<div class="fb-like" style="position: absolute; top: 50px; left: 10px; z-index: 999;" data-href="http://www.example.com" data-send="false" data-width="450" data-show-faces="true"></div>

(2) The button will be displayed only when your web page has been uploaded to a web server. It will not be displayed when you preview your web page locally in a browser on your computer.

  • Registered: 2012-06-29
  • Posts: 3

Re: Facebook like?

Thank you very much Steven!

Yeap that piece of code did the trick z-index: 999!

Problem fixed!

  • Registered: 2012-04-30
  • Posts: 24

Re: Facebook like?

Is there any way to implement the 'like' button into the caption area?  Is this something that JB is (hopefully) planning to implement?  Would be great for this, or Tweet, or Pin, etc.

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

Re: Facebook like?

I have not yet been able to implement the Facebook Like button into the caption area but I have been able to display a like button for individual images (whose URL changes each time a new image is selected within the gallery) rather than just for the entire gallery. Please see this post for details.

  • Registered: 2012-04-30
  • Posts: 24

Re: Facebook like?

That's great - thanks Steven.  I want to try to look into using the HTML5 version of the link so that you can pass the image URL along with it as well so a user can post the image associated with that link, not just the URL with the anchor tag.

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

Re: Facebook like?

If you wish to use the URL of the actual image itself rather than the URL of the gallery displaying the image, then you can get it using the getImageInfo() method of the Juicebox-Pro API and pass that along to the Facebook Like button instead.

  • Registered: 2012-04-30
  • Posts: 24

Re: Facebook like?

Any way to get items on screen to show at the same time that the image overlay shows (ie the caption, nav buttons, gallery title)?

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

Re: Facebook like?

It is not possible to add non-gallery elements of your web page to the gallery's overlay.