アミアンインターナショナル

貴社の売り上げアップをとことん支援します。オンラインショップ専門コンサルタント

web動向 ソーシャル フェイスブック 新着情報

Facebookページのiframe化にチャレンジ

投稿日:2011年3月6日 更新日:

Facebookでビジネスをするのに欠かせない独自タブを作るには、従来はstaticFBMLを使ってきた。

これはこれで簡便で使いやすかったのだが、3/10で使用できなくなる。

これからはstaticFBMLに代わるiframeをつかったタブを作らなければならないらしい。

フェイスブック

このタブを作るには、”Homepage”というアプリを使う方法もあるようだ。

“Homepage”というアプリを使えば簡単にiFrameが設置できます。

しかし今回は開発者登録をしてアプリとして利用する方法をとった。

まあ王道ですな。

そこで、さっそくチャレンジしてみた。

アプリ登録

iframeを使うには、まずアプリ登録をしなければならない。

この方法には既にたくさんの解説がある。

今回はこちらの解説を参考にさせてもらった。

FacebookページにiFrameを組み込もう

この通りに開発者登録をして、アプリ登録をした。

フレームを表示させてみる

ページを作成して自社ホームページにアップ。

おぉっ、動作している!

が~~~~~!

スクロールバーが表示されているのだ。

フレームボーダーを非表示にする

どうやら従来通りの520px幅で作ると、iframe表示の場合は幅が大きすぎて駄目なようだ。

いろいろ試してみると、500px幅なら大丈夫っぽい。

しかし、縦のスクロールバーは消せない。

一応、iFrameサイズはauto-resizeにしてあるんだけどなあ。

で、いろいろ調べてみると、javascriptで回避できるようだ。

iframe版 Facebookページのスクロールバーを消す方法

試してみると、見事にスクロールバーは消えた。

ありがとう!!

バグに注意

出来上がったタブだが、残念ながら今のところいくつかバグが残っているようだ。

Facebookページのiframe形式タブに切り替える場合は、バグに注意!

特に痛いのは、ログインしていないと表示されないこと。

この辺は、いずれ解決するだろうけどね。

 

 

 

-web動向, ソーシャル, フェイスブック, 新着情報
-

執筆者:


comment

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

foursquare

foursquareのiPhoneアプリからfacebookにポストできなくなったよ

位置情報サービスとして多くの利用者が使っているfoursquareだが、1ヶ月前くらいからfacebookにポストできなくなった。 いろいろ試してみると、どうやら認証方式が変わったのに自動対応していな …

コンテンツ

説明文の加筆 ⇒ トップページの作り込み6

コンテンツを増やす コンテンツを加える。 600px幅で表示。 <div id=”amiens-05″ class=”amiens-black”> <div class=”amien …

jetpack関連記事

jetpack関連記事とwordpress関連記事タイトルの修飾 ⇒ STINGER8設定その13

修飾を合わせる コンテンツエリアを見ると、jetpack関連記事とwordpress関連記事タイトルが手つかずになっている。 これをH2と同じフォーマットにする。 ついでに全てレスポンシブ対応にする。 …

ソーシャルリンク

ソーシャルアイコン追加-サイドバーメニューの成形(2) ⇒ STINGER8設定その4

ソーシャルアイコン追加 Facebookなどをやっていると、ホームページから誘導したくなる。 そこでリンク用のアイコンを表示させることにした。 いわいるソーシャルアイコンというやつだ。 随分前にホーム …

iphone4s

たった10秒でiPhoneで電話ができないトラブルを解決する方法

iPhone4Sにしてから、実に快適。かつ写真はキレイだしiCloudは便利だし、言うことない! と思っていたら、iOS5.0.1にアップグレードした際に電話の発信も着信も不可能になるというトラブルが …