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
-
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: '' /* 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!
