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

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

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 を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

Mavericksにアップデートすると空き容量が増える?

Mavericksにアップデートした Mac OS X の新しいバージョン「Mavericks」が出てからというもの、アップデートするべきか悩むことが多かった。 本来であればコンサルタントという立場も …

ツイッター鯨

twitterは死んだのか?

ツイッター大丈夫? 友人と話をしている際に、「最近ツイッターが元気が無いのではないか?」という意見が出た。 どうやら、最近はフォロワー数の伸びに以前のような勢いが感じられないらしい。 また別の友人の意 …

iPhone OS 4の「iAd」はモバイル広告を変えるか?

Amplify’d from ascii.jp AppleのiAd広告配信、電通が日本で展開へ iPhone OS 4の「iAd」はモバイル広告を変えるか? アップルが2010年初頭、モバイル広告の米 …

parallax

パララックス効果で画像を動かす ⇒ トップページの作り込み2

パララックス効果とは パララックス効果は、2つの要素を別々に動かすことで視覚的な効果を与えることだ。 iPhoneを動かすと、iPhoneのホーム画面上でアプリのアイコンが微妙にずれる、あの効果だ。 …

ファストエバー

iPhoneの神アプリをおすすめ【2】FastEver

私のiPhoneのホーム画面1画面目に鎮座する神アプリを紹介するシリーズ。 1画面目のヘビーに使い込んでいるiPhoneアプリ 第2回目は、FastEverを紹介する。 FastEver 230円 f …