ブログ記事中の画像にPinterestの保存ボタンが表示されるようにする方法

Pinterest（ピンタレスト）のユーザは気に入った画像を自分のボードに日々溜めているはずです。ですから、私のブログを訪問して、気になる記事やそれに関連する画像を見つけたら、きっとピン（保存）するはず。

記事の内容が気になっていて、もう一度読みたいと思ってくれていれば、一旦ピンしたその画像から後日再び私のブログへ訪問してくれるかもしれません。その可能性を高めるため、記事中の画像全てにPinterestへ「保存」するボタンが表示されるようにしておきましょう。

これもやり方を調べて実装してみましたので、同じようにやり方を探しておられる方のために、手順をまとめておきます。

やることは「『保存』ボタンを表示させるコードを手にいれて、ブログに追加する」だけ。とっても簡単です。

「保存」ボタンを表示させるコードを手にいれる

Pinterestが「保存」ボタンを表示させるためのコードを用意してくれています。Pinterest Developersのサイトで、ウィジェットビルダーを使って好みのコードを作成しましょう。

Pinterest Developers ウィジェットビルダー
https://developers.pinterest.com/tools/widget-builder/?

まず上部のメニューで「保存」ボタンが選択されていることを確認しましょう。ここで「保存」ボタンの種類を設定すると、それに応じたコードが自動的に作成され、右下に表示されます。

いくつかの種類が用意されていますが、今回の目的に適する設定として下の画像のようにしてみました。

• ボタンの種類：画像にホバーした時
• サイズは大
• 言語：User’s Default Language

ブログにコードを流し込む

上の画像中、右下に表示されるコードをコピーしてブログのフッター（</body>の直前）に挿入します。

ブログのコードに直接書き込んでも構いませんが、WordPressでブログを作成している場合には、フッターに入れるhtmlコードを任意に設定できるプラグインがいくつも用意されていますから、そうしたものを使ってフッターにHTMLコードを追加する方法が簡単だと思います。

例としてここでは私が使っている「Simple Custom CSS and JS」というプラグインを使う場合で説明します。プラグイン名だけ見るとCSSとJSのカスタマイズをするもののように見えますが、HTMLも含め、ブログコードの任意の位置に、任意のコードを挿入してくれる優れものです。

（なお、今回挿入するコードはJSのように見えるかもしれませんが、<script>タグで囲まれたHTMLコードです。）

プラグインの使い方の詳細は省略しますが、下の画像のように、フッターにウィジェットビルダーで生成されたHTMLコードをペーストして保存。

これでブログの記事中全ての画像に、マウスをホバーした時にPinterestに「保存」するボタンが表示されるようになります。

なお、ブログに投稿した記事のアイキャッチ画像を自動でPinterestにもピンさせる方法はこちらにまとめてあります。