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

アメブロで書いた記事に［Pin It］ボタンを貼り付ける方法 先日開催した「ピンタレストを楽しむための勉強会」でアメブロで書いた記事に［Pin It］ボタンを貼り付ける方法の話題で盛り上がりました。 アメブロは禁止タグがあり、［Pin It］を簡単に貼り付けることができないようです。

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

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

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

［Pin It］ボタンの設定

（１）：Pin It Button を選択。 （２）：Pin Count で One Image を選択。 （３）：アメブロで書いた記事（Pin It を貼り付けるページ）のURLを記入。 （４）：（３）↑の記事内にある画像（ピンタレストで投稿して欲しい画像）のURLを記入。 （５）：画像の説明テキストを記入。 （６）：［Preview］ボタンをクリック。

JavaScriptのコピー

（７）：Advanced を選択。 （８）：スクリプトをコピー。

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

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

（９）：フリープラグイン追加ページを開く。 （10）：フリープラグインのタブを開く。 （11）：コピーしていたスクリプトを貼り付ける。（他の記述を消してしまわないように注意） （12）：保存

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

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

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

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

（14）：HTML表示にする。 （15）：記事内に貼り付けた画像の下に（13）でコピーした Tag を貼り付けで記事を公開する。

確認してみよう

［Pin It］ボタンをクリックしてみよう

今日も元気に楽しく♪]]>