Box』の設置方法を紹介します。Box』は設置したブログやサイトからFacebookページの『いいね』をクリックすることができる外部サイトとFacebookページを連動させるソーシャルプラグインの1つです。Boxページにいきます。Boxページには下の画像のような入力欄が表示されていますので、画像の解説を参考に各入力欄の項目を埋めてください。URL制作したFacebookページのURLを入れてください。WidthLikeBoxの横幅を設定します。SchemeLikeBoxの背景の色を『light』か『dark』の2種類から選択します。Faces『いいね』を押してくれたユーザーのプロフィール写真の表示・非表示を選択します。Boxのボーダー色を変更することができます。6:StreamFacebookページのウォールに投稿したコメントが新着順に表示されます。チェックをはずすと表示されなくなります。Facebook』と書かれている箇所の表示・非表示を選択できます。Code』ボタンをクリックしてください。Code』ボタンをクリックすると画面上に『iframe』『XFBML』の2種類のコードが表示されます。今回は『iframe』のコードを使用します。Box』を表示したい場所にペーストしてください。Box』の高さの値です。横幅は設定することができたと思いますが高さは調節する項目欄がありませんでした。高さを調節する場合は、下画像の青線がひかれているheightの値を2箇所変更してからペーストしてください。以上で設定は完了です。Box』が表示されていたら完了です。Boxについて調べていたらデザイン自体をカスタマイズすることができるみたいです。私も今度試してみようと思いますが、もし興味がある方は下記のブログ記事に掲載されていたので参考にしてみてください。参考サイト:FacebookのLikebox(いいね!ボックス)を結構カスタマイズしちゃいたい。JAPANというサイトを作りました。このプロジェクトでは、日本各地の素晴らしい風景やイベントを動画で伝えていきたいと思ってます。トレーラーとして京都でのムービーをアップしましたのでよかったら見てください。※PCでご覧の方は是非4Kのフルスクリーンで見てください。ハヤシユタカ2001年、有限会社ムーニーワークスを設立。WEB制作の他、書籍執筆、セミナー講演、企業研修などを行う。クリエイター育成機関デジタルハリウッドでは1999年より講師として本科WEBデザイナーコースやデジタルデザインコースを担当。詳しいプロフィールはこちら最近書いた記事2016/10/23まずはここから始めよう!作業効率を早めるPhotoshopとIllustratorのショートカットまとめ(ファイル操作・コピペ・ズーム関連)2016/07/19Instagram(インスタグラム)の基本的な運用やマーケティング、活用事例の勉強に参考にしたサイトや記事まとめました。Facebookページ作成の際に参考にしたFBページまとめましたFacebookページで2つのブログの更新情報をチェック「HTML5でサイトをつくろう」と「WEBデザインクリップ」の更新情報やWEB制作に役立つ情報を更新しています。System」の使い方をまとめました。System」に画像対応などしてレスポンシブWEBサイトをつくろう(カスタマイズ編)最新のエントリー2016/10/23まずはここから始めよう!作業効率を早めるPhotoshopとIllustratorのショートカットまとめ(ファイル操作・コピペ・ズーム関連)2016/07/19Instagram(インスタグラム)の基本的な運用やマーケティング、活用事例の勉強に参考にしたサイトや記事まとめました。勉強しながら調べたサイト情報やサンプルの作成。そのほかweb制作に役立つ情報を共有し、情報交換できるサイトになればうれしいです。