何気ない日常の残し方

日々の暮らしの中にある何気ない日常風景を残しませんか

ハウツー SNS

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

投稿日:2013年3月29日 更新日:

-, ,

この記事は2013年3月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 今日も元気に楽しく♪]]>

メンバー募集中 📷

日常カメラサークル @note

 日常カメラサークル|何気ない日常の残し方
 日常カメラサークル|趣旨活動内容

FUJIFILM X ギャラリー @facebook|メンバー約1,500人

富士フイルムXシリーズのミラーレス一眼カメラユーザーによるフォトギャラリーです
 FUJIFILM X ギャラリー

-ハウツー, SNS
-, ,

Copyright© 何気ない日常の残し方 , 2021 All Rights Reserved.