• Registered: 2014-07-07
  • Posts: 7

Topic: How do you add an FB Like Button? NOT the available 'Share' button.

Hello all, I need help ASAP.
I want to add an FB Like button to my Gallery's.
The option to add the 'Share' button is in Juicebox Pro, but no option to add just the 'Like' button is.
I've tried various methods by getting code and placing it in the index.html, but I am no pro at code and was not sure where to place the different lines of code generated by FB.
Can you please help me with this ASAP???
Will you please be very clear where to place the code as well as what code to use.
Thank you!

  • Registered: 2014-04-19
  • Posts: 48

Re: How do you add an FB Like Button? NOT the available 'Share' button.

Please, could you give the URL of your gallery, or if it isn't published, give its code + the code given by FB for the "like" button and so, I suppose that I will be able to give you a code which combines well both.

  • Registered: 2014-07-07
  • Posts: 7

Re: How do you add an FB Like Button? NOT the available 'Share' button.

laurentsch wrote:

Please, could you give the URL of your gallery, or if it isn't published, give its code + the code given by FB for the "like" button and so, I suppose that I will be able to give you a code which combines well both.

Thank you very much for responding!

Perhaps you could highlight where you put the FB code inside my index.html code, so that I can be clear on where to insert it on my other Gallery's.
FYI I am working in Dreamweaver, but I'm NO Pro and not very familiar with code at all, I just figure it out as I go!

Thanks, Michael


The FB code is 2 part.

FB say's that Part 1 is supposed to be placed after the opening body tag

PART 1
<div id="fb-root"></div>
<script>(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#xfbml=1&version=v2.0";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>


FB say's that Part 2 should be placed wherever you want it to appear on your page.
Although I believe this part is different with Juicebox

PART 2
<div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>

Here is the code for my index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Asher Edelman Cover Story</title>
    <meta charset="utf-8" />
    <meta name="viewport" id="jb-viewport" content="minimal-ui" />
    <meta name="description" content="" />

    <!-- START OPEN GRAPH TAGS-->
    <meta property="og:title" content="Asher Edelman Cover Story" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="" />
    <meta property="og:image" content="" />
    <meta property="og:description" content="" />
    <!-- END OPEN GRAPH TAGS-->

    <style type="text/css">
    body {
        margin: 0px;
    }
    </style>
</head>
<body>
    <!--START JUICEBOX EMBED-->
    <script src="jbcore/juicebox.js"></script>
    <script>
    new juicebox({
        containerId: 'juicebox-container',
        galleryWidth: '100%',
        galleryHeight: '100%',
        backgroundColor: 'rgba(255,255,255,1)'
    });
    </script>
    <div id="juicebox-container">
            <!-- Image gallery content for non-javascript devices -->
            <noscript>
                <h1>Asher Edelman Cover Story</h1>
                <p></p>
                <p><img src="images/52d3f9f0cdc87.jpg" title="" alt="" /><br> </p>
                <p><img src="images/IMG_3619.jpg" title="" alt="" /><br> </p>
                <p><img src="images/IMG_3564.jpg" title="" alt="" /><br> </p>
                <p><img src="images/IMG_3642.jpg" title="" alt="" /><br> </p>
                <p><img src="images/Asher_1.jpg" title="" alt="" /><br> </p>
                <p><img src="images/Asher_2.jpg" title="" alt="" /><br> </p>
                <p><img src="images/Asher_3.jpg" title="" alt="" /><br> </p>
            </noscript>
        </div>

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

Re: How do you add an FB Like Button? NOT the available 'Share' button.

If you want to include a Facebook Like Button on your page, then, ordinarily, you would need to either make room for the button on your page (alongside the gallery) or overlay the container which contains the button on top of the gallery using CSS.
Details of the code to include on your web page can be obtained from this Facebook page.

For example, if you selected the HTML 5 implementation and wanted the Like Button to overlap the top-left corner of your gallery, then your web page's code would look something like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta name="viewport" id="jb-viewport" content="minimal-ui" />
    <meta name="description" content="" />
    <style type="text/css">
    body {
        margin: 0px;
    }
    #overlay {
        position: absolute;
        top: 10px;
        left: 10px;
        z-index: 9999;
    }
    </style>
</head>
<body>

    <div id="fb-root"></div>
    <script>(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_GB/sdk.js#xfbml=1&version=v2.0";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>

    <script src="jbcore/juicebox.js"></script>
    <script>
    new juicebox({
        containerId: 'juicebox-container',
        galleryWidth: '100%',
        galleryHeight: '100%',
        backgroundColor: '#222222',
        galleryTitlePosition: 'NONE'
    });
    </script>
    <div id="juicebox-container"></div>

    <div id="overlay">
        <div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div>
    </div>

</body>
</html>

Perhaps an easier method would be to select the IFRAME implementation of the Like Button and paste the entire iframe code into the Gallery Title text field in JuiceboxBuilder-Pro (in the 'Customize -> Lite' section). If trying this, I would also recommend setting galleryTitlePosition="TOP" (in the 'Customize -> General' section) so that the Like button is always visible in your gallery.

Please note that the Like Button will not be displayed until you upload your gallery to your web server.

I hope this helps.

  • Registered: 2014-07-07
  • Posts: 7

Re: How do you add an FB Like Button? NOT the available 'Share' button.

Steven wrote:

If you want to include a Facebook Like Button on your page, then, ordinarily, you would need to either make room for the button on your page (alongside the gallery) or overlay the container which contains the button on top of the gallery using CSS.
Details of the code to include on your web page can be obtained from this Facebook page.

For example, if you selected the HTML 5 implementation and wanted the Like Button to overlap the top-left corner of your gallery, then your web page's code would look something like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta name="viewport" id="jb-viewport" content="minimal-ui" />
    <meta name="description" content="" />
    <style type="text/css">
    body {
        margin: 0px;
    }
    #overlay {
        position: absolute;
        top: 10px;
        left: 10px;
        z-index: 9999;
    }
    </style>
</head>
<body>

    <div id="fb-root"></div>
    <script>(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_GB/sdk.js#xfbml=1&version=v2.0";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>

    <script src="jbcore/juicebox.js"></script>
    <script>
    new juicebox({
        containerId: 'juicebox-container',
        galleryWidth: '100%',
        galleryHeight: '100%',
        backgroundColor: '#222222',
        galleryTitlePosition: 'NONE'
    });
    </script>
    <div id="juicebox-container"></div>

    <div id="overlay">
        <div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div>
    </div>

</body>
</html>

Perhaps an easier method would be to select the IFRAME implementation of the Like Button and paste the entire iframe code into the Gallery Title text field in JuiceboxBuilder-Pro (in the 'Customize -> Lite' section). If trying this, I would also recommend setting galleryTitlePosition="TOP" (in the 'Customize -> General' section) so that the Like button is always visible in your gallery.

Please note that the Like Button will not be displayed until you upload your gallery to your web server.

I hope this helps.

Thank you!
I figured it out and also fixed the z index from 9999 to 999.
1. But is there a way to overlay it at the bottom of the gallery, or will the placement always be absolute because it's an overlay?
2. Can I change the color or transparency of the Like button?

Thanks again! Michael

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

Re: How do you add an FB Like Button? NOT the available 'Share' button.

1. But is there a way to overlay it at the bottom of the gallery, or will the placement always be absolute because it's an overlay?

If your gallery fills the web page (like in the sample code I posted), you can just change top: 10px; to bottom: 10px;. The position does not have to be absolute (although the container must have a CSS position for the z-index to work).
If you embed your gallery in a web page alongside other content (and your gallery does not fill the web page), then wrap your gallery's container div and your Facebook div in a parent container div (with the same dimensions as your gallery's container) and assign position: relative; to the parent container div and position: absolute; bottom: 10px; to the Facebook div.

2. Can I change the color or transparency of the Like button?

Facebook allow you to change the 'colorscheme' by setting the HTML 5 attribute 'data-colorscheme' to either 'light' or dark'.
Please see this web page for further details.
For example:

<div class="fb-like" data-colorscheme="dark" data-href="https://developers.facebook.com/docs/plugins/" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div>

However, actually changing the color of the Like Button is not allowed under Facebook's brand guidelines, as noted on this web page.

Don't
Modify Facebook brand assets in any way, such as by changing the design or color

  • Registered: 2014-07-07
  • Posts: 7

Re: How do you add an FB Like Button? NOT the available 'Share' button.

Thanks a lot Steven! I have one more question...
I'm using the Juicebox Gallery, not embedding, as I like my Gallery's as clean as possible.
So, if I set the Position of the gallery to 'relative', will it still be in the center of the browser on any size computer?
Thanks again, Michael

8 Reply by pcfverbeek (edited by pcfverbeek 2014-07-08 16:17:46)

  • Registered: 2014-07-08
  • Posts: 3

Re: How do you add an FB Like Button? NOT the available 'Share' button.

Testing things out with a tool called inspect element is really usefull. You can acces it in most browsers with right click on any element. You will see your code popping up. You can dynamically change css and html and even jquery in there.
However it will not save any changes you make to that code. Even page refresh clears it back to what is recieved from the server. It will easily let u add classes or adjust css for quick reference.

Testing out things that way makes it really easy to understand what's actually happening and therefore will speed up your development process. Hope that helps you!

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

Re: How do you add an FB Like Button? NOT the available 'Share' button.

So, if I set the Position of the gallery to 'relative', will it still be in the center of the browser on any size computer?

Yes, but if your gallery is a 100% x 100% gallery which fills the web page, there is no need to set the position of the parent container div to relative. If the Facebook div (the div with the position of absolute) has no parent container with a position of relative, the containing block will be the 'html' tag which is essentially the entire web page - exactly the same area as the gallery itself).
For more information on CSS Positioning, please see this web page.

10 Reply by hoerner63 (edited by hoerner63 2014-07-09 17:32:42)

  • Registered: 2014-07-07
  • Posts: 7

Re: How do you add an FB Like Button? NOT the available 'Share' button.

Thanks again, Steven. I worked with this yesterday and was able to figure it out. Thank you very much for your help!
I do have what is probably an easy question for you pertaining to my menu page that precedes my Juicebox Gallerys, if that's okay...
My menu page is comprised of 3 tables of different heights and cells, but the same width.
1. A short one on top to hold my logo.
2. The main one to hold all my thumbnails which link to the Gallery's.
3. A very short one on the bottom for © info and name.
In the Juicebox Gallery, the main Image gets smaller and larger depending on how large or small you make the browser window.
What command code makes this possible?
Can you link 3 diff tables to fill the screen and have this action happen also?

Thanks again for all of your help, I really appreciate it. Cheers

PS When exporting a photo from Lightroom you have the option of limiting the KB's of the photos, however I have not seen this when exporting a Gallery.
Is there a way to limit KB's for photos when exporting a Gallery besides adjusting the JPG Quality?

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

Re: How do you add an FB Like Button? NOT the available 'Share' button.

My menu page is comprised of 3 tables of different heights and cells, but the same width.

It sounds like your web page would benefit from using the template used for the View Resizable Gallery with Top Menu Example in the Embedding Multiple Galleries support section.
The example uses a header and a footer (both of fixed height) and a Juicebox gallery takes up the remainder of the web page, no matter what the size of the user's browser window is.
You could use this template for your main web page and just swap the header and footer content and then replace the sample gallery with your own thumbnail content. (You can view the source of the web page in a browser and copy/modify it to suit your own needs.)

In the Juicebox Gallery, the main Image gets smaller and larger depending on how large or small you make the browser window.
What command code makes this possible?

If you need to know how to resize a div respecting its aspect ratio when a browser window is resized, then try a web search with terms such as "resize div respect aspect ratio" and check out the StackOverflow links that appear at the top of the results.

Is there a way to limit KB's for photos when exporting a Gallery besides adjusting the JPG Quality?

When creating a Juicebox gallery with the Lightroom plugin, you can set the Resolution and quality for the resulting images in the 'Web -> Output Settings' control panel. It is not possible to set a target filesize but with a little trial and error, you should be able to find suitable settings.

  • Registered: 2014-07-07
  • Posts: 7

Re: How do you add an FB Like Button? NOT the available 'Share' button.

When creating a Juicebox gallery with the Lightroom plugin, you can set the Resolution and quality for the resulting images in the 'Web -> Output Settings' control panel. It is not possible to set a target filesize but with a little trial and error, you should be able to find suitable settings.

Thanks Steven.
When opening a gallery that has already been created and exported from Lightroom, and thus already has the image sizes assigned, if you change the image quality in the Juicebox application, while it changes the index.html, and the config.xml, it doesn't actually change the file size of the images, even if you save it to a new folder.
Does this somehow translate in a browser making it load faster, or is this a pointless thing to do unless assigning the 'Quality' while actually exporting the images from Lightroom?
Thanks

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

Re: How do you add an FB Like Button? NOT the available 'Share' button.

When creating or editing a gallery in JuiceboxBuilder-Pro, the 'Quality' setting is used only if the images are resized.
The images are resized only if the source images are larger than the maximum bounds set in the 'Resize Images' section.

Therefore, if the source images are already within the maximum bounds and do not need to be resized, they will be copied across to the output 'images' folder without any processing and the 'Quality' setting will not have been used.

I hope this helps clarify things.