• Registered: 2012-06-19
  • Posts: 2

Topic: Facebook like button for every image

Hi,

I use Simpleviewer Pro 2.3.0. but would like to add a like button to individual images in my photo galleries on my site www.madebyrainer.com

I am not a professional web builder, not by a long shot, but have searched everywhere I could and did not find a clear solution.  The explenations given here are either not clear to me or I do not understand them (probably the latter). My page is simple, I do not use divs but very easy html and I would appreciate every help possible.

To me the use of Simpleviewer takes away the hassle of having to understand too much of scripting and stuff. Is there any chance anyone could explain this to me in a way I will understand? Maybe help me with some code or something? Feel free to rummage around my source and stuff to get an idea of my (little) knowledge of site building.

My thanks would be overwelming :)

  • Registered: 2008-07-06
  • Posts: 6,330

Re: Facebook like button for every image

Because SimpleViewer is a Flash-based gallery and images are not simply displayed using <img> tags in an HTML page, there is no quick and easy solution.
However, the following two threads may be of interest/help.
http://www.simpleviewer.net/forum/viewt … p?id=15599
http://www.simpleviewer.net/forum/viewt … p?id=15213

Check out the post by Ramblings (and the source of one of his/her galleries).
Ramblings has used the SimpleViewer-Pro API to determine the currently viewed image (note how the 'Gallery Link' at the foot of the page changes as you select different thumbnails) which is referenced when the user clicks on the 'Share' button.

Steven Speirs
SimpleViewer Support Team
  • Registered: 2012-06-19
  • Posts: 2

Re: Facebook like button for every image

Thanks for the fast reply,

But I have read all of them. I understand that there is a possibility as Ramblings has implemented it on his site. However, I do not understand how. I have tried looking in his source, copying stuff and addapting it to my own site and so on but without any result. I do not get any button to appear.

i.e. this is the index.html of the Simpleviewer gallery. Should I implement it in here or somewhere else?

<!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 Gallery</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', '800', '450', 'transparent', true);
    });
    </script>
    <div id="sv-container"></div>
    <!--END SIMPLEVIEWER EMBED -->
<img src="../../shared/bottom_photo.jpg" width="800" height="70" border="0" usemap="#Map">
<map name="Map"><area shape="rect" coords="193,22,234,40" href="../art/index.html" target="mainframe">
  <area shape="rect" coords="340,22,424,40" href="../nature/index.html" target="mainframe">
</map>
</body>
</html>

  • Registered: 2008-07-06
  • Posts: 6,330

Re: Facebook like button for every image

Try the following as your gallery's HTML index page ('index.html'). The URL of the 'Like Button' changes dynamically as you select different images. It should relatively easy to follow.
(You will need to include the 'swfaddress.js' file in your gallery folder. It can be downloaded from here.)

<!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">
    <script type="text/javascript" src="svcore/js/simpleviewer.js"></script>
    <script type="text/javascript" src="swfaddress.js"></script>
    <script type="text/javascript">
        var svAPI;
    
        function svComplete() {
            svAPI = document.getElementById('svInstance');
        };    

        function svImageChange(index) {
            document.location = "#" + (index + 1);
            var original = document.getElementById("fb").src;
            var modified = original.replace(/\?href=(.*?)&/, "?href=" + encodeURIComponent(document.location) +"&");
            document.getElementById("fb").src = modified;
        }

        SWFAddress.onChange = function() {             
            if(svAPI != null && svAPI.getImageIndex() != getLocationIndex()) {
                svAPI.showImage(getLocationIndex());
            }
        }

        function getLocationIndex() {
            return location.hash.substr(1) - 1;
        }

        var flashvars = {};
        flashvars.enableAPI = "true";
        flashvars.firstImageIndex = getLocationIndex();

        var attributes = {};
        attributes.id = "svInstance";
        attributes.name = "svInstance";

        simpleviewer.ready(function() {
            svAPI = simpleviewer.load('sv-container', '100%', '100%', 'transparent', true, flashvars, null, attributes);
        });
    </script>
    <title>SimpleViewer-Pro Gallery</title>
</head>
<body>
    <div id="overlay" style="position: absolute; top: 50px; left: 10px; z-index: 999;">
        <iframe id="fb" src="//www.facebook.com/plugins/like.php?href=#&amp;send=false&amp;layout=standard&amp;width=450&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:35px;" allowTransparency="true"></iframe>
    </div>
    <div id="sv-container"></div>
</body>
</html>
Steven Speirs
SimpleViewer Support Team