Pinterestウィジェットでブログに埋め込み。

[st-amp]このページはモバイルで表示を速くする処理をしています。遅くする要素が省かれています。全ての内容を見る場合は「完全版を表示する」のページで閲覧することをオススメします。[/st-amp]

Pinterestのウィジェットビルダーの使い方が簡単になった。

ブログに埋め込みができるウィジェットビルダーの種類

ブログにピンボタン[Pin It]を貼る

[st-no-amp][/st-no-amp]

Pinterestフォローボタンを貼る

[st-no-amp]Pinterestをフォロー[/st-no-amp]
「画像をマウスオーバーするとPinterestのPinボタンが出てくるようにする方法。」の記事でも少し書きましたが、ウィジェットは他にもあります。

1枚の写真を貼り付ける「ピンウィジェット」

[st-no-amp][/st-no-amp]

自分のタイムラインを貼り付ける「プロフィールウィジェット」

[st-no-amp]プロフィール Pinterest[/st-no-amp]

ボードを貼り付ける「ボードウィジェット」

[st-no-amp]フォローする Best Places to Visit Kyoto Pinterest[/st-no-amp]
という5種類があります。。
ウィジェットビルダーは以前から使う事ができましたが英語だったのでわかりにくい部分がありました。
Pinterestが日本語化されて、ウィジェットビルダーも日本語になりました。
しかも、使いやすくインターフェースも改善されたようです。(今のところ一部のユーザーのみです)

Pinterestをブログに埋め込む方法

[ピン]ボタン

ボタンタイプ

[ピン]ボタンにはボタンタイプが3種類あります。

  1. One Image
  2. Any Image
  3. Image Hover
One Image

[st-no-amp][/st-no-amp]
One Imageでは、ピンして欲しい「画像」と「説明」と「リンクURL」を指定することができます。
[st-no-amp]ピンボタン One Image[/st-no-amp]
[st-no-amp] をクリックすると、
One Image
がポップアップででてきます。[/st-no-amp]

Any Image

[st-no-amp][/st-no-amp]
Any Imageでは、ピンして欲しい「画像」と「説明」と「リンクURL」を指定せず、閲覧ユーザーに選んでもらうタイプのピンボタンです。
[st-no-amp] をクリックすると、
Any Image
のようにユーザーがピンする画像を選択する画面が開きます。[/st-no-amp]

Image Hover

マウスオーバーすると画像の左上に[Pin It]ボタンが表示されるようになる方法です。
これは、ページの < head >< /head > 内にスクリプトを貼り付けます。
[st-no-amp]ピンボタン Image Hover[/st-no-amp]
一度設定すると全ての貼り付け画像に適用されます。
小松菜の収穫
画像にマウスオーバーすると[Pin It]ボタンが出てくるようになっています。

フォローボタン

PinterestプロフィールページのURLと名前を入力して[Build It!]ボタンをクリックするとプレビューとコードがでてきます。
フォローボタン
フォローボタンをクリックすると、プロフィールのポップアップページが開きます。
よろしければフォローお願いします。
[st-no-amp]SINTO[/st-no-amp]

プロフィールウィジェット

プロフィールページの右[  ]から[ウィジェットを作成]をクリックする。
埋め込みコードのポップアップが開くので、コピーしてブログに貼り付けましょう。
こんな感じです。 
[st-no-amp]Pinterest プロフィールにアクセスしましょう。[/st-no-amp]

プロフィールウィジェットのサイズ指定

プロフィールページからプロフィールウィジェットを作成する場合、サイズ指定ができません。
サイズを指定したい場合は、ウィジェットビルダーを使うことになります。
 ウィジェットビルダー

  • 四角い「Square」
  • サイドバーに最適な縦長の「Sidebar」
  • ヘッダーに最適な横長の「Header」
  • カスタマイズ可能な「Roll Your Own」

の4種類が選べます。
Roll Your Own では、
画像の横幅サイズ、ウィジェットの幅と高さを指定できます。
[st-no-amp]Visit profile on Pinterest.[/st-no-amp]
実は、はじめに貼り付けたプロフィールウィジェットコードの数値を変えるだけでも可能です。

画像の横幅
data-pin-scale-width=”80″
ウィジェットの高さ
data-pin-scale-height=”200″
ウィジェットの幅
data-pin-board-width=”400″

どちらかやりやすい方でお試しください。

プロフィールウィジェットの最小サイズ

画像の横幅とウィジェットの高さの最小サイズは60、ウィジェットの幅の最小サイズは130です。
[st-no-amp]Visit profile on Pinterest.[/st-no-amp]

ボードウィジェット

プロフィールページと同じく、ボードの右[  ]から[ウィジェットを作成]をクリックする。
ボードウィジェット作成
埋め込みコードのポップアップが開くので、コピーしてブログに貼り付けましょう。
[st-no-amp]Pinterest ボード「::: My Photography」をフォローしましょう。[/st-no-amp]

ボードウィジェットのサイズ指定

ボードウィジェットのサイズ指定は、先程のプロフィールウィジェットと同じです。

ピンウィジェット

以前は、単独のピンページの右上に[<> Your Website]というウィジェット作成ボタンがあったのですが、現在は無くなってしまいました。

旧ピンページ

シェアボタンの箇所に「Twitter」「Facebook」と「ピンウィジェット」がありました。
ピンウィジェット

現在のピンページ

Twitterへの共有とウィジェット作成ボタンが無くなっています。
Twitterに共有しても画像が表示されないので仕方ないと思いますが、ピンウィジェットはなぜ無くしてしまったのでしょう?
ピンページを開いてURLをコピーし、URLをピンウィジェットにペーストして[Build It!]します。
 ウィジェットビルダー
ピンウィジェット
貼り付けてみます。
[st-no-amp][/st-no-amp]
こんな風になります。
以前は、もっと大きなサイズで貼り付けできたのですが、現在はこのサイズに統一されました。
再び大きなサイズでブログに埋め込むことができるようになりました。
 Pinterest をブログに埋め込み。幅600pxサイズも可能になった!
ぜひ、お試しください♪

[st-card id=8921 ]

今日も元気に楽しく♪
[st-no-amp]

Pinterest関連記事

[catlist search=”Pinterest” numberposts=5 order=desc][/st-no-amp]