如何添加Pinterest Pin It按钮

最后更新于 2012 年 11 月 20 日

上一篇文章如何自动向文章结尾添加广告描述了在Genesis框架中如何向文章中添加一些需要每一篇文章都出现的内容。现在介绍另一种方式，可以实现同样的效果。只不过这次的例子是添加来自Pinterest的Pin it按钮。

根据百度百科介绍

Pinterest，Pin（图钉）+Interest（兴趣），把自己感兴趣的东西用图钉钉在钉板（PinBoard）上。美国的一家创办于2011年的正迅速成长为受世界瞩目的图片视觉社交网站。

页面底端自动加载无需翻页功能，让用户不断发现新图片。为用户提供在线收藏和分享Pinterest视觉艺术图片的服务。

如果你还没到过这个网站，强烈建议你去看一看，对图片较多的网站，添加一个Pin it按钮可以让用户非常方便的分享自己的图片，分享到Pinterest的图片是带有原网站链接的，也是个不错的流量来源。

言归正传，首先在子模板下创建single.php，single.php是文章的默认模板，将会覆盖genesis parent theme中的post模板。拷贝下面任意一组代码到single.php中，保存，访问文章页面就可以看到Pin it按钮。

水平样式

<?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&amp;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();

垂直样式

<?php

add_action('genesis_post_content', 'pinterest_share_button', 5);

function pinterest_share_button() {

    /** Vertical */
    printf('<div class="pinterest-button"><a href="http://pinterest.com/pin/create/button/?url=%s&amp;media=%s" 
        class="pin-it-button" count-layout="vertical">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();

不显示次数的样式

<?php
add_action( 'genesis_post_content', 'pinterest_share_button', 5 );
function pinterest_share_button() {
 
    /** No-count */
    printf( '
<div class="pinterest-button"><a href="http://pinterest.com/pin/create/button/?url=%s&amp;media=%s" 
class="pin-it-button" count-layout="none">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();

三段代码的区别在于count-layout=""的参数不同

如果要装饰该按钮，可以通过下面的class选中按钮

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