アメブロで書いた記事に[Pin It]ボタンを貼り付ける方法
先日開催した「ピンタレストを楽しむための勉強会」でアメブロで書いた記事に[Pin It]ボタンを貼り付ける方法の話題で盛り上がりました。
アメブロは禁止タグがあり、[Pin It]を簡単に貼り付けることができないようです。
![記事](https://htmt41.com/wp-content/uploads/8535fe65f5602011690f32ffa88deccb.png)
この↑アメブロ投稿記事の写真の下に[Pin It]ボタンを付けてみましょう。
アメブロのフリープラグインに[Pin It]用スクリプトを追加する
まずはピンタレストの
Button and Widget Builder ページを開きます。
[Pin It]ボタンの設定
![Button and Widget Builder](https://htmt41.com/wp-content/uploads/AmebloPinItButton_01.png)
(1):Pin It Button を選択。
(2):Pin Count で One Image を選択。
(3):アメブロで書いた記事(Pin It を貼り付けるページ)のURLを記入。
(4):(3)↑の記事内にある画像(ピンタレストで投稿して欲しい画像)のURLを記入。
(5):画像の説明テキストを記入。
(6):[Preview]ボタンをクリック。
JavaScriptのコピー
![Load the JavaScript](https://htmt41.com/wp-content/uploads/AmebloPinItButton_03.png)
(7):Advanced を選択。
(8):スクリプトをコピー。
コピーしたスクリプトをアメブロのフリープラグインに追加
※フリープラグインへの追加は毎回ではなく、はじめて[Pin It]を貼り付ける時だけです。
![フリープラグイン](https://htmt41.com/wp-content/uploads/freeplugin-673x690.png)
(9):
フリープラグイン追加ページを開く。
(10):フリープラグインのタブを開く。
(11):コピーしていたスクリプトを貼り付ける。(他の記述を消してしまわないように注意)
(12):保存
アメブロの記事に[Pin It]ボタンを貼り付ける
ピンタレストの[Pin It]ボタン Tagをコピーする。
![Insert the Link](https://htmt41.com/wp-content/uploads/AmebloPinItButton_02.png)
(13):ピンタレストのページに戻って Insert the Link にある Tag をコピーする。
アメブロの記事に[Pin It]ボタンを貼り付ける
![投稿画面](https://htmt41.com/wp-content/uploads/entry.png)
(14):HTML表示にする。
(15):記事内に貼り付けた画像の下に(13)でコピーした Tag を貼り付けで記事を公開する。
確認してみよう
![記事確認](https://htmt41.com/wp-content/uploads/32a4772e9d1e2162063903ce4d155a3e.png)
[Pin It]ボタンをクリックしてみよう
![Pin It](https://htmt41.com/wp-content/uploads/0328_Pin-It-690x268.png)
今日も元気に楽しく♪]]>