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

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

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

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

This site uses Akismet to reduce spam. Learn how your comment data is processed.

関連記事

ソーシャルリンク

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

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

google+

google+ウィジットをwordpressにインストールする方法

google+ google+始まりました。 もう使ってます? 私もすっかりハマっているのだが、残念ながらまだスタートしたばかりということもあり、色々と不満な点も多々ある。 そんな不満な点の一つが、g …

Format Link

引用を効率化するため拡張機能Format Linkをgoogle Chromeに入れる ⇒ STINGER8設定その7

他のサイトからの引用の仕方 ブログを書く時に、他のサイトから引用することは多い。 この時に気をつけるべきなのは、SEO的な視点だ。 引用する時にblockquoteタグを使わないと、googleからマ …

cssアニメーション

cssのanimationで文字に変化を付ける ⇒ トップページの作り込み1

animationとは cssのanimationを使うことで簡単に動きを付けられる。 animationプロパティは、要素にキーフレームアニメーションを適用する場合に、 アニメーションについてまとめ …

ホーム画面に入れておきたいiPhoneアプリ

2011年にホーム画面入りした新しいiOSアプリ5選

あっという間に大晦日。 最近特に月日の経つのが早くなってしまい、焦り気味である。 一年を振り返ってみると、俺のiPhoneのホーム画面に入れているアプリも大きく様変わりしている。 今年最後のブログ更新 …