Pinterest Hover Button on Images- Pretty Young Thing theme

[cdonahue1999]

Hi! I was using a tutorial to add a hovering pin it button to my images that I created versus a standard plugin Pin it button. This is the code I was using from a tutorial that says to put it above the  <body/> tag.

Where would I put that in my theme? I can't find html anywhere, is it in the main Genesis theme? Or is there a better way to do this for wordpress?  Is there a plug in or widget I can put it in?

 

this is the code I was going to use:
<script>
//<![CDATA[
var bs_pinButtonURL = "http://i1270.photobucket.com/albums/jj619/PaisleyBlvd/pinit.png";
var bs_pinButtonPos = "center";
//]]>
</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<script src='http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bs_pinOnHoverv1_min.js' type='text/javascript'/>
<!-- please do not alter or remove the following code -->
<div id='bs_pinOnHover'><a href="http://www.bloggersentral.com/2012/11/pinterest-pin-it-button-on-image-hover.html">Pin It button on image hover</a></div>

[Peter]

Hi there.

You've probably got this sorted by now, but just in case you haven't, if you go to your Genesis Theme Settings page, down at the bottom you'll see boxes for Header and Footer scripts.. that's where you can add the code.

[triggers]

Hi,

I'm trying to add a PinIt Pinterest button to images in my posts in the Metro theme. I have these directions for creating the code below.

1. create a file named single.php and place the code you see below.

<?php add_action( 'genesis_post_content', 'pinterest_share_button', 5 ); function pinterest_share_button() { /** Horizontal */ printf( '<div class="pinterest-button"><a href="http://pinterest.com/pin/create/button/?url=%s&media=%s" class="pin-it-button" count-layout="horizontal">Pin It</a><script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script></div>', urlencode( get_permalink() ), urlencode( genesis_get_image( array( 'format' => 'url' ) ) ) ); } add_action( 'genesis_post_content', 'pinterest_share_button_after' ); function pinterest_share_button_after() { /** Horizontal */ printf( '<div class="pinterest-button"><a href="http://pinterest.com/pin/create/button/?url=%s&media=%s" class="pin-it-button" count-layout="horizontal">Pin It</a><script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script></div>', urlencode( get_permalink() ), urlencode( genesis_get_image( array( 'format' => 'url' ) ) ) ); } genesis();

2. Save the file and upload it to your child theme’s directory on your server.

Question: I haven't done this before. Where do I find the the child theme directory? Is it when I select Genesis -> Import/export  ??

I see a Metro Child Theme: Theme Functions (functions.php) file I can edit and add this code to it. If I can add it here instead of uploading it where is the best place to add it?

3. then add to the css file

.pinterest-button iframe { margin: 10px 0; }

Also once I add this pinit button will Pinterest automatically see my images? Right now when i try to use the Pinit button in my browser it doesn't see any images in any of my blog posts.

I would appreciate your feedback.
Thanks!

 

[ruchira]

hi! Did you get this sorted? I'm having a similar issue with the Lifestyle Theme

[triggers]

No, I gave up too time consuming and no answers. My time has been spent on other issues that aren't working well.

Hope you can figure it out. Good luck

[ruchira]

Yeah, that's the issue. I've been trying to battle this pin it button, tried over 4 or 5 different types of plugin. The only one that remotely worked is the jquery one. but that places a tiny pin it button outside the image at the bottom or top. It's hardly visible!
If I can crack it, I'll let you know. I've spent almost 3 days already on this and thinking of giving up and move on to other things if I don't get it today.

[techsite.us]

Hi, I was looking for a non-plugin option and searched forum first and decided to post easy solution from the Pinterest site
https://business.pinterest.com/en/widget-builder#do_pin_it_button but the directions are not WordPress specific on that page.

They give 3 different buttons options on that page and the most likely option you're looking for is

<!-- Please call pinit.js only once per page -->
<script type="text/javascript" async data-pin-hover="true" src="//assets.pinterest.com/js/pinit.js"></script>

This will put the hover button on all images in your WP site, matters not what theme.

Go to your WP dashboard, click on Genesis,, Theme Settings and scroll down to "Enter scripts or code you would like output to wp_footer():" and in the box below that, paste the code above,
You can paste in the header box if you like or if having issues, but in footer it should help load your page quicker however slight speed improvement.

You can see the results on this page http://www.hotnewkidstoys.com

[Brad Dalton]

This is how i did it on my site http://wpsites.net/web-design/add-pinterest-hover-buttons-for-images/

---

Tutorials for StudioPress Themes & WooCommerce.

[Author]

Posts