facebook タイムライン埋め込みのコード

　前回、Facebookタイムラインをサイドバーに埋め込んでみましたが、Facebookサイトで生成したコードについてもう少し詳しく説明しましょう。

Facebookから取得したコードは青で表示しています。

<iframe
IFRAMEを使います。IFRAMEはページの中に独立したフレームを作成し、フレームの中は独立したページのように扱うことができます。

src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2FLightningBrains%2F&tabs=timeline&width=250&height=300&small_header=true&adapt_container_width=true&hide_cover=false&show_facepile=false&appId"
IFRAMEの中に表示するソースを指定します。ココでは、Facebookのサーバーサイドアプリを起動して、IFRAMEに表示する内容をHTTPSで要求しています。内容的にはページプラグインのページで設定した内容になっています。幅=250、高さ=300、スモールヘッダ=true、プラグインコンテナの幅に合わせる=True、カバー写真を隠す=False、友だちの顔を表示=Falseとなっています。
このサーバーサイドアプリはPHPで作られていることがわかります。

width="250"
height="300"
ココは、IFRAME自身の幅と高さを指定します。
やはり、ページプラグインのページで設定した内容と同様の値が設定されます。

style="border:none;overflow:hidden"
scrolling="no"
frameborder="0"
allowtransparency="true"
このあたりも、IFRAME自身の属性を設定しています。
スタイルシートの指定、IFARMEのスクロールバーは非表示、枠線無し、フレームは透明（この場合背景のサイドバーの色となる）
IFRAMEのスクロールバーは非表示ですが、SRCで要求した表示コンテンツがスクロールバーを持っています。
>
IFRAME文の終わり。
ココには何も記述がありませんが、IFRAME非対応のブラウザに対して表示を行いたい場合にコードを記述してください。
</iframe>
IFRAMEタグの終了


今日はココまで！