I've Added Pinterest to the Social Media bar
  • I love prettyPhoto. Super easy to install. I needed a Pinterest button, though so I had to add one. Here's the code in case you want to bundle it into the script or someone else needs it. I'm going to add Google+ next and I'll post when it's done.

    (Note: This discussion board is rendering any HTML tags I enter so I've replaced the triangular brackets with double square brackets for visibility. To use this code do two global search and replaces to transform [[ into a left triangular bracket and ]] into a right triangular bracket.) Single square brackets stay as they are

    First off, at the bottom of the web page you need to add a JavaScript line containing the Pinterest js reference as you do whenever pinning (last thing on the page before the [[/body]] tag is best:

    [[script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"]][[/script]]

    Then download the uncompressed version of the script and make these changes:

    Line 93 ( change - add pinterest DOM element )
    social_tools: '[[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="//www.facebook.com/plugins/like.php?locale=en_US&href={location_href}&layout=button_count&show_faces=true&width=500&action=like&font&colorscheme=light&height=23" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:500px; height:23px;" allowTransparency="true"]][[/iframe]][[/div]]'
    +'[[div class="pinterest"]][[a href="http://pinterest.com/pin/create/button/?url={location_href}&media={media_src}&description='+encodeURIComponent(document.title)+'" target="_blank" class="pin-it-button" count-layout="horizontal"]][[img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" /]][[/a]][[/div]]'

    Line 205 ( change - replace multiple instances of {location_href} and delay substituting for now)
    // Rebuild Facebook Like and Pinterest Buttons with updated href
    if(settings.social_tools){
    facebook_like_link = settings.social_tools.replace(/\{location_href\}/gi, encodeURIComponent(location.href));
    //$pp_pic_holder.find('.pp_social').html(facebook_like_link);
    }

    Line 267 ( insert )
    if(settings.social_tools){
    pinterest_link = facebook_like_link.replace(/\{media_src\}/gi, encodeURIComponent(imgPreloader.src));
    $pp_pic_holder.find('.pp_social').html(pinterest_link);
    }


    Line 267 just makes the substitutions for image slideshows. You could add the same code later on in the switch(_getFileType(pp_images[set_position])) cases for the different media types.

    Here's a sample page where I have it running:


    http://www.tricksyknitter.com/store/galiano-vest-89.php
  • Oh, and add this line to your css file:

    .pp_social .pinterest{float:left;margin-left:5px;width:100px;overflow:hidden}
  • Hi, looking at your website (http://www.tricksyknitter.com), I see that you have also managed to set it up so that the Facebook like button on each gallery image corresponds to that specific image once in Facebook - how did you manage to set this up? It seems to be a common issue, but struggling to find an answer anywhere..
  • A great help thanks cmjaimet. I think you could clarify the third step around 267 though. After following your steps, their was already a line of code on 267 and your code needs to be added after that - between…

    imgPreloader.src = pp_images[set_position];

    <-- CODE GOES HERE -->

    break;

    Kind regards,

    James
  • Hey, sorry for the delay. Summer and kids and stuff.
    => yuleycat, the Facebook is taken care of natively in the original code. I modified it to handle both Twitter and Facebook on lines 208-211

    // Rebuild Facebook Like and Pinterest Buttons with updated href
    if (settings.social_tools) {
    facebook_like_link = settings.social_tools.replace(/\{location_href\}/gi, encodeURIComponent(location.href));
    //$pp_pic_holder.find('.pp_social').html(facebook_like_link);
    }
    This executes every time line 184 is triggered which is when a new image is loaded:
    $.prettyPhoto.open = function(event) {
  • => wedideas. Yes, I guess I added some lines since I posted here. Line 267 above actually shows on line 271 in the current file. Thanks.


    imgPreloader.src = pp_images[set_position];
    //alert(imgPreloader.src);
    if(settings.social_tools){
    pinterest_link = facebook_like_link.replace(/\{media_src\}/gi, encodeURIComponent(imgPreloader.src));
    $pp_pic_holder.find('.pp_social').html(pinterest_link);
    }
    break;
  • You're a lifesaver, cmjaimet. Thanks for figuring this one out. I decided I wanted the description from the image box (i.e., the thumbnail link's title attribute) to serve as the default Pinterest description as well. For anyone who's interested, it went as follows:

    1. Change the Line 93 Pinterest DOM element to:

    [[div class="pinterest"]][[a href="http://pinterest.com/pin/create/button/?url={location_href}&media={media_src}&description={link_title}" target="_blank" class="pin-it-button" count-layout="horizontal"]][[img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" /]][[/a]][[/div]]

    2. Change the if statement on line 217 to:

    // Set the description
    if(typeof pp_descriptions[set_position] != 'undefined' && pp_descriptions[set_position] != ""){
    $pp_pic_holder.find('.pp_description').show().html(unescape(pp_descriptions[set_position]));
    if(settings.social_tools){
    pinterest_link_start = facebook_like_link.replace(/\{link_title\}/gi, encodeURIComponent(pp_descriptions[set_position]));
    }
    }else{
    $pp_pic_holder.find('.pp_description').hide();
    }

    3. On line 270 (line 267 in cmjaimet's example above), change "facebook_like_link" to "pinterest_link_start".

    Obviously, the "pinterest_link_start" variable could be named anything, and I'm sure there's something more semantically appropriate.
  • I have followed these instructions, and have it working beautifully....I have one small glitch however. If I like an image on facebook, the image that appears on facebook is not the one that I liked...

    Website is here, www.bespokebakery.co.uk/birthdaygallery/novelties/index.html

    Any ideas?
  • In fact, it seems to pick up the same image for facebook on this page whichever image I "like"....
  • Are there any plans to add these functionalities to the core version?
  • Hi there,
    I am still trying to implement the pinterest button, but I still get the prettyphoto url instead of the url of the full resolution of the image.
    You can see the problem on any of my slideshow galleries, here ie: http://www.flyawaytrip.com/destinations_new_york.htm

    I appreciate any help.
    Thank you very much.

    I have two files prettyphoto.php which has this code:
    ----------------
    <?php extract(get_option('mt_set'), EXTR_OVERWRITE);?>

    jQuery(document).ready(function() {
    window.mt_lightbox = function() { // add the function to a global object like "window.mt_lightbox"
    jQuery("a[rel^='prettyPhoto']").prettyPhoto({
    slideshow: <?php echo ($mt_glb_sshowtime*1000);?>, /* false OR interval time in ms */
    /*autoplay_slideshow: false, /* true/false */
    opacity: <?php echo ($mt_glb_opcty/100); ?>, /* Value between 0 and 1 */
    show_title: <?php if ($mt_glb_title=="true") {echo "true";} else { echo "false";} ?>, /* true/false */
    allow_resize: <?php if ($mt_glb_resize=="true") {echo "true";} else { echo "false";} ?>, /* Resize the photos bigger than viewport. true/false */
    theme: '<?php echo $mt_glb_theme; ?>', /* pp_default / light_rounded / dark_rounded / light_square / dark_square / facebook */
    social_tools: '
    image
    ' /* html or false to disable */
    });
    }
    if(jQuery().prettyPhoto) {
    mt_lightbox();
    }
    });

    -------------------
    and the prettyphoto.js 3.1.5


  • Hi,

    it seems like you need to add pinterest's 'pin it' button prettyphoto popup.

    so now i created a magic to add pinterest 'Pin it' button with other social media icons like tweets and fb like.

    here is tutorial how i did this, read and enjoy.

    Add Pinterest to social media icons in prettyPhoto


    thanks to all in advance to view this magic.
  • There is a problem with your code:
    {location_href} will be the current page link, not the image link, so you will Like the page on Facebook, not the photo.
    BUT if I use {media_src} for both facebook and pinterest link, the first one used in your code will be the image link, but the second one will be "{media_src}" like it's plain text.
    So, how can I use {media_src} two or more times for two or more buttons?

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Login with Facebook Sign In with Google Sign In with OpenID Sign In with Twitter