FacebookページとレスポンシブなLike Boxの作成方法

Twitter・はてなブックマークと並んで影響力があるSNSといえばFacebookです。実名性ということもありコメントが荒れにくいというところもメリットですね。
Facebookをもっと活用するために「Facebookページ」とそれをブログ内でアピールするための「Like Box」を作成する方法を紹介します。

sponsored link

Facebookページを作成する

Facebookにアクセスして画面上部のメニューバーから[ページを作成]をクリックします。
ページを作成する

[ブランドまたは製品]をクリックします。
ブランドまたは製品を選択する

[カテゴリ]はウェブサイトを選択、[ブランドまたは製品名]にはブログのタイトルを入力します。
カテゴリとブログ名を入力する
Facebookページの名称にはいくつかルールがあります。詳しくは下記のリンク[Facebookページの名称]を参照してください。

基本情報としてブログの簡単な説明とURLを入力します。
[実在する企業、プロダクト、ブランドですか?]は会社やモノとしては存在しないので[いいえ]にしておきます。
Facebookウェブアドレスはドメインといっしょにしておくとよさそうです。(Like Boxを作る時に必要になります)
説明とURLを入力します

プロフィール写真をアップロードします。
プロフィール画像を設定します

Facebookの個人ページの[お気に入り]に登録できます。
お気に入りに追加する

広告を作成できますが[スキップ]でいいでしょう。
広告は作成しない

これでFacebookページの作成が完了しました。カバー写真を追加したりカスタマイズしていきましょう!
Facebookページが作成できました

Like Boxを作成する

Facebookページにいいね!してもらうためにブログに設置するブログパーツ「Like Box」を作成しましょう。
下記のリンクにアクセスします。

Likeboxを作成する

  • Facebook Page URL
  • Width
  • Height
  • Color Scheme
  • Show Friends’ Faces
  • Show Posts
  • Show Header
  • Show Border

URLには先ほど設定したFacebookウェブアドレスを入力します。
widthは横幅のことですがウィンドウ幅によって可変させたいので入力しません。heightは高さのことです。僕は300pxにしました。入力後クリックやenterを押すとプレビューできるので表示を確認しながら設定してみてください。

Color Schemeは[light]と[dark]から選択できますがlightがベターでしょう。headerを非表示にするとほとんど違いは分からないと思います。(Facebookもチェックの箇所です)
borderは枠線の有無です。

Friends’ Facesはいいね!してくれたひとのプロフィール写真を表示します。PostsはFacebookページのタイムラインを表示します。Facesの方が安心感がありますね。
[Get Code]でコードを取得しましょう。

取得するのはHTML5です。2つコードが表示されますが、例えばサイドバーに設置するなら上のコードに続いて下のコードを貼り付ければOKです。
コードを貼り付けます

さいごにLike Boxをウィンドウ幅で可変させるためにCSSを追加しておきます。

ウィンドウ幅を動かしてみると高さは変わりませんが横幅だけ常に100%になっているはずです。
レスポンシブなLikebox


というわけでFacebookページ開設しておりますのでぜひともいいね!をよろしくお願いします。
いまのところRSS的な使い方しかできてないんですが、ブログとは別のコンテンツとか交流の場とかまた違った使い方をしたいかなと思っています。