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

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

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

関連記事

gifアニメーション

燃えるgifアニメーション文字の作成 ⇒ トップページの作り込み5

gifアニメーションとは 最近はSNSブームの関係でgifアニメーションが見直されているようだ。 基本的に動画ファイルではなく画像ファイルの拡張なので、動作やサポート状況は画像ファイルに準じ、これが長 …

メダルの背後にiPadあり 世界バレーで眞鍋監督が使っていたアプリの正体

Amplify’d from www.itmedia.co.jp  チームを指揮&#123 …

コンテンツ

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

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

google+

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

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

第100回二科展

弊社専属デザイナーが第100回二科展で第100回記念賞、および会友推挙を受賞しました

弊社専属デザイナーが第100回二科展で第100回記念賞、および会友推挙を受賞しました。 弊社のデザインにおけるレベルの高さを証明する受賞であると、謹んでご報告申し上げます。