クリエイティブライフハック

写真とオンラインメディアの話をしよう。ブログ、ソーシャルメディア、オウンドメディア、ホームページ、ハンドメイドマーケット、Etsy、minne、Creema、iichi…

オンラインメディア

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

投稿日:2013/11/20 更新日:

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

スポンサーリンク

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

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

Pinterestフォローボタンを貼る

Pinterestをフォロー

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

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

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

プロフィール Pinterest

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

フォローする Best Places to Visit Kyoto Pinterest

という5種類があります。。

ウィジェットビルダーは以前から使う事ができましたが英語だったのでわかりにくい部分がありました。
Pinterestが日本語化されて、ウィジェットビルダーも日本語になりました。
しかも、使いやすくインターフェースも改善されたようです。(今のところ一部のユーザーのみです)

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

[ピン]ボタン

ボタンタイプ

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

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

One Imageでは、ピンして欲しい「画像」と「説明」と「リンクURL」を指定することができます。

ピンボタン One Image

をクリックすると、

One Image

がポップアップででてきます。

Any Image

Any Imageでは、ピンして欲しい「画像」と「説明」と「リンクURL」を指定せず、閲覧ユーザーに選んでもらうタイプのピンボタンです。

をクリックすると、

Any Image

のようにユーザーがピンする画像を選択する画面が開きます。

Image Hover

マウスオーバーすると画像の左上に[Pin It]ボタンが表示されるようになる方法です。
これは、ページの < head >< /head > 内にスクリプトを貼り付けます。

ピンボタン Image Hover

一度設定すると全ての貼り付け画像に適用されます。

小松菜の収穫

画像にマウスオーバーすると[Pin It]ボタンが出てくるようになっています。

フォローボタン

PinterestプロフィールページのURLと名前を入力して[Build It!]ボタンをクリックするとプレビューとコードがでてきます。

フォローボタン

フォローボタンをクリックすると、プロフィールのポップアップページが開きます。

よろしければフォローお願いします。

SINTO

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

プロフィールページの右[ icon-cog ]から[ウィジェットを作成]をクリックする。

埋め込みコードのポップアップが開くので、コピーしてブログに貼り付けましょう。

こんな感じです。 icon-arrow-down

Pinterest プロフィールにアクセスしましょう。

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

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

icon-arrow-right ウィジェットビルダー

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

の4種類が選べます。

Roll Your Own では、
画像の横幅サイズ、ウィジェットの幅と高さを指定できます。

Visit profile on Pinterest.

実は、はじめに貼り付けたプロフィールウィジェットコードの数値を変えるだけでも可能です。

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

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

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

画像の横幅とウィジェットの高さの最小サイズは60、ウィジェットの幅の最小サイズは130です。

Visit profile on Pinterest.

ボードウィジェット

プロフィールページと同じく、ボードの右[ icon-cog ]から[ウィジェットを作成]をクリックする。

ボードウィジェット作成

埋め込みコードのポップアップが開くので、コピーしてブログに貼り付けましょう。

Pinterest ボード「::: My Photography」をフォローしましょう。

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

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

ピンウィジェット

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

旧ピンページ

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

ピンウィジェット

現在のピンページ

Twitterへの共有とウィジェット作成ボタンが無くなっています。
Twitterに共有しても画像が表示されないので仕方ないと思いますが、ピンウィジェットはなぜ無くしてしまったのでしょう?

ピンページを開いてURLをコピーし、URLをピンウィジェットにペーストして[Build It!]します。

icon-arrow-right ウィジェットビルダー

ピンウィジェット

貼り付けてみます。

こんな風になります。
以前は、もっと大きなサイズで貼り付けできたのですが、現在はこのサイズに統一されました。

再び大きなサイズでブログに埋め込むことができるようになりました。

icon-arrow-circle-right Pinterest をブログに埋め込み。幅600pxサイズも可能になった!

ぜひ、お試しください♪

[button url="http://hatamoto.biz/how-to-use-pinterest/" label="Pinterestの使い方「初心者〜ビジネス活用の5ステップ」"]

今日も元気に楽しく♪

Pinterest関連記事

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitter で畑本伸一|CreativeLifeHackをフォローしよう!

-オンラインメディア
-, , ,

運営者プロフィール

畑本伸一

icon-maleSINTO Hatamoto (畑本伸一)
写真とオンラインメディアの話が大好きです。ワードプレス、インスタグラム、ピンタレストの活用方法、初心者ハンドメイド作家さん向けの商品写真の撮り方、編集方法、オンラインメディア活用などをセミナー講師としてお伝えしています。 I Love Fujifilm X-E2
icon-arrow-circle-right 詳しいプロフィール

共著

Facebookページ「Creative Life Hack」TwitterGoogle+ページ「自分メディアの育て方」instagramPinterestFeedly RSS

Copyright© クリエイティブライフハック , 2016 AllRights Reserved.