Pinterest ウィジェットビルダーを使う

Pinterest (ピンタレスト)の画像をブログやサイトに貼り付けたい

ピンタレストの画像を自分のブログやサイトに埋め込んで紹介したい場合、画像や動画をコピー&ペーストしてリンクを貼る方法はピンタレストの利用規約で認められていませんので注意が必要です。

では、どのような方法でブログに載せるのかと言うと、ピンタレストが提供している「ピンタレスト ウィジェットビルダー」というツールを使います。必然的にピンタレストの登録が必要になります。

参考 PinterestPinterest

 

ピンタレスト ウィジェットビルダーを使う

参考 Pinterest Developersピンタレスト ウィジェットビルダー

ピンタレスト登録済みの方、新規の登録が済んだ方は、ピンタレスト ウィジェットビルダーを開きます。

 

  1. 保存ボタン
  2. フォローボタン
  3. ピンウィジェット
  4. プロフィールウィジェット
  5. ボードウィジェット

上記5つの機能が使えます。では実際にブログやサイトへ埋め込む(貼り付け)方法を説明します。

 

1 ピンを埋め込む

まずピンタレストを開きます。埋め込みたいピンを選択します。

自分の保存したピンやリピン(他人の保存したピンを自分のホームフィードに保存したもの)以外に、リピンしていないピンでも可能です。

ピンを選んだら中央上の「・・・」をクリック、次に1番下の「埋め込む」をクリックします。著作権の問題もあるので自分のピンした画像を使います。

注意
スマートフォンからは「埋め込む」が表示されないので、現状はパソコンからでしか作業ができないと思います。

 

するとウィジェットビルダーの画面が開きます。選んだピンのURLが自動的に反映されています。ピンのサイズを3種類から選びます。僕は普段「中」に設定しています。


 

画面下へスクロールするとピンの説明文が自動的に表示されますが、「説明を非表示にする」にチェックを入れると画像のみの表示も可能です。

次に2つあるコードの上のコードをコピーして、ブログやサイトの表示したい部分のテキスト(ビジュアルではないので注意)へ貼り付けます。これだけでは表示されません。

そこで「pinit.js」をコピーして各ページの</BODY>タグのすぐ前に貼り付けます。

このブログで使用している「WordPress」の場合、「外観」⇒「テーマエディター」⇒「子テーマ」⇒「footer.php」の</body>の前へ貼り付けると1度だけでOKです。

ピンの埋め込みの度にに毎回「pinit.js」を貼り付ける必要はありません。

コードを貼り付けると下のように表示されます。パソコンでもっと大きく表示させたいのであれば画像サイズ「大」を選んでコードを取得して貼り付けてください。

</ a>


 

2 ボードを埋め込む

自分の作成したボードをブログやサイトで紹介したい場合など保存した最新30のピンが表示されます。

ピンタレストを開きます。埋め込みたいボードを選びます。ボードの場合「・・・」の表示がないので、ページ上のURLをコピーします。


 

「ピンタレストウィジェットビルダー」を開いて、コピーしたURLを上の「PinterestボードのURL」へ貼り付けます。


次に「サイズ」を選びます。今回は「四角」を選びます。「サイドバー」は縦長でパソコンのサイドバーに表示できるデザイン。

「ヘッダー」高さがなく画像が横1列表示。「カスタム」は画像の幅・ボードの高さ・ボードの幅を自由に設定できます。

 

サイズを選んだら画面下に表示される「コード」をコピーして、ブログやサイトの表示したい「テキスト(ビジュアルではないので注意)」へ貼り付けます。

pinit.js」はピンの埋め込みで設定した方は再度貼り付ける必要はありません。


 

ボードの埋め込みから始めた方
これだけでは表示されません。次に「pinit.js」をコピーして各ページの</BODY>タグのすぐ前に貼り付けます。

このブログは「SANGO」というテーマを使用していますので、「外観」⇒「テーマエディター」⇒「子テーマ」⇒「footer.php」の</body>の前へ貼り付けると1度だけでOKです。

ピンの埋め込みの度にに毎回「pinit.js」を貼り付ける必要はありません。

僕の「壁紙」ボードを埋め込むことができました。

慣れると簡単にできます。パソコンの場合は右側のボタンで縦にスクロールして見る事ができ、表示されるのは最新保存の30件分になります。

保存した画像が増えたり削除したりによって、リアルタイムに表示される30枚の画像は変化するのでおもしろいですよ。


 

3 プロフィールウィジェットの作成

基本的にピンやボードの埋め込みと同じです。全てのピンの中から保存した最新30のピンが表示されます。

どういったピンを集めているのか全体的なイメージを伝えることができます。

 

ピンタレストを開き、ホームフィード上部に表示されている「自分のサイトURL」をコピーします。埋め込み用のボタンはありません。

コピーしたら「ピンタレストウィジェットビルダー」を開きます。


 

PinterestユーザーのURL」にコピーした自分のサイトURLを貼り付けます。次にサイズを選びます。参考に今回は「ヘッダー」に設定します。


 

サイズを選ぶと「コード」が表示されるのでコピーします。初めて使われる方は、下の「pinit.js」を〈/BODY〉タグの前に貼り付けてください。

上のコードを貼り付けただけでは表示されません。次に「pinit.js」をコピーして各ページの</BODY>タグのすぐ前に貼り付けます。

このブログは「SANGO」というテーマを使用していますので、「外観」⇒「テーマエディター」⇒「子テーマ」⇒「footer.php」の</body>の前へ貼り付けると1度だけでOKです。ピンの埋め込みの度にに毎回「pinit.js」を貼り付ける必要はありません。

これで表示されました。ブログのトップに表示させて毎日ピンを保存していけば、日替わりに画像が更新されるので新鮮な印象を与えられるかもしれませんね。

目を惹くような画像や動画を選べばアイキャッチとしての効果もあります。


 

4 保存ボタンを埋め込む

ブログやサイトの画像の上に保存用のボタンを埋め込むことができます。それによりワンクリックでピンタレストの保存画面へ切り替わります。

  1. 1件の画像
  2. 全ての画像
  3. 画像にホバーした時
  1. 円形(小)
  2. 円形(大)
  3. 長方形(小)
  4. 長方形(大)

 

ボタンの種類形状を選ぶことができます。僕の設定している「画像にホバーした時」を選んで説明していきます。

まずウィジェットビルダーを開いたら、「保存」ボタンをクリックします。

 

「画像にホバーした時」を選び、ボタンは「大」にチェック(円形にチェックしなければ長方形になります)を入れると、上のような画像が表示されると思います。

次に下に表示されている「pinit.js」コードを〈/BODY〉の前に貼り付けます

上のコードを貼り付けただけでは表示されません。次に「pinit.js」をコピーして各ページの</BODY>タグのすぐ前に貼り付けます。

このブログは「SANGO」というテーマを使用していますので、「外観」⇒「テーマエディター」⇒「子テーマ」⇒「footer.php」の</body>の前へ貼り付けると1度だけでOKです。

ピンの埋め込みの度にに毎回「pinit.js」を貼り付ける必要はありません。

これでブログやサイトの全ての画像にホバー(カーソルを画像に合わせた時)している時に「保存」ボタンが表示されるようになりますよ。


 

5 フォローボタンを埋め込む

ブログやサイトにフォローボタンを貼り付けることができます。

 

まずピンタレストを開きホームフィード(自分のサイトのトップページ)の上に表示されている「自分のサイトURL」をコピーします。


 

次にピンタレストウィジェットビルダーを開き「フォローボタン」をクリックします。

1番上の「Pinterest 自分のURL」にコピーした自分のサイトURLを貼り付けます。「ユーザー名」は自分のユーザー名を入れます。ここは決まりはないと思いますが、、、。

次にに下から2番目の「コード」をコピーしてブログやサイトの表示したい場所のテキスト(ビジュアルではないので注意)に貼り付けます。

最後に「pinit.js」コードを〈/BODY〉の前に貼り付けます

上のコードを貼り付けただけでは表示されません。次に「pinit.js」をコピーして各ページの</BODY>タグのすぐ前に貼り付けます。

このブログは「SANGO」というテーマを使用していますので、「外観」⇒「テーマエディター」⇒「子テーマ」⇒「footer.php」の</body>の前へ貼り付けると1度だけでOKです。

ピンの埋め込みの度にに毎回「pinit.js」を貼り付ける必要はありません。

これで「フォローボタン」が表示されていると思います。

 

ウィジェットビルダーの効果的な使い方

自分のブログやサイトにアップロードした画像をピンするのが効果的とされています。例えば自分の保存している写真や動画をピンしたとします。

他のユーザーが自分のピンに興味を持ってくれたとしてもリピン(他ユーザーが保存したピンを保存)止まりです。

ピンタレストの素晴らしい機能は画像元を辿れるところにあるので、自身のブログやサイトの画像をピンすると、他ユーザーを自身のブログやサイトへ誘導することが可能です。

他ユーザーの興味や関心と合致するような質の高い情報を提供できれば「Win-Winの関係」をつくることへもつながります。

 

商品を販売している方は商品の画像や動画をピンしてみましょう。

ブログやサイトを持っている方であればURL認証できるので会社でなくとも個人で「ビジネスアカウント(無料)」へ登録できます。

便利な機能が無料で使えるのでぜひお試しください。

 

Pinterest ビジネスアカウントを使う簡単な方法