Datafeedr Support Forums  

Go Back   Datafeedr Support Forums > Current Version (V3) Forum > Tips, Tricks & Tutorials
Home Register FAQ Members List Calendar Search Today's Posts Mark Forums Read

Important - The support forums are now in "read-only" mode as we transition to an alternative help desk solution. Feel free to contact us here with any of your questions or search the forums for an existing solution.
 
 
Thread Tools Search this Thread Display Modes
  #1  
Old July 30th, 2012, 08:21 PM
stjpipe7 stjpipe7 is offline
 
Join Date: Jun 2011
Posts: 11
Default Pinterest 'Pin It' Button

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
  #2  
Old July 31st, 2012, 06:20 AM
Eric's Avatar
Eric Eric is offline
Datafeedr Team
 
Join Date: Feb 2008
Posts: 16,902
Default

Hi

I haven't tested it but following the tutorial here you need to add the following code before your ending </body> tag:
HTML Code:
<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:
HTML Code:
<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
  #3  
Old August 29th, 2012, 09:18 PM
stjpipe7 stjpipe7 is offline
 
Join Date: Jun 2011
Posts: 11
Default Works Fantastic, Cheers Eric.

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.

HTML Code:
<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.

HTML Code:
<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.
  #4  
Old August 29th, 2012, 10:03 PM
Eric's Avatar
Eric Eric is offline
Datafeedr Team
 
Join Date: Feb 2008
Posts: 16,902
Default

Thanks for sharing, Stevo!

Eric
  #5  
Old September 2nd, 2012, 05:14 AM
marksperl marksperl is offline
 
Join Date: Aug 2012
Posts: 12
Default Adding "Sales Price" to Pin

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

here is the code I found, without datafeedr modification:

Code:
<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>

Last edited by marksperl : September 2nd, 2012 at 05:15 AM.
  #6  
Old September 2nd, 2012, 08:45 AM
Eric's Avatar
Eric Eric is offline
Datafeedr Team
 
Join Date: Feb 2008
Posts: 16,902
Default

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
  #7  
Old October 9th, 2012, 04:32 PM
paulinethomas paulinethomas is offline
 
Join Date: Sep 2012
Posts: 84
Default

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
__________________
ptom
  #8  
Old October 9th, 2012, 04:59 PM
Eric's Avatar
Eric Eric is offline
Datafeedr Team
 
Join Date: Feb 2008
Posts: 16,902
Default

Hi,

You would do it like this:
HTML Code:
<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
  #9  
Old October 9th, 2012, 05:14 PM
paulinethomas paulinethomas is offline
 
Join Date: Sep 2012
Posts: 84
Default

Thank You :-)
__________________
ptom
  #10  
Old October 18th, 2012, 05:53 PM
dhilditch dhilditch is offline
 
Join Date: Feb 2012
Location: In my house
Posts: 108
Default

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.
 


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Facebook Like Button - Adding a like button to your product detail pages Eric Tips, Tricks & Tutorials 35 November 25th, 2014 10:22 AM
Facebook Like Button - Adding a like button to your store's front page Eric Tips, Tricks & Tutorials 2 March 13th, 2014 06:23 PM
Pinterest Like Theme teeshirtdrama Questions 4 July 2nd, 2012 11:03 AM
Facebook Like Button - Adding a like button to each product on the category page Eric Tips, Tricks & Tutorials 5 June 24th, 2012 05:14 PM
Pinterest Doesn't Work dk3 Problems 1 March 29th, 2012 12:47 PM


All times are GMT -5. The time now is 07:12 PM.


Powered by vBulletin® Version 3.6.8
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.