サイト用の [保存] ボタンを作成する

ヒントとトラブルシューティング

「2016 年 6 月以前に Pinterest の「保存ボタン」をコードに追加したユーザーの場合、2017 年 10 月 3 日からデザインが「ピンする」から「保存」に変更します。」

Pinterest であなたのビジネスを知ってもらうには、[保存] ボタンが最適な方法です。サイトのページに [保存] ボタンを追加すると、ユーザーが気に入ったアイテムを Pinterest に保存でき、より多くのユーザーの目に留まりやすくなります。 
 
Wordpress、Blogger、Tumblr、Wix、Squarespace の場合:
 
WordPress.com WordPress.com
Wordpress の [ピン] ボタンはサイトにコードを追加する必要がありません。デフォルトの共有オプションを設定して、Wordpress のすべての投稿に [ピン] ボタンを追加できます。
  1. WordPress のダッシュボードにアクセスします。
  2. [設定]、[共有] の順にクリックします。
  3. [共有ボタン] のセクションで [利用可能なサービス] から Pinterest を [利用中のサービス] へドラッグします。
  4. デフォルトの [ピン] ボタンの画像を表示したい場合は、[ボタンのスタイル] のプルダウンメニューで [公式ボタン] に変更します。
  5. ページ下部の [変更を保存] をクリックします。
WordPress.org WordPress.org

画像ホバーの [ピン] ボタン用プラグインは WordPress.org プラグインディレクトリからダウンロードできます。

Blogger Blogger
  1. Blogger のダッシュボードの [レイアウト] セクションに移動します。
  2. [ブログの投稿] セクションの [編集] をクリックします。
  3. [共有ボタンを表示する] までスクロールして、チェックボックスがオンになっていなければオンにします。
  4. [アイテムの並べ替え] セクションで必要に応じて並べ替えてから [保存] をクリックします。
Tumblr Tumblr
まず JavaScript の行を追加してください。
 
JavaScript の行を追加するには:
  1. Tumblr のダッシュボードで編集したいブログを選択して [カスタマイズ] をクリックします。
  2. [カスタマイズ] 画面で [HTML を編集] をクリックします。
  3. コードの一番下までスクロールします。
  4. コードに「pinit.js」が含まれていることを確認すれば完了です。
  5. 含まれていない場合は終了タグ </body> の上に追加します。<script type="text/javascript" async src="//assets.pinterest.com/js/pinit.js"></script>
 
画像ホバーの [ピン] ボタンを追加するには:
  1. 上記の手順で JavaScript の行を追加していることを確認します。
  2. Tumblr のダッシュボードで編集したいブログを選択して [カスタマイズ] をクリックします。
  3. [カスタマイズ] 画面で [HTML を編集] をクリックします。
  4. コードの一番下までスクロールします。
  5. 上記のステップ 4 で「src=」の前に「data-pin-hover="true"」を追加します。新しい行は次のようになります:<script type="text/javascript" async data-pin-hover="true" src="//assets.pinterest.com/js/pinit.js"></script>
  6. [プレビューの更新] をクリックします。画面右のサンプル画像にカーソルを合わせると、[ピン] ボタンが表示されます。表示されない場合はステップ 4 に戻って、間違いがないか確認します。
  7. [保存] をクリックします。
Wix.com Wix.com
  1. エディタの左にある [追加(+)] をクリックします。
  2. [ソーシャル] をクリックします。
  3. 一番下までスクロールして [Pinterest の [ピン] ボタン] をクリックします。
  4. ページ上の表示したい場所に [ピン] ボタンをドラッグします。
  5. [ピン] ボタンで画像に基づいたピンと選択した説明が作成されます。ピンは [ピン] ボタンをクリックしたページにリンクされます。
Squarespace Squarespace

Squarespace サイト用の [ピン] ボタンを作成する方法はこちらをご覧ください。

 
ボタンを作成する場合は、まず追加する [保存] ボタンの種類を決めます。ボタンは 3 種類あります。 
 
  • 画像ホバー(推奨):ページ上の画像にカーソルを合わせると [保存] ボタンが表示されます。
    Learn how to build it Learn how to build it
    1. ウィジェットビルダーにアクセスします。
    2. [ボタンの種類] セクションで [画像ホバー] を選択します。
    3. ボタンのサイズや形をカスタマイズします。
    4. サンプル画像にカーソルを合わせるとボタンをプレビューできます。また、[ピン] ボタンをクリックして動作を確認することもできます。
    5. デザインが決まったら [コードをコピー] セクションの下にあるコードをコピーします。
    6. サイト上でボタンを表示させたい各ページの終了タグ </body> の上にコードを貼り付けます。
  • すべての画像  (サンプル):このボタンをクリックすると、サイトに含まれるすべての画像を保存できます。作成方法は簡単です。
    Learn how to build it Learn how to build it
    1. ウィジェットビルダーにアクセスします。
    2. [ボタンの種類] セクションで [全ての画像] を選択します。
    3. ボタンのサイズ、形、言語、画像などをカスタマイズします。 
    4. サンプル画像にカーソルを合わせるとボタンをプレビューできます。また、[保存] ボタンをクリックして 動作を確認することもできます。
    5. デザインが決まったら、ページ右側に表示されるコードをコピーします。
    6. サイト上でボタンを表示させたい各ページの <body> </body> タグの間にコードを貼り付けます。
  • 画像 1 件サンプル):ページ上の画像 1 件を対象とした [保存] ボタンで、コードの知識が多少必要です。
    Learn how to build it Learn how to build it
    1. ウィジェットビルダーにアクセスします。
    2. ボタンのサイズ、形、言語、 画像などをカスタマイズします。 
    3. [保存] ボタンを作成する画像が掲載されているウェブページの URL を追加します(サイトのホームページや他のページなど)。
    4. ブラウザで新しいウィンドウを開いて、自分のウェブサイトにアクセスします。
    5. [保存] ボタンを作成する画像を右クリックします。
    6. [画像 URL をコピー] を選択します。
    7. ウィジェットビルダーに戻り、画像フィールドに画像 URL を貼り付けます。
    8. 画像の説明を入力します。
    9. [テストしてみる] をクリックしてボタンのプレビューを確認します。
    10. デザインが決まったら、ページ右側に表示されるコードをコピーします。
    11. サイト上でボタンを表示させたい各ページの <body> </body> タグの間にコードを貼り付けます。

よくあるトラブル

[保存] ボタンのカウンターが表示されない / 正しく表示されない
[保存] ボタンをクリックしたときに、新しいウィンドウでボードピッカーが表示されない
画像ホバーボタンが動作しない
Pinterest とサイトの通信にトラブルが発生している

カウンターはボタンのコードで指定した URL へリンクしているピンの数を示しています。現在表示しているページと異なるページを指定している場合、カウンターが異なる数字を表示することがあります。

すべての画像の [保存] ボタンにカウンターを使用している場合、現在表示しているページの URL にリンクしているすべてのピンの数を表示します。

ボタンの横に表示されるカウンターを使用していて、そのページのピンの数が 0 の場合、カウンターは表示されません。ページから 1 件以上ピンされると、カウンターが表示されます。

サードパーティー製のプラグインが提供している [保存] ボタンを使用している場合は、プラグインの作成者にトラブルの修復が可能かどうかお問い合わせください。 

自作の [保存] ボタンを使用している場合は、以下をお試しください。

  • ページのコードで、クロージングタグの上に JavaScript の行が含まれていることを確認します。
  • ページに複数の JavaScript の行が含まれる場合は、最後の行以外はすべて削除してください。
  • 高度な非同期の JavaScript と通常の JavaScript の両方を使用している場合は、どちらかを削除します。
  • サードパーティー製のプラグインを使用している場合は、「pinit.js」の行がコードに既に追加されていないか確認します。追加されている場合は、改めて追加する必要はありません。
一部のホストでは JavaScript に対応していないため、Pinterest ウィジェットビルダーのコードを追加できません。ただし、他の方法でウィジェットを追加できる場合があります。

次の方法をお試しください。
 
  • 画像の一辺のサイズ(高さまたは幅)が 100 ピクセル以上、もう一辺のサイズが 200 ピクセル以上であることを確認します(ホバータイプの [保存] ボタンを表示できるのは 120x120 ピクセル以上の画像です)。
  • 画像が CSS の背景の指定されていないこと、それぞれの画像が「img」で始まる src 属性であることを確認します。
  • クロージングタグの上にホバーボタンのコードを追加します。

サイトでピンを作成する前に Pinterest がタイムアウトしていることを示しています。サイトの表示に時間がかかるときによく起きるエラーで、Pinterest 側では修正できません。お客様の側で原因を調べていただくようお願いいたします。