フォトブログに最適。WordPressにPinterestのソーシャルボタンを設置するソースコード #WordPress

この記事ではPinterestのソーシャルボタンをWordPressに設置するためのソースコードを示します

注：コレは画像です。本物は記事の下にあります。

上の写真の赤枠で囲ったボタンを設置するためのソースコードです。
本物はこの記事の下にあります。
試しに押してみてください。

Pinterestとは？

日本ではまだ馴染みが浅いですが欧米ではそれなりに人気のSNSです。
以下に示すURLからアクセスできます。
http://pinterest.com/
「Pin」する事で自分のお気に入りの画像を集める事ができます。
こんな感じです。

他の人のBoardをfollowしたり他の人がPinした画像をRepinしたりする事で画像が広がって行く感じです。
フォトブログを開設している人なら自分の写真をPinしてしまえばPinterestで拡散して沢山の人に見てもらえる可能性があります。
フォトブログに設置するソーシャルボタンとしては最も適しているボタンなのではないでしょうか？

設置方法

難しい解説はアレなので以下にソースコードを示します。

header.php

<head>セクションにPinterestのJavaScriptを設置します。ここでは読み込みの高速化も考慮して非同期読み込み版を示します。

<script type="text/javascript">
(function(d){
  var f = d.getElementsByTagName('SCRIPT')[0], p = d.createElement('SCRIPT');
  p.type = 'text/javascript';
  p.async = true;
  p.src = '//assets.pinterest.com/js/pinit.js';
  f.parentNode.insertBefore(p, f);
}(document));
</script>

ブログ固有の設定は無いのでそのままコピー＆ペーストすればOKです。

single.php

ボタンを設置したい場所に以下のコードをコピー＆ペーストします。

<a href="//pinterest.com/pin/create/button/?url=<?php the_permalink(); ?>&media=<?php $image_id = get_post_thumbnail_id(); $image_url = wp_get_attachment_image_src($image_id, ”, true); echo $image_url[0]; ?>&description=<?php the_title(); ?>" data-pin-do="buttonPin" data-pin-config="above"  target="_blank"><img src="//assets.pinterest.com/images/pidgets/pin_it_button.png" /></a>

ブログ固有の設定は無いのでそのままコピー＆ペーストすればOKです。
記事のタイトルがDescriptionのデフォルト文字列として出るようにしてあります。

以上です。

簡単でしょ？
Pinされる画像にはthumbnailを使っているので記事を書く際にはPinしたい（させたい）写真を「アイキャッチ画像を設定」で設定するのを忘れないでください。
設置したボタンを押下してみて以下に示すような画面が開けば成功です。