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

ストックフォト写真販売で副業収入を得るクリエイティブライフハック。写真とオンラインメディア(インスタグラム、WordPressブログ、ハンドメイドマーケット)の話。

オンラインメディア

アメブロで書いた記事に[Pin It]ボタンを貼り付ける方法

投稿日:2013/03/29 更新日:

アメブロで書いた記事に[Pin It]ボタンを貼り付ける方法

先日開催した「ピンタレストを楽しむための勉強会」でアメブロで書いた記事に[Pin It]ボタンを貼り付ける方法の話題で盛り上がりました。

スポンサーリンク

アメブロは禁止タグがあり、[Pin It]を簡単に貼り付けることができないようです。

記事

この↑アメブロ投稿記事の写真の下に[Pin It]ボタンを付けてみましょう。

アメブロのフリープラグインに[Pin It]用スクリプトを追加する

まずはピンタレストの Button and Widget Builder ページを開きます。

[Pin It]ボタンの設定

Button and Widget Builder

(1):Pin It Button を選択。

(2):Pin Count で One Image を選択。

(3):アメブロで書いた記事(Pin It を貼り付けるページ)のURLを記入。

(4):(3)↑の記事内にある画像(ピンタレストで投稿して欲しい画像)のURLを記入。

(5):画像の説明テキストを記入。

(6):[Preview]ボタンをクリック。

JavaScriptのコピー

Load the JavaScript

(7):Advanced を選択。

(8):スクリプトをコピー。

コピーしたスクリプトをアメブロのフリープラグインに追加

※フリープラグインへの追加は毎回ではなく、はじめて[Pin It]を貼り付ける時だけです。

フリープラグイン

(9):フリープラグイン追加ページを開く。

(10):フリープラグインのタブを開く。

(11):コピーしていたスクリプトを貼り付ける。(他の記述を消してしまわないように注意)

(12):保存

アメブロの記事に[Pin It]ボタンを貼り付ける

ピンタレストの[Pin It]ボタン Tagをコピーする。

Insert the Link

(13):ピンタレストのページに戻って Insert the Link にある Tag をコピーする。

アメブロの記事に[Pin It]ボタンを貼り付ける

投稿画面

(14):HTML表示にする。

(15):記事内に貼り付けた画像の下に(13)でコピーした Tag を貼り付けで記事を公開する。

確認してみよう

記事確認

[Pin It]ボタンをクリックしてみよう

Pin It

今日も元気に楽しく♪

 

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

最新情報をお届けします

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

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

運営者プロフィール

畑本伸一

icon-maleSINTO Hatamoto (畑本伸一)
1969年 大阪市生まれ 京都市在住。
写真作家、ストックフォトクリエイター、ハンドメイド作家向け販促ツール制作販売、ハンドメイド作家向けの写真&オンラインメディア活用アドバイザー、セミナー講師。
1990年代:グラフィックデザイナー。新聞・雑誌の広告デザイン制作。写真を活かしたデザインを得意とし新聞広告、TVCM、ポスター各部門で広告賞金賞。「SINTO」という名前で写真・オブジェ・インスタレーションなど作家活動開始。2000年代:Webサイト制作の個人事業開始、グラフィック社発行「Web年鑑」掲載。2010年代:海外で流行の写真SNS「ピンタレスト」にいち早く関心を持ち“写真の今”を研究。「Pinterestビジネス講座(翔泳社出版)」共著。
icon-arrow-circle-right 詳しいプロフィール

共著

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

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