HOME   »   ブログ運営  »  Facebookのソーシャルプラグイン(Like Box)をFC2ブログのサイドバーに設置する方法
RSSフィード
前回の記事(ブログ用に、実名非表示のFacebookページを作成した)で書いたように、ブログ用のFacebookページを作成しました。

Like-Box
▲そこで、Facebookページを作成した事を紹介するために、ブログ(PC)のサイドバーに、上記のようなFacebookボックス「Like Box」を設置したので、その手順を残しておこうと思います。

スポンサーリンク

Facebookのソーシャルプラグイン(Like Box)をFC2ブログのサイドバーに設置する方法

Facebookのソーシャルプラグイン(Like Box)をブログに設置するにあたって、以下の記事を参考にさせていただきました。スクリーンショットが豊富で非常に参考になりました。多少仕様が異なることもありましたので、手順を記しておこうと思います。

まずは、Like Box作成ページへアクセスします。
https://developers.facebook.com/docs/plugins/like-box-for-pages/

Facebookページ
▲そして、上記の空欄を埋めます。
  • Facebook Page URL(Facebookページを作成した時に決めたURL)
  • Width(横幅)
  • Height(縦幅)
  • Color Scheme(色はlight、darkから選択)
4つの項目を入力し終わったら、Get Codeを選択しました。

Facebookページ
▲すると、①、②のコードが生成されます。

①は、bodyタグの直後に記述しました。また、②は、Like Boxを設置したい場所(PC版のサイドバー)に記述しました。

FC2ブログの場合で具体的に説明します。

①のコード

Facebookページ
▲FC2ブログの「設定」→「テンプレートの設定」を選択します。

Facebookページ
▲そして、PCテンプレートのHTML編集画面において、bodyタグの直後に①のコードを貼付けました。

②のコード

Facebookページ
▲FC2ブログの「設定」→「プラグインの設定」を選択します。

Facebookページ
▲そして、PC用の「公式プラグイン追加」を選択します。

Facebookページ
▲その中で、「拡張プラグイン」の「フリーエリア」を追加します。

Facebookページ
▲そして、図のようにフリーエリア内容の変更という場所に、②のコードを貼付けます。タイトルは適宜入れてください。入力し終わったら、一番下の「追加」を選択します。

以上で終了です。

Like-Box
▲このような感じで、PC版のサイドバーに表示されるようになりました。

次回はFacebookに更新情報を流すようにする

Facebookページは作った。ブログにもLike Boxを作った。準備はいいか。

答えは「いいえ」

このままだとFacebookページにはブログの更新情報が流れません。

というわけで、次回はFacebookページにブログの更新情報を通知する設定を書こうと思います。

関連記事

FC2ブログ(有料版)でFTPの設定をする方法

iPhoneからブログ更新通知をFacebookページへ投稿する方法(IFTTT、Postmania、MS2使用)

ブログ用に、実名非表示のFacebookページを作成した

「公式Twitterアプリでこの記事をつぶやく」ソーシャルボタンの作成&設置方法

スポンサーリンク

過去記事セレクション

当ブログの過去記事の中で、オススメの記事25個をまとめたページを作成しました。500記事を超えた中から厳選していますので、どれもオススメできる記事となっています。もしも興味がありましたら、是非一度ご覧ください。
公開記事が500を超えたので、過去記事の中からオススメを25個セレクトしてみました



▼このカテゴリの最新記事
Relate Entry
Entry TAG
Facebook  
Comment
Trackback
Comment form
スポンサードリンク
楽天
2014年7月現在使用しているブログ用iPhoneアプリ16個
iPhoneホーム画面
人気エントリー
先月の人気記事
第1位(→0)
iPhoneにある写真(画像)をセブンイレブンで現像する方法

第2位(→4)
総計290個以上掲載!iPhoneアプリのURLスキーム一覧

第3位(↗︎2)
【iPhone】秘密の質問を忘れたのでAppleのサポートに電話してリセットしてもらった

第4位(↘︎2)
理系大学生なら絶対覚えておくべきWordの数式のショートカット

第5位(↘︎1)
iPhoneのパスコードを10回間違えると再入力までに60分必要

第6位(↘︎1)
SoftbankのiPhone4s→iPhone5sへ機種変更した時の料金試算

第7位(↗︎3)
iPhoneの画面を録画できるMac・Windowsアプリ「Reflector」のインストール方法・使い方

第8位(↘︎4)
iPhone/iPadのパスコードロックを10回間違えた時のデータ消去機能を実行してみた

第9位(↗︎4)
xRecというiPhone画面を録画できるアプリが再び登場!

第10位(↘︎2)
【iPhone】秘密の質問を忘れて間違えすぎるとApple IDが8時間ロックされる

第11位(→0)
iPhoneの写真を1枚5円で現像出来るネットプリントジャパン!

第12位(→0)
パラメータ有りiPhoneアプリのURLスキーム一覧

第13位(↗︎30)
青春18切符で東京から大阪へ~東海道線を突っ走る旅(1日目)

第14位(↗︎55)
青春18切符を利用した旅行時に活躍したiPhoneアプリのまとめ

第15位(↗︎16)
セリアでiPhoneの防水ケースを購入!風呂場で使うときに便利!

全記事表示リンク
サイト内検索
プロフィール

nasimeya

Author:nasimeya
Twitterアカウント→@nasimeya
iPhone5S/iPad3/iPad mini/MacBookAir13inch/Nexus5を現在所持しており、アプリとか紹介を主にしています。LAMYなど文房具もちょくちょく。ブログは楽しく書くことを心掛けております。

日にの観察ブログの更新は停止しています。

新しいブログはこちら⇒なしめやブログ(http://nasimeyablog.com

2013年5月現在利用している主力iPhoneアプリ26個
iPhoneホーム画面
2013年5月現在利用しているブログ用iPhoneアプリ13個
iPhoneホーム画面
iPad mini用おすすめアプリ8選

PAGE TOP