ウェブサイトのウィジェット

[保存] ボタンの他に、ウェブサイトにフォローボタン、ピンウィジェット、ボードウィジェット、プロフィールウィジェットを追加できます。フォローボタンを追加すると、Pinterest のユーザーはあなたをフォローしやすくなります。また、あなたのピンがフォロワーのホームフィードに表示されます。その他のウィジェットは、ウェブサイトのピン、ボード、プロフィールを目立たせ、他のユーザーはあなたの Pinterest でのアクティビティをチェックしやすくなります。
 
これらのボタンとウィジェットは、ウィジェットビルダーを使ってウェブサイトに追加できます。

ウィジェットを作成する

Follow button Follow button

Follow button

フォローボタンを追加するには:

  1. ウィジェットビルダーにアクセスして、 プロフィール URL を入力します。
  2. [テストしてみる] ボタンをクリックします。
  3. 生成されたコードをコピーして、ウェブサイトでフォローボタンを設置する場所に貼り付けます。
コードは次のように表示されます 赤色のテキスト部分はお客様の情報に基づいて変更されます)。
 

Pin widget Pin widget
 
ピンウィジェットを追加するには: 
  1. お気に入りのピンの URL をコピーして、ウィジェットビルダーにアクセスします。
  2. ピンの URL を貼り付けます。
  3. [テストしてみる] ボタンをクリックします。
  4. 指定されたウェブサイト用のコードをコピーして、ピンを表示させたい場所に貼り付けます。
コードは次のように表示されます(赤色のテキスト部分はお客様の情報に基づいて変更されます)。
 
<a data-pin-do="embedPin" href="https://www.pinterest.com/pin/99360735500167749/"></a>
 
<!-- Please call pinit.js only once per page -->
<script type="text/javascript" async src="//assets.pinterest.com/js/pinit.js"></script>

Profile widget Profile widget

profile widget

プロフィールウィジェットを追加するには:

  1. ウィジェットビルダーにアクセスして、 プロフィール URL を入力します。
  2. プロフィールウィジェットのサイズを調整します。
  3. [テストしてみる] ボタンをクリックします。
  4. 指定されたウェブサイト用のコードをコピーして、ウィジェットを表示させたい場所に貼り付けます。
コードは次のように表示されます (赤色のテキスト部分はお客様の情報に基づいて変更されます)。
 

Board widget Board widget

board widget

ボードウィジェットを追加するには:

  1. ウィジェットビルダーにアクセスして、ボード URL を入力します。
  2. ボードウィジェットのサイズを調整します。
  3. [テストしてみる] ボタンをクリックします。
  4. 指定されたウェブサイト用のコードをコピーして、ウィジェットを表示させたい場所に貼り付けます。
コードは次のように表示されます (赤色のテキスト部分はお客様の情報に基づいて変更されます)。
 


主なホストでのウィジェット作成手順

WordPress.com WordPress.com
ブログ投稿内のピン、プロフィール、ボードにリンクを追加します。公開する際に、WordPress はリンクをウィジェットに自動的に変換します。

Blogger Blogger
  1. ウィジェットビルダーでウィジェットを作成して、コードをコピーします。
  2. ブログ管理ページの左側にある [レイアウト] ボタンをクリックします。
  3. ウィジェットのスペースを確保して、[ガジェットを追加] をクリックします。
  4. 下方向にスクロールして、[HTML/JavaScript] をクリックします。
  5. [コンテンツ] フィールドにウィジェットビルダーからのコードを貼り付けます([タイトル] フィールドはご自由に入力してください)。
  6. [保存] をクリックします。

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. 通常どおりに、投稿を作成します。
  3. キャプションボックス内(テキストが含まれる投稿を作成する場合は、メインのテキストボックス内)の <html> をクリックします。投稿のコードが表示されます。表示されない場合は、コードが表示されるまでボタンをクリックしてください。
  4. 投稿内でウィジェットを表示するスペースを確保し、ウィジェットビルダーからのコードを貼り付けます。
  5. <!-- Please call pinit.js only once per page --> と  <script type="text/javascript" async src="//assets.pinterest.com/js/pinit.js"></script>を削除します。
  6. 投稿を保存します。

ダッシュボード上では投稿にウィジェットは表示されませんが、実際の投稿には表示されます。

 

Wix.com Wix.com

[フォロー] ボタンを追加するには:

  1. エディタの左側にある [追加(+)] をクリックします。
  2. [ソーシャル] をクリックします。
  3. 一番下までスクロールして [Pinterest のフォロー] をクリックします。
  4. ページ上の表示したい場所にフォローボタンをドラッグします。


よくあるトラブル

ウィジェットがリンクとして表示されます。

次のトラブルシューティングのヒントをお試しください。

  • ページのコード内(BODY の終了タグの上)に、JavaScript の行が含まれていることを確認します。
  • ページに複数の JavaScript の行が含まれる場合は、最後の行以外はすべて削除してください。
  • 高度な非同期の JavaScript と通常の JavaScript の両方を使用している場合は、どちらかを削除します。
  • サードパーティー製のプラグインを使用している場合は、「pinit.js」の行がコードに既に追加されていないか確認します。追加されている場合は、改めて追加する必要はありません。

一部のホストでは JavaScript に対応していないため、Pinterest ウィジェットビルダーのコードを追加できません。ただし、他の方法でウィジェットを追加できる場合があります。

関連する記事