Topic: Adding Facebook like button in new version

i already created a new gallery, but how do I enter like  and share button in each photo?

i used version Pro 2.3.1

tks

Re: Adding Facebook like button in new version

SimpleViewer-Pro does not have built-in social sharing functionality.
You would need to implement this manually and knowledge of HTML and JavaScript would be required.
You can interact with the gallery (for example to determine the index number or URL of the image currently being displayed) by using the SimpleViewer-Pro API.
Take a look at these forum threads which might point you in the right direction:
http://www.simpleviewer.net/forum/viewt … p?id=15213
http://www.simpleviewer.net/forum/viewt … p?id=13243

If you would like an automated solution without the need for any coding, you might like to take a look at another one of our products, Juicebox-Pro.
Juicebox-Pro is an HTML 5 image viewer which has built-in support for social sharing (Facebook, Twitter, Google+, Pinterest and Tumblr). Please see here for more information.

For more details on the differences between SimpleViewer and Juicebox, please see this SimpleViewer news article.

Steven Speirs
SimpleViewer Support Team.

Re: Adding Facebook like button in new version

in index.html i read this code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>camisetas</title>
</head>

<body>

    <!--START SIMPLEVIEWER EMBED -->
    <script type="text/javascript" src="svcore/js/simpleviewer.js"></script>
    <script type="text/javascript">
    simpleviewer.ready(function () {
        simpleviewer.load('sv-container', '100%', '100%', '666666', true);
    });
    </script>
    <div id="sv-container"></div>
    <!--END SIMPLEVIEWER EMBED -->

</body>
</html>

i can put this code:

<iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&amp;width&amp;layout=standard&amp;action=like&amp;show_faces=true&amp;share=true&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:80px;" allowTransparency="true"></iframe>

?

Re: Adding Facebook like button in new version

If you want to add the <iframe> code to your gallery's web page, then:
(1) You will have a 'Like' button for just the gallery (not each individual image).
(2) You will need to make space on your web page to accommodate the <iframe> by reducing the gallery's height from 100%, by giving your gallery a fixed height or by overlaying the <iframe> on top of the gallery using CSS.
Try the following:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>SimpleViewer-Pro Gallery</title>
    <style type="text/css">
        #overlay {
            position: absolute;
            top: 10px;
            left: 10px;
            height: 80px;
            z-index: 9999;
        }
    </style>
</head>
<body>
    <!--START SIMPLEVIEWER EMBED.-->
    <script type="text/javascript" src="svcore/js/simpleviewer.js"></script>
    <script type="text/javascript">
    simpleviewer.ready(function () {
        simpleviewer.load('sv-container', '100%', '100%', 'transparent', true);
    });
    </script>
    <div id="sv-container"></div>
    <!-- END SIMPLEVIEWER EMBED -->
    <div id="overlay">
        <iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&amp;width&amp;layout=standard&amp;action=like&amp;show_faces=true&amp;share=true&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:80px;" allowTransparency="true"></iframe>
    </div>
</body>
</html>

If you want the 'Like' button to share individual images within your gallery, then you will need to follow the instructions in this forum post or use Juicebox-Pro instead.

Steven Speirs
SimpleViewer Support Team.

Re: Adding Facebook like button in new version

my code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>R$ 80 à vista ou R$ 90 no Cartão de Crédito (cada)</title>
</head>

<body>

    <!--START SIMPLEVIEWER EMBED -->
    <script type="text/javascript" src="svcore/js/simpleviewer.js"></script>
    <script type="text/javascript">
    simpleviewer.ready(function () {
        simpleviewer.load('sv-container', '100%', '100%', '222222', true);
    });
    </script>
    <div id="sv-container"></div>
    <!--END SIMPLEVIEWER EMBED -->
    <div id="overlay">
    <iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fbossimportspage&amp;width&amp;layout=standard&amp;action=like&amp;show_faces=true&amp;share=true&amp;height=80&amp;appId=170116386511349" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:80px;" allowTransparency="true"></iframe>
    </div>

</body>
</html>

still did not work :'(

Re: Adding Facebook like button in new version

You will need to add the CSS code from my example above into the <head> section of your web page in order for the 'overlay' <div> to be visible and positioned correctly on your web page:

<style type="text/css">
    #overlay {
        position: absolute;
        top: 10px;
        left: 10px;
        height: 80px;
        z-index: 9999;
    }
</style>

You may also want to change your gallery's background color to be 'transparent' (as in the embedding code from my post above) so that the Facebook text "Be the first of your friends to like this." is visible (as well as the 'Like' and 'Share' buttons).
You can then change your gallery's background color using CSS such as the following:

<style type="text/css">
#sv-container {
    background-color: #abcdef;
}
</style>

Please note that the Facebook content will be displayed only when your gallery has been uploaded to a web server. It will not be displayed when you view your gallery locally on your own computer.

Steven Speirs
SimpleViewer Support Team.

Re: Adding Facebook like button in new version

do you have any video? because I have not located the above code in the css folder and svcore  sad

Re: Adding Facebook like button in new version

The code I posted above should be added manually to the web page which contains your gallery and Facebook iframe (so that the content of the iframe is visible on your web page). (It will not be found in the 'svcore' folder as it is not directly related to the gallery.)
Change the code on your gallery's 'index.html' file to the following:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <style type="text/css">
        #overlay {
            position: absolute;
            top: 10px;
            left: 10px;
            height: 80px;
            z-index: 9999;
        }
        #sv-container {
            background-color: #222222;
        }
    </style>
    <title>R$ 80 à vista ou R$ 90 no Cartão de Crédito (cada)</title>
</head>
<body>
    <!--START SIMPLEVIEWER EMBED -->
    <script type="text/javascript" src="svcore/js/simpleviewer.js"></script>
    <script type="text/javascript">
        simpleviewer.ready(function () {
            simpleviewer.load('sv-container', '100%', '100%', 'transaprent', true);
        });
    </script>
    <div id="sv-container"></div>
    <!--END SIMPLEVIEWER EMBED -->
    <div id="overlay">
        <iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fbossimportspage&amp;width&amp;layout=standard&amp;action=like&amp;show_faces=true&amp;share=true&amp;height=80&amp;appId=170116386511349" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:80px;" allowTransparency="true"></iframe>
    </div>
    </body>
</html>
Steven Speirs
SimpleViewer Support Team.