Pinterestは、Webサイトとの連携させるさまざま機能を提供しています。代表的なものが、ピンボタンです。以前は、Pinterestのドキュメントなどでは、”Pin it”ボタンと呼ばれていましたが、現在はSave button（セーブボタン）に名称が変わっています。
Pinterest セーブボタンの種類
セーブボタン（ピンボタン）は、ボタンを押すとページの画像をPinterestに保存する機能です。現在、以下の3種類のボタンタイプが選択可能です。
- イメージフーバー
- エニーイメージ (Any image)
- ワンイメージ(One image)
イメージフーバー (Image hover)
ページの画像の上にフーバーすると、セーブボタンが表示されます。
エニーイメージ (Any image)
ボタンをクリックすると、サイト上の任意のイメージを保存することができます。
ワンイメージ (One image)
ページ上の1つのイメージに表示するセーブボタンです。技術的なコーディングが求められます。
Pinterest イメージフーバー セーブボタンの設置方法
イメージフーバーをサイトに設定する手順になります。
- Pinterestの widget builder のページにアクセスします。
- ボタンタイプの中からImage Hoverを選びます。
- ボタンサイズと形を設定します。
- プレビューでボタンの表示を確認します。ボタンをクリックしてどのように動作するかを確認することもできます。
- ボタンの選択が決まったら、Copy the codeに表示されているコードをコピーします。
- サイトのボタンを表示したいページの</body>タグの直ぐ上にコードを貼り付けます。
Pinterest widget builder
Pinterestのウィジェットビルダーのページで、各種ウィジェットを作成することができます。本記事では、セーブピンを作成します。
ボタンタイプは冒頭で紹介した3種類があります。ここでは、イメージフーバーを選びます。
ボタンの形は、通常と丸。サイズは通常と大が選択できます。形とサイズを選んで、プレビューの上にマウスオーバーすると、ボタンが表示されます。
デフォルトセーブボタン（標準タイプ）
大きい通常タイプのボタン
丸小ボタン
丸大ボタン
ボタンの形とサイズが決まったら、ページ下に表示されているコードをコピーします。
Pinterest セーブボタン コードの設置
コードは、ボタンを表示するページの</body>の直ぐ上に設置します。
ここでは、WordPress テーマ Cocoonでの設置方法を紹介します。Cocoonの場合は、子テーマのフッターに挿入するファイル footer-insert.phpにコードを追加します。
WordPress管理メニューの［外観］から「テーマの編集」をクリックします。右側に表示されるテーマファイルの中の”tmp-user”をクリックし、footer-insert.php ファイルを選択します。
footer-insert.php のコード欄の「ログインユーザーも含めてカウントする場合は以下に挿入」の下にPinterest ウィジェットビルダーで取得したセーブボタンののコードを貼り付けます。
設定内容を確認後、［ファイルを更新］ボタンを押して、コードを追加したテンプレートファイルを保存します。
以上で作業完了です。本ページの画像でもPinterestのセーブピンが利用可能になっています。
以下のYouTubeで、Pinterestのボードの簡単な紹介とウィジェットビルダーを使ったセーブピンの作成、コードの設置、表示確認と実際にピンを保存する作業を紹介しています。
コメント