$hide=page-404-mobile

$type=carousel$columns=4$cat=hide$show=home

Bloggerの画像にPinterestのピンボタンを表示させる方法

Bloggerの画像にPinterestのピンボタンを表示させる方法 記事タイトルバナー
Bloggerのページ内の画像にPinterest のピンボタン(Pin it ボタン)を表示させる設定手順を紹介します。
[post_ads]

Pinterest セーブボタン(Pin it ボタン)とは?


Pinterestはネット上の気に入った画像を、アカウントのボードと呼ぶ分類毎にピン留めして保存、管理できるサービスです。

以下はPinterestのプロファイルです。


ユーザーがブラウザーの拡張機能でPinterest ピンを使って利用することもできますが、サイト側で標準でPinterestのピン留め機能を提供することも可能です。

サイトに掲載している画像がオリジナルで魅力ある場合、Pinterestのピン機能を備えるとユーザーとのエンゲージメントなどにも繋がります。

Pinterest セーブボタンの種類

現在、Pinterestのセーブボタンは以下の3種類が提供されています。
  • イメージフーバー
  • エニーイメージ (Any image)
  • ワンイメージ(One image)
イメージフーバー (Image hover) 
ページの画像の上にフーバーすると、セーブボタンが表示されます。 
エニーイメージ (Any image) 
ボタンをクリックすると、サイト上の任意のイメージを保存することができます。 
ワンイメージ (One image) 
ページ上の1つのイメージに表示するセーブボタンです。技術的なコーディングが求められます。 

本記事では、イメージフーバーの設置方法を紹介します。

BloggerにPinterest イメージフーバー セーブボタンを設置する手順

イメージフーバーボタンは、PinterestのロゴにSaveが入った通常タイプとPinterestのロゴのみの丸いタイプの2種類の形状が用意されています。

ボタンの形と大きさを選んでコードをコピーします。

デフォルト


<script async defer data-pin-hover="true" src="//assets.pinterest.com/js/pinit.js"></script>

デフォルト大

<script async defer data-pin-hover="true" data-pin-tall="true" src="//assets.pinterest.com/js/pinit.js"></script>

ロゴ(丸)


<script async defer data-pin-hover="true" data-pin-round="true" src="//assets.pinterest.com/js/pinit.js"></script>

ロゴ大

<script async defer data-pin-hover="true" data-pin-tall="true" data-pin-round="true" src="//assets.pinterest.com/js/pinit.js"></script>

ピンボタンのコードをBloggerサイトに設置

コピーしたPinterestのピンボタンのコードをBloggerのテンプレートを編集して、</body>の上に設置します。

Bloggerにログインして、ダッシュボードからテーマを選び、テンプレートプレビュー画面下の[HTMLの編集]を押します。


テンプレートのソースコードが表示されます。ソースコード内のどこかをクリックした後、コントロール+"F"(Macの場合は、コマンド+"F")で、"</body>"を検索します。

</body>の上(前)に、取得してコピーしたPinterest ピンボタンのコードを貼り付けます。


オレンジ色の[テーマを保存]ボタンを押して、テンプレートを保存します。

以上で作業完了です。このページの画像でもPinterestのピンが利用できるようになっています。

コメント

関連記事とスポンサーリンク

名前

AdSense,4,Blogger SEO,10,Blogger 活用法,18,Bloggerの基本機能と使い方,9,Bloggerの基本設定,7,MagOne,3,SNS,4,お勧め記事,14,お知らせ,1,
ltr
item
Blogger101@ブロギングライフ : Bloggerの画像にPinterestのピンボタンを表示させる方法
Bloggerの画像にPinterestのピンボタンを表示させる方法
Pinterestはネット上の気に入った画像を、アカウントのボードと呼ぶ分類毎にピン留めして保存、管理できるサービスです。Bloggerのページ内の画像にPinterest のピンボタン(Pin it ボタン)を表示させる設定手順を紹介します。
https://1.bp.blogspot.com/-oJA9bXyGxHc/WuU9_emYoeI/AAAAAAAACfI/42FZA0DLWu8DCfH5Dhlf4KkmZg3ek6uVACK4BGAYYCw/s640/Enable%2BPinterest%2Bpin%2Bbutton%2Bon%2BBlogger.png
https://1.bp.blogspot.com/-oJA9bXyGxHc/WuU9_emYoeI/AAAAAAAACfI/42FZA0DLWu8DCfH5Dhlf4KkmZg3ek6uVACK4BGAYYCw/s72-c/Enable%2BPinterest%2Bpin%2Bbutton%2Bon%2BBlogger.png
Blogger101@ブロギングライフ
https://blogger101.blogging-life.com/2018/04/blogger-pinterest-pin-button.html
https://blogger101.blogging-life.com/
https://blogger101.blogging-life.com/
https://blogger101.blogging-life.com/2018/04/blogger-pinterest-pin-button.html
true
6719002676499593843
UTF-8
Loaded All Posts Not found any posts 全てを見る さらに読む Reply Cancel reply Delete By Home PAGES POSTS View All 関連記事 ラベル アーカイブ SEARCH ALL POSTS お探しのページが見つかりませんでした。 Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock コードを全てコピー コードを全ての選択 全てのコードをクリップボードにコピーしました Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy