Bloggerのページ内の画像にPinterest のピンボタン（Pin it ボタン）を表示させる設定手順を紹介します。
[post_ads]
Pinterest セーブボタン（Pin it ボタン）とは？
Pinterestはネット上の気に入った画像を、アカウントのボードと呼ぶ分類毎にピン留めして保存、管理できるサービスです。
以下はPinterestのプロファイルです。
ユーザーがブラウザーの拡張機能でPinterest ピンを使って利用することもできますが、サイト側で標準でPinterestのピン留め機能を提供することも可能です。
サイトに掲載している画像がオリジナルで魅力ある場合、Pinterestのピン機能を備えるとユーザーとのエンゲージメントなどにも繋がります。
Pinterest セーブボタンの種類
現在、Pinterestのセーブボタンは以下の3種類が提供されています。- イメージフーバー
- エニーイメージ (Any image)
- ワンイメージ(One image)
ページの画像の上にフーバーすると、セーブボタンが表示されます。
エニーイメージ (Any image)
ボタンをクリックすると、サイト上の任意のイメージを保存することができます。
ワンイメージ (One image)
ページ上の1つのイメージに表示するセーブボタンです。技術的なコーディングが求められます。
本記事では、イメージフーバーの設置方法を紹介します。
BloggerにPinterest イメージフーバー セーブボタンを設置する手順
イメージフーバーボタンは、PinterestのロゴにSaveが入った通常タイプとPinterestのロゴのみの丸いタイプの2種類の形状が用意されています。
デフォルト
<script async defer data-pin-hover="true" src="//assets.pinterest.com/js/pinit.js"></script>
デフォルト大
<script async defer data-pin-hover="true" data-pin-tall="true" src="//assets.pinterest.com/js/pinit.js"></script>
ロゴ（丸）
<script async defer data-pin-hover="true" data-pin-round="true" src="//assets.pinterest.com/js/pinit.js"></script>
ロゴ大
<script async defer data-pin-hover="true" data-pin-tall="true" data-pin-round="true" src="//assets.pinterest.com/js/pinit.js"></script>
ピンボタンのコードをBloggerサイトに設置
コピーしたPinterestのピンボタンのコードをBloggerのテンプレートを編集して、</body>の上に設置します。Bloggerにログインして、ダッシュボードからテーマを選び、テンプレートプレビュー画面下の［HTMLの編集］を押します。
テンプレートのソースコードが表示されます。ソースコード内のどこかをクリックした後、コントロール＋"F"（Macの場合は、コマンド＋"F"）で、"</body>"を検索します。
</body>の上（前）に、取得してコピーしたPinterest ピンボタンのコードを貼り付けます。
オレンジ色の［テーマを保存］ボタンを押して、テンプレートを保存します。
以上で作業完了です。このページの画像でもPinterestのピンが利用できるようになっています。
コメント