Search code examples
javascriptjqueryprettyphoto

All pictures has same amount of facebook likes in prettyPhoto


I'm using jquery.prettyPhoto for displaying photo-albums on my site. I activated the social_tools to display twitter and facebook widgets below every photo.

The problem is that if someone likes a photo, all the other photos get a like to, so every photo had 234 likes.

Is this because my location.href isn't changing when another picture is showing?

The code to activate my album is:

$.fn.prettyPhoto({ 
  slideShow: 3000,
  social_tools: ''
    +'<div class="pp_social">'
      +'<div class="twitter">'
        +'<a href="http://twitter.com/share" class="twitter-share-button" data-count="none">Tweet</a>'
        +'<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>'
      +'</div>'
    +'<div class="facebook">'
      +'<iframe src="http://www.facebook.com/plugins/like.php?locale=nl_NL&href='+location.href+'&amp;layout=button_count&amp;show_faces=true&amp;width=500&amp;action=like&amp;font&amp;colorscheme=light&amp;height=23" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:500px; height:23px;" allowTransparency="true"></iframe>'
    +'</div>'
  +'</div>'
});

How can I fix this problem?

Thanks in advance.


Solution

  • I edited the jquery.prettyPhoto plugin to fix the problem.

    In the section where the facebook links are being replaced I added an extra placeholder:

    // Rebuild Facebook Like Button with updated href
    if(settings.social_tools){
      facebook_like_link = settings.social_tools.replace('{location_href}', encodeURIComponent(location.href)).replace('{image_src}',encodeURIComponent(location.protocol+'//'+location.host+pp_images[set_position])); 
      $pp_pic_holder.find('.pp_social').html(facebook_like_link);
    }
    

    The extra placeholder is {image_src} and is is being replaced by the image location.