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

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

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

関連記事

pagespeed insight

STINGER8でwordpess構築しpagespeed insightで満点を取る方法 ⇒ カスタマイズの手順と方法を順番に解説

STINGER8とは STINGER8は国産wordpressテーマであり、SEOに強いことで知られる。 現在STINGER8の系統のテーマは4つあり、そのうち2つが無料テーマだ。 STINGER8は …

ブラウザスピード対決:IE 9 Beta、Firefox 4 Beta、Chrome(Crankshaft)、Opera 11 Beta

Amplify’d from www.lifehacker.jp ■起動および読&#1241 …

ブログの書き方

ブログを書く時の適切な文字数は何文字か

「ブログを書く時の適切な文字数は何文字ですか?」 勉強会で質問され、思わず詰まってしまった。   一般的には400字詰め原稿用紙で何枚、と言う言い方をするので、それからすると800文字とか1 …

MacBook Pro with Retina Display

MacBook Pro with Retina Displayを設定した3日の戦い

MacBook Pro with Retina Display MacBook Pro with Retina Displayを購入した。 macでは実に4年ぶりとなるリプレイスで、今回初めてtime …

Format Link

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

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