アメブロのサイドバーにFacebookページの顔写真付き「いいね!」ボタンを設置する方法

http://developers.facebook.com/docs/reference/plugins/like-box/

 

アメブロのヘッダー画像を自分だけのオリジナル画像に変えたいという方はこちら

 

アメブロのサイドバーにFacebookページのいいねボタンを設置してみます。

右のサイドバーにご注目下さい。

アメブロのサイドバーにFacebookページの顔写真付き「いいね!」ボタンを設置

 

Facebookページの「いいね!」ボタンが表示されます。

さらに、過去にいいね!した人の顔写真がランダムに表示される他、

Facebookページのタイムラインの情報も自動で更新されていきます。

アメブロのサイドバーにFacebookページの顔写真付き「いいね!」ボタンを設置

 

それではカスタマイズ開始。

まずはこちらのサイトへアクセスします。

http://developers.facebook.com/docs/reference/plugins/like-box/

http://developers.facebook.com/docs/reference/plugins/like-box/

 

各所を編集してきます。

アメブロのサイドバーに設置する場合、設置する場所の横幅は180pxか300pxになります。

アメブロのサイドバーにFacebookページの顔写真付き「いいね!」ボタンを設置

 

「このスクリプトは次のアプリのアプリIDを使用します。」というところで使用するアプリを選択。

アメブロのサイドバーにFacebookページの顔写真付き「いいね!」ボタンを設置

 

そして「IFRAME」を選択し、表示されたコードを全てコピーします。

アメブロのサイドバーにFacebookページの顔写真付き「いいね!」ボタンを設置

 

それでは次にアメブロへログインし、

「ブログ管理」⇒「サイドバー」⇒「プラグインの追加」とクリック。

そして「フリープラグイン」タブに切り替えて、先ほどコピーしたコードを貼り付けて保存します。

アメブロのサイドバーにFacebookページの顔写真付き「いいね!」ボタンを設置

 

そして最後に「ブログ管理」⇒「サイドバー」⇒「配置設定」とクリック。

「フリープラグイン」をドラッグ&ドロップでサイドバーに配置します。

 

これでアメブロのサイドバーにFacebookページのいいね!ボタンが設置されます。

人気ブログランキングで今何位?

アメブロのヘッダー画像を無料で作成

  • このエントリーをはてなブックマークに追加

【PR】話題のラインスタンプを自分で作って販売する方法

ブログランキング応援していただけると嬉しいです↓

にほんブログ村 釣りブログ バスフィッシングへ にほんブログ村 釣りブログ 東海釣行記へ にほんブログ村 釣りブログへ

この記事の著者

kazushi釣りと生き物をこよなく愛するWEBデザイナー

釣りと焼酎が好きなWEBデザイナー。夜な夜な真っ暗な部屋で水槽を眺めながら呑んでいます。最近のマイブームはハンドメイドルアー制作。琵琶湖のほとりでひっそりとWEB制作事務所を営んでいます。

この著者の最新の記事

関連記事

カテゴリー

アーカイブ

インスタやってます

ページ上部へ戻る