Search Results for: tutorials

Pinterest is probably the hottest sharing and organizing social network today, and if your website’s community has jumped on the pinning bandwagon, make sure it’s easy for them to share and save your stuff with the “Pin It” button. Here’s how you can add it to your WordPress site (including Genesis Framework-powered sites).

Install a Pinterest Pin It WordPress Plugin

The most painless route would be installing a Pinterest WordPress Plugin. There are already a few competing ones available at the official plugin repository such as Pin It On Pinterest (by bahia0019) and Pinterest “Pin It” Button (by pderksen).

If you’re using an existing social button service like AddThis, Slick Social Share Buttons, or Social Linkz, you’ll be happy to know that these plugins support Pinterest already.

Add the Pinterest Pin It button to your WordPress Theme

The button code which you can get from the Goodies page requires an image URL in addition to the usual post URL, so in this case we’re using the built-in Post Thumbnails feature.

In single.php and places where you call The Loop, add this code:

[php]
<?php $pimage = wp_get_attachment_image_src(get_post_thumbnail_id(get_the_ID()));
if ( $pimage ) { ?>
<div class="pinterest"><a href="http://pinterest.com/pin/create/button/?
url=<?php echo urlencode(get_permalink()); ?>
&amp;media=<?php echo urlencode($pimage[0]); ?>
&amp;description=<?php urlencode(get_the_title()); ?>"
class="pin-it-button" count-layout="horizontal">Pin It</a></div>
<?php } ?>
[/php]

Depending on the type of button you want, you can change the value “horizontal” to “vertical” or “none”.

In footer.php, add this code to the bottom, right before </body>:

[code lang=”js”]<!– Include ONCE for ALL buttons in the page –>
<script type="text/javascript">// <![CDATA[
(function() {
window.PinIt = window.PinIt || { loaded:false };
if (window.PinIt.loaded) return;
window.PinIt.loaded = true;
function async_load(){
var s = document.createElement("script");
s.type = "text/javascript";
s.async = true;
if (window.location.protocol == "https:")
s.src = "https://assets.pinterest.com/js/pinit.js";
else
s.src = "http://assets.pinterest.com/js/pinit.js";
var x = document.getElementsByTagName("script")[0];
x.parentNode.insertBefore(s, x);
}
if (window.attachEvent)
window.attachEvent("onload", async_load);
else
window.addEventListener("load", async_load, false);
})();
// ]]>
</script>[/code]

Insert the Pinterest Pin It button to your Genesis Framework WordPress site

If you use the Genesis Theme Framework, just add the above JavaScript to the footer script text box in the Genesis Options page, then add this to the functions.php file in your child theme:

[php]
add_action( ‘genesis_post_content’, ‘pinterest_pin_it_button’ );
function pinterest_pin_it_button() {
$pimage = genesis_get_image( array(‘format’ => ‘url’) );
if ( $pimage ) { ?>
<div class="pinterest">
<a href="http://pinterest.com/pin/create/button/?
url=<?php urlencode(get_permalink()); ?>
&amp;media=<?php echo urlencode( $pimage[0] ); ?>
&amp;description=<?php echo urlencode(get_the_title()); ?>"
class="pin-it-button" count-layout="horizontal">Pin It</a>
</div>
<?php }
}
[/php]

This adds the button after the entry text. You can also choose from other Genesis Hooks for a different location on your blog.