「WordPressで学ぶPHP(3)関数編」を発売しました。
本書は「WordPressで学ぶPHP(1)変数・制御構造編」「WordPressで学ぶPHP(2)データ構造(配列・オブジェクト)編」の続編にあたり、PHP組み込みの関数や、独自の関数を作る方法などを解説します。
Kindle本で、定価400円です。
iframe版Facebookページの作成方法
先日、Facebookページ(のタブ)がiframe化され、スタティックFBMLが廃止されることを紹介しました。
そこで、iframe版のFacebookページを作る基本的な手順を紹介します。
1.Facebookページのアップグレード
iframe版のタブを使えるようにするには、まず対象のFacebookページをアップグレードします。
「管理しているFacebookページ」のページに接続すると、その右上に「ページをアップグレード」のボタンがあります。
このボタンをクリックすると、アップグレードするFacebookページを選ぶためのページに移動しますので、アップグレードしたいページで「アップグレード」のボタンをクリックします。
なお、2011年3月10日には、すべてのFacebookページが自動的にアップグレードされます。
2.アプリケーションの登録
iframe版Facebookページは、Facebookアプリケーションの一種となります。
したがって、iframe版Facebookページを作るには、まずアプリケーションの登録を行います。
まず、以前の記事で解説した通りの手順で、アプリケーションを登録します。
その後、アプリケーションの設定の「Facebook Integration」のページで、「Page Tabs」の箇所を以下のように設定します。
タブ名 | タブの名前を決めて入力します。 |
---|---|
Page Tab Type | 「iframe」を選びます。 なお、今後はFBMLは廃止される予定なので、この選択肢もなくなるものと思われます。 |
タブのURL | タブに対応するページのアドレスを決めて入力します。 なお、タブのURLは、キャンバスURLをベースに決めるようになっています。 |
3.アプリケーションをFacebookページに追加
アプリケーションの設定が終わったら、タブ追加先のFacebookページに、そのアプリケーションを追加します。
手順は以下の通りです。
- 「マイアプリ」のページで、iframe版Facebookページに対応するアプリケーションを選びます。
- 「Application Profile Page」のリンクをクリックします。
- アプリケーションのFacebookページが表示されます。
- 左端のメニューの中にある「自分のFacebookページに追加」のリンクをクリックします。
- 自分が管理しているFacebookページが一覧表示されますので、追加先のFacebookページのところで「Facebookページに追加」ボタンをクリックします。
4.タブ用のHTMLをサーバーにアップロードする
最後に、タブに対応するHTMLファイルを作成し、自分のサーバーにアップロードします。
ファイルのURLは、アプリケーションの「キャンバスページURL」の設定値の後に、「タブのURL」で入力した値を足したものになります。
たとえば、アプリケーションの設定で、「キャンバスページURL」と「タブのURL」に、以下のように入力したとします。
キャンバスページURL | http://www.○○○.com/facebook/ |
---|---|
タブのURL | (http://apps.facebook.com/□□□/)tab.html |
この場合、タブに対応するHTMLファイルは、アドレスが「http://www.○○○.com/facebook/tab.html」になるように、サーバーにアップロードします。
なお、タブは幅が520ピクセルになっています。
タブ用のHTMLを作る際にも、幅が520ピクセルに収まるように、スタイルシート等で適切にサイズを調整するようにします。
5.表示の確認
ここまでの作業が終わったら、タブの表示を確認します。
対象のFacebookページを開くと、画面左端に「ウォール」「基本データ」等の項目が縦に並んでいます。
その最後に、ここまでで追加したタブの名前が表示されます。
その名前をクリックすると、iframe内にHTMLの内容が表示されます。
なお、初めて表示するときには、何も表示されないことがあります。
その時は、ページをリロードすると表示されるようです。
Movable Typeのプラグイン集「MT Cloud Starter Kit」をぜひご利用ください
tomo
facebook初心者です。大変分かり易い説明でとても助かっています。
手順通りアプリを作成してタブ設定しました。ログイン状態では問題ないのですが、ログアウトするとサーバに置いたhtmlを読み込まなくなってしまいます。(つまりタブ内が真っ白)
上記手順の他に何か必要なのでしょうか?(PHPとか)
壱
>tomoさん
こんにちは。
アプリの設定ページには、それらしい設定項目はないようです。
ちなみに、ログアウトした状態だと、iframe自体が出力されませんでした。
facebookにフィードバックした方が良さそうです。
tomoから壱への返信
壱さま
iframe自体が出力されていなかったのですね!フィードバックしてみます。
早々の返信、ありがとうございました。
rie
すいません。質問なんですが、記述されてる通りアプリの登録をし、facebookページに追加したのですが、
Method Not Allowed The requested method POST is not allowed for the URL /sample/tab.html.と表記され、表示されません。どうしたら表示ができるでしょうか?
ちなみにサーバーはさくらサーバーです。
壱
>rieさん
こんにちは。
iframe版のページには、FacebookからPOSTプロトコルでデータが送信されます。
メッセージからすると、さくらサーバーは、.htmlのアドレスに対してのPOSTが禁止されているのではないかと思います。
.htmlではなく、.phpのファイルをサーバーに置くと良さそうです。
tomo
壱さま
何度もすみません。壱さんが作られた「ブログの記事」というタブはiframe版ですか?
ログアウト状態でも表示されているようなのですが、作り方は一緒ですか?
フィードバックはしてみたのですが、iframeが出力されなくても表示できるタブがあるというのは、
もしかしたらサーバも関係あるのでしょうか。ロリポップを使用しているのですが…
rieから壱への返信
壱様
返信ありがとうございます!
早速タブのURLをtab.phpに変更し、サーバーののほうもtab.phpに変更してみたところ、
今度は下記のサーバーエラーメッセージがでました。
Internal Server Error
The server encountered an internal error or misconfiguration and was unable to complete your request.
Please contact the server administrator, support@sakura.ad.jp and inform them of the time the error occurred, and anything you might have done that may have caused the error.
More information about this error may be available in the server error log.
さくらサーバーでは無理なのでしょうか?
何度も質問してすいません。
壱から壱への返信
>rieさん
こんにちは。
おそらく、ファイルのパーミッション設定が正しくないと思います。
以下のページを参照してください。
http://support.sakura.ad.jp/support/manual/rs/tech_cgi.shtml
壱からtomoへの返信
>tomoさん
こんにちは。
「ブログの記事」のタブは、スタティックFBMLで作っています。
tomo
壱さま
そうですか。何度もすみませんでした!ありがとうございます。
rieから壱への返信
壱様
ありがとうございます!!パーミッション設定をかえたら無事に表示されました!
丁寧に教えていただきありがとうございました!!
『脱サラプロブロガー』小澤竜太
facebookは最近始めたばかりだったので、これは助かります^^
taihei sato
素人なのですいません
サクラインターネットではhtmlは使用できないという事でしょうか?
壱からtaihei satoへの返信
>taihei satoさん
こんにちは。
5番以降のコメントにある通り、さくらインターネットでは、ファイルの中身がただのHTMLであっても、ファイルの拡張子を.phpにし、かつ適切なパーミッションを設定する必要があるようです。
taihei sato
早速のお返事ありがとうございます、感謝です。
matomegu
とても解りやすく、無事に自分の管理しているFacebookPageにiflameを組み込めました。
一つ質問なのですが、
例えば、同じFacebookpageや別に管理しているFacebookpageに、
もう1つオリジナルタブを追加したい場合は、
またアプリケーションの管理者として1から新しくアプリ自体を作成しなければいけないのでしょうか。
それとも、このタブはキャンバスURL下のindex.html、このタブはキャンバスURL下のstaff.html、、、
というように1つのアプリで複数のタブを作成できるのでしょうか。
初心者で申し訳ございません。
御回答いただけると助かります。
壱
>matomeguさん
こんにちは。
今のところ、1つひとつのタブごとにアプリケーションを登録する必要があるようです。
ちゃちゃ
こんにちは。
iFrameについて質問があります。
iFrameをマイページに追加をしたのですが、マイページに追加されません。何が問題なのでしょうか。
サーバーは忍者ホームページの無料レンタルサーバーを使用しています。
壱からちゃちゃへの返信
>ちゃちゃさん
こんにちは。
申し訳ありませんが、原因は不明です。