1 Topic by jbanuelos (edited by jbanuelos 2011-07-25 00:12:37)

  • Registered: 2011-07-24
  • Posts: 2

Topic: Simple viewer pro and facebook tags.

Has anybody out there done something along these lines, of creating a simpleviewer pro album and having the interaction of tagging people within the pictures in the album?

This would be interesting to do it, this can make a website's hits or visits go way up when you create an album of an event that a lot of people attended.

We have simple viewer album of a ciclying event and attendence was over a thousand people, any way we can have people see the picture album and let them in some sort of way tag themselves via Facebook??

Any input would be great.

James

Here is the simpleviewer album:

http://www.bicitourtijuana.com/contenid … /index.htm

  • Registered: 2010-10-07
  • Posts: 6

Re: Simple viewer pro and facebook tags.

Really good and usefull idea man, i have pro vr. too, and put FB comments on my galleries and a manual Share button with IMG tag on XML archive, but your idea is better, here a example:

http://www.paparazzobc.com/cobertura.php?cod=539

  • Registered: 2011-07-24
  • Posts: 2

Re: Simple viewer pro and facebook tags.

Still havent figure out on how to tag people on SV pro, but a manual share button would work for now. Can you help me out on what is required to make the share button (xml file, code, etc.)

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

Re: Simple viewer pro and facebook tags.

If you would like to integrate a Facebook 'Like' button for individual images within a SimpleViewer-Pro gallery, you could try the following:
(1) Use the <iframe> implementation of the Facebook 'Like' button.
(2) Place the button on your gallery's HTML index page (not in the captions for each image). (See the '#overlay' <div> in my code below.)
(3) Use the SimpleViewer-Pro API to enable Direct Linking to individual images within the gallery.
(4) Use the SimpleViewer-Pro API (specifically the svImageChange() event) to change the 'src' attribure of the <iframe> (which is essentially the URL for the Facebook 'Like' button) each time the user selects a different image.
Try using the following as your gallery's 'index.html' file:

<!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>

Please note that you will also need to include the file 'swfobject.js' (which is required to fully support Direct Linking and Back Button support) in your gallery folder. The file can be downloaded from this web page.

Steven Speirs
SimpleViewer Support Team