Like Box ってなんじゃ？

facebookを使っているユーザーなら、なんとなくわかると思いますが、本ホームページの右側にあるパーツのことになります。LIKEは英語サイトでの”イイネ”にあたります。日本語でLIKEBOXは”いいね箱”てところでしょうか。FacebookPageで記載した記事やイイネしている人などを連動表示することが出来ます。

具体的には

iflameやhtml5,xfbmlまたはそのもののＵＲＬをアウトプットしてくれます。

それをホームページに貼り付けるだけ！って言うことを今回はやってみようと思います。

やってみよう！

１）最初にFacebookロクインがまだでしたら、自分のアカウントでログインしておきます。

２）まずはこちらのサイトにアクセス。そうすると以下のような入力窓が出来るので、黄色のマーカー部にFacebookページのＵＲＬをコピーして貼り付けます。そしてGetCodeを押します。

WidthはＢＯＸの横幅を意味し、HeightはＢＯＸの高さを意味しています。カラーは白背景か黒背景が選べます。その下にあるチェック項目は、イイネしている人を表示したり、記事を表示したりヘッダー部の有無や枠の表示の有無を選べます。お使いのホームページにあわせて、いじくってみてください。今回は以下のような設定にしてみました。

以下のような横幅が少ない場合、高さがないと下のほうまで表示されませんのでHeightで調整しましょう

３）あなたのプラグインコードが表示されます。

４つの種類が表示されます。あなたのＷＥＢに合わせてダウンロードしましょう。

今回は一番シンプルなifameを選択しました。ＩＤ登録されていない人はＩＤの登録が必要になるかと思います。その場合は表示されるエラーなどの指示に従って登録してください。

４）先ほど作ったソースをコピーします。

そして、図の赤のマーク部分に入れようと思います。筆者はドリームウエーバーというソフトウエアを使用しました。その他にいろんなホームページ製作ソフトウエアがあると思いますので、実施してみてください。

ソースコードの入れたい場所にエンターキーで適当に隙間を開けてあげます。

そこに、先ほど書き出したＬＩＫＥＢＯＸのソースコードをペーストで貼り付けます。

あとは、ホームページを保存して、サーバーにアップロードします。（このあたりの操作は出来るものとして説明しています。）

５）表示確認

サイズがいまいちだったので横幅を調整して、再アップします。この際に、ソースコードのサイズを書き換えました。

↓この数字を変更する。

ほら、こんどはピッタリンコ！きれいに収まりましたね。

所要時間：15分

初めての方でも簡単に設置できるかと思います。ぜひトライしてみてください。