How to add Facebook share button on preetyphoto

In this tutorial we learn how to add Facebook Share button on prettyphoto.

1. open your script.js file where you have call the $(‘.prettyPhoto’).prettyPhoto() initialize.

2. Go to onPictureChanged() in the $(‘.prettyPhoto’).prettyPhoto().

3. and add this code.

$(document).ready(function(){

$(‘.prettyPhoto’).prettyPhoto({
changepicturecallback: onPictureChanged,
});

function onPictureChanged() {

var fbDiv = jQuery(‘.facebook’);
fbDiv.empty();

jQuery(‘<a>’, {
‘data_url’:’YOUR_FACEBOOK_SHARE_URL’,
//target:’_blank’,
‘class’:’pluginButton’,
‘text’:’Share’ ,
‘style’:’background: none repeat scroll 0 0 #ECEEF5;border:1px solid #CAD4E7;border-radius: 3px 3px 3px 3px;color: #3B5998; cursor: pointer; padding: 2px 6px 4px; white-space: nowrap;’

}).appendTo(‘.pp_social’);
}

});

that is all for now.

thanks for view this post, and also keep comment, its give me energy to write this kind of useful blogs.

4 thoughts on “How to add Facebook share button on preetyphoto

  1. Anonymous

    Sorry man,
    but i can find the code string you are talking about. Maybe is because i’m not using a wordpress theme.
    My problem is: there is no way to show the FB button in prettyphoto!
    I’m using prettyphoro in html page, like this one (draft): http://www.ideeeprogetti.it/realizzazioni.html

    Thank you for help, Luca

    1. webadmin Post author

      Hi Luca,

      that is not the issue of wordpress or html theme.

      anyway open you html and you will find javascript code in it.

      like this:

      $(“area[rel^=’prettyPhoto’]”).prettyPhoto();
      $(“.gallery:first a[rel^=’prettyPhoto’]”).prettyPhoto({animation_speed:’normal’,theme:’facebook’,slideshow:3000, autoplay_slideshow: false, social_tools:false});
      $(“.gallery:gt(0) a[rel^=’prettyPhoto’]”).prettyPhoto({animation_speed:’fast’,slideshow:10000, hideflash: true});

      now you need to change in this script.

      1. goto this line of code,

      $(“.gallery:first a[rel^=’prettyPhoto’]”).prettyPhoto({animation_speed:’normal’,theme:’facebook’,slideshow:3000, autoplay_slideshow: false, social_tools:false});

      2. change it like this,

      ———————-
      $(“.gallery:first a[rel^=’prettyPhoto’]”).prettyPhoto(

      {animation_speed:’normal’,theme:’facebook’,slideshow:3000,
      autoplay_slideshow: false,
      changepicturecallback: onPictureChanged,
      social_tools:true});

      function onPictureChanged() {

      var fbDiv = jQuery(‘.facebook’);
      fbDiv.empty();

      jQuery(‘’, {
      ‘data_url’:’YOUR_FACEBOOK_SHARE_URL’,
      //target:’_blank’,
      ‘class’:’pluginButton’,
      ‘text’:’Share’ ,
      ‘style’:’background: none repeat scroll 0 0 #ECEEF5;border:1px solid #CAD4E7;border-radius: 3px 3px 3px 3px;color: #3B5998; cursor: pointer; padding: 2px 6px 4px; white-space: nowrap;’

      }).appendTo(‘.pp_social’);
      }

      ———————-

      if you required any other help or having issues again, i will be happy to solve your issue.

      thanks a lot.

  2. Anonymous

    Aziz gave me the solution, here is it:

    1. goto this line of code,

    $(“.gallery:first a[rel^=’prettyPhoto’]“).prettyPhoto({animation_speed:’normal’,theme:’facebook’,slideshow:3000, autoplay_slideshow: false, social_tools:false});

    2. change it like this,

    $(“.gallery:first a[rel^=’prettyPhoto’]”).prettyPhoto(

    {animation_speed:’normal’,theme:’facebook’,slideshow:3000,
    autoplay_slideshow: false,
    changepicturecallback: onPictureChanged});

    function onPictureChanged() {

    jQuery(‘‘, {
    ‘href’:’https://www.facebook.com/sharer/sharer.php?u=’+encodeURIComponent(location.href),
    ‘target’:’_blank’,
    ‘class’:’pluginButton’,
    ‘text’:’Share’ ,
    ‘style’:’background: none repeat scroll 0 0 #ECEEF5;border:1px solid #CAD4E7;border-radius: 3px 3px 3px 3px;color: #3B5998; cursor: pointer; padding: 2px 6px 4px; white-space: nowrap;’

    }).appendTo(‘.pp_social’);

    }

    3. WORKS Great!!!! Thanks Aziz

Comments are closed.