Pinterest 'Pin It' Button

[stjpipe7]

Hey Eric and Stefan,
Have integrated the Facebook button after following your tutorials and it is SWEEEET! But I am also interested in placing a Pinterest 'Pin It' button in the same fashion beside, or underneath, the Facebook button. I have looked at the Pinterest, (from Pinterest), script below but have absolutely NO IDEA how to implement it. Not to mention the fear of breaking stuff in the process. It would be awesome if you could post another tips, tricks and tutorials post on adding a 'Pin It' button along side the Facebook button if possible.


<script type="text/javascript">
(function (w, d, load) {
var script,
first = d.getElementsByTagName('SCRIPT')[0],
n = load.length,
i = 0,
go = function () {
for (i = 0; i < n; i = i + 1) {
script = d.createElement('SCRIPT');
script.type = 'text/javascript';
script.async = true;
script.src = load[i];
first.parentNode.insertBefore(script, first);
}
}
if (w.attachEvent) {
w.attachEvent('onload', go);
} else {
w.addEventListener('load', go, false);
}
}(window, document,
['//assets.pinterest.com/js/pinit.js']
));
</script>



Already have Pinterest accounts for my sites, but would love just that little bit more leverage from site visitor pins. Hope I'm not overstepping the request boundaries, but this would be SO COOL!

Kind Regards
Stevo

[Eric]

Hi

I haven't tested it but following the tutorial here you need to add the following code before your ending </body> tag:

<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script>

And add the following code to your PRODUCT DETAIL > Default > Product detail module area:

<a href="http://pinterest.com/pin/create/button/?url=<?php echo datafeedr_tools()->current_url(true); ?>&media=<?php echo urlencode($product->image); ?>&description=<?php echo urlencode($product->description); ?>" class="pin-it-button" count-layout="horizontal"><img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" /></a>

Eric

[stjpipe7]

Hi Eric, Stefan and Everybody,

Sorry I took so long to share the results. Absolutely awesome guys, but there are a couple of pitfalls to avoid!!! Here's the low down so that, hopefully, anyone doing this gets it right the first time.

1. Exactly as Eric said place the Pinterest script before the ending </body> tag in your header.php.

<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script>

Before moving onto step two, the code in the second step Eric suggested is correct but it redirects to the complete Pinterest log-in page. To make the log-in come up as a smaller new window, combining the script shown in my original post with Eric's in the same fashion as the Facebook button tutorial is required.

2. Copy and paste the script below to a new text module in your stores detail page.

<script type="text/javascript">
(function (w, d, load) {
 var script,
 first = d.getElementsByTagName('SCRIPT')[0],  
 n = load.length,
 i = 0,
 go = function () {
   for (i = 0; i < n; i = i + 1) {
     script = d.createElement('SCRIPT');
     script.type = 'text/javascript';
     script.async = true;
     script.src = load[i];
     first.parentNode.insertBefore(script, first);
   }
 }
 if (w.attachEvent) {
   w.attachEvent('onload', go);
 } else {
   w.addEventListener('load', go, false);
 }
}(window, document,
 ['//assets.pinterest.com/js/pinit.js']
));    
</script>

<a href="http://pinterest.com/pin/create/button/?url=<?php echo datafeedr_tools()->current_url(true); ?>&media=<?php echo urlencode($product->image); ?>&description=<?php echo urlencode($product->description); ?>" class="pin-it-button" count-layout="horizontal"><img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" /></a>

For the Pinterest description I did however change ($product->description) to ($product->name) because it just made sense to have it short and sweet and targeted towards the products title.

3. THINGS THAT DIDN'T WORK.

For some reason the Pinterest script wouldn't fire when placed in a text column to the right or left of the Facebook script text column. However it worked fine in a text row, either above or below the Facebook text row. Why? I have no idea, but the Pinterest button above the Facebook button at the bottom of the details page looks pretty cool anyway.

Also, if you have a firewall plugin installed......DON'T FORGET TO WHITE-LIST YOUR IP IN THE PLUG-IN SETTINGS BEFORE TRYING TO EDIT THE HEADER PHP!!!!!!!!!! LOL. That way you won't bang your head against a wall for a day trying to work out why your theme won't let you edit the php.

Thanks for putting us on the right track Eric. Let us know if you see anything wrong with this set up. Hope this helps everybody to get some Pinterest love and more dollars in the bank.

Cheers Stevo.

[Eric]

Thanks for sharing, Stevo!

Eric

[marksperl]

What would the code be to include the Sales Price or Price within Pinterest pin

here is the code I found, without datafeedr modification:

<a href="http://pinterest.com/pin/create/button/?url=<?php the_permalink() ?>&media=<?php echo wp_get_attachment_thumb_url( get_post_thumbnail_id( $post->ID ) ); ?>&description=<?php the_title();  get_post_meta($post->ID, 'price', true); ?>&is_video=true" class="pin-it-button" count-layout="horizontal"><img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" /></a>

[Eric]

Hi

That question would be better for Pinterest. I'm not sure how to include the price in the code however if you need the price and sale price it can be found in these PHP variables:

PHP Code:

$product->price
$product->saleprice 


Eric

[paulinethomas]

Hi eric,

A dumb question I know but where would you add to the script to make the link open in a new _blank window,

Regards,
Pauline

[Eric]

Hi,

You would do it like this:

<a target="_blank" href="http://pinterest.com/pin/create/button/?url=<?php the_permalink() ?>&media=<?php echo wp_get_attachment_thumb_url( get_post_thumbnail_id( $post->ID ) ); ?>&description=<?php the_title();  get_post_meta($post->ID, 'price', true); ?>&is_video=true" class="pin-it-button" count-layout="horizontal"><img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" /></a>

Eric

[paulinethomas]

Thank You :-)

[dhilditch]

Regarding adding the price to your pinterest button as a price sash, it's simply - Pinterest automatically picks it up providing you add the currency symbol before it.

So, in your image description you send to Pinterest, just add $199 or whatever at the end.