facebookファンページ用にiframeでwordpressと連携

フェイスブックのファンページを作っていて、自分のブログなどをfacebookに載せたいと思ったので下記にメモします!

おそらくwordpressを使っていて、facebookを触っている人であれば、
そのままwordpressのコンテンツをfacebook内に載せたいと思うと思います。

と、そこで僕もググってみたのですが、なかなかそれらしいものが見当たりませんでした。
これwordpressのテーマやプラグインで出せば結構需要あるかと思います!!(もしかしたら海外ですでにあるのかも。。汗)

私はプラグインやテーマを作るパワーが足りませんでしたので、
力技で、wordpressをfacebookファンページ内に表示した方法をメモります!

 

1.facebookでファンページを作る!


作る際ですが、ファンページの種類を間違えると、デフォルト表示ページが指定できなかったりします!?⇒参考https://matsudapress.com/?p=841

詳細は割愛します。

2.iframe用のfacebookアプリを用意する。
http://www.facebook.com/developers/

上記から「+Set Up New App」でアプリを用意できます。

アプリの名前を決めて

アプリの設定

ここで、facebookから閲覧しているをwordpress側から判別できるように簡単なGET引数を渡すように設定します。
「canvas URL」 + 「タブのURL」 でアクセスされるようなので、
canvasURL = 「http://deveroid.com」  ※ワードプレスのURL
タブのURL = 「?fb=facebook」 ※これはfacebookからのアクセスだよとwordpress側に判別できるように指定 (力技かっ!!)

たとえばワードプレスのURLが「http://deveroid.com 」の場合は

後は適宜設定をしアプリ完成させる。
その後下記の 「Application Profile page」をクリックし

facebook wordpress

次に「マイページに追加」

対象のファンページを選択し「facebookページに追加 」

とりあえずこれでアプリの設定は完了。

3.ファンページに戻り、アプリへのタブ追加設定&デフォルト表示設定をします。

facebook デフォルトページ タブ追加上記はタブとして先ほど作ったアプリを登録します。

facebook デフォルトページ次に、こんどははじめてファンページに訪れた際にデフォルトで表示されるように先ほど作ったタブを選択。
これでファンページの設定も完了。

一度ファンページに入って、上記で作ったタブを選択してみてくださいそうするとwordpressのコンテンツが画面中央にiframeとして表示されるはずです。

ここで思うのが!ファンページ用にwordpressのコンテンツを調整したい!と思うかと思いますw(僕だけかw)


4.そこで、後はwordpress側でちょっとだけ調整してあげます。

例えばこれを

matusdapres
こういう感じにしたい場合↓

matsudapress in facebook

ただ単位表示すると、幅がたりなかったりデザインが合わないので、ここは、先ほどアプリで設定した
「?fb=facebook」を利用します。

wordpressのテーマによりやり方がことなるかと思いますが、テーマの設定部分でGETの?fb=facebook部分を判定して、
facebookならこのテンプレート。
通常ならそのままという制御を加えます。
僕の例だとこんな感じです。

・facebookファンページ表示用テンプレートを追加(元のindexテンプレートをコピペ等)
・ヘッダテンプレートなど、最初に読み込むテンプレートに先頭に下記PHPスクリプトと追加。

/*******  facebook ファンページ内用 ******/
if($_GET["fb"] == "facebook") {
//facebook iframe用テンプレートを読み込み
get_template_part( 'facebook_iframe' );
exit();
}

これで、指定したfacebook_iframeというテンプレートをfacebookファンページ用に読み込んでくれます。

あとは追加したテンプレートをファンページように整形するとそれっぽくなります!

今回私が作ったファンページはコンナ感じです。↓↓

MatsudaPress

また、ここでくせ者なのが、iframeで表示しているためリンクをtarget=”_blank”(新しいウィンドウを開く)にしていないと、
きれいにwordpressの表示がうまくいかないケースがある。
すくなくとも僕はそうだったので、ここはhtmlのbaseですべて新しいウィンドウで開くの設定して、
自分のwordpressへの誘導することにしました。
今後、facebookがどんどんはやる前に、
このwordpressとfacebookファンページの連携を、何かしら形にできるといいかもしれません!(汗
私はマネタイズ能力がないので他力本願でww

 

facebookファンページのデフォルト表示コンテンツ設定のくせをメモ

facebookのファンページを作っていて、
ファンページのデフォルトページをアプリやFBML(FBMLは3月10日までだけど)などに指定したい時がある。

ファンページ

matsudapress

 

そんなとき、下記画面の「デフォルトで表示するタブ」というところでファンじゃないユーザーへの表示コンテンツを指定できるが、
なぜかできないケースがある。

結構色々ためした結果、ファンページを作る際に、ファンページの種類を選べるが下記を選ぶと「デフォルトで表示するタブ」が表示されないようです。。(たぶん

上記のコミュニティーをえらぶとNGだったので、芸能・たんためでファンページを作ったところ
「デフォルトで表示するタブ」が無事選択できました。
ファンページの種類によるってこと・・でしょうか。。

 

もう1つひっかかりやすいのが、デフォルトページなどを、iframeアプリなどで用意した場合に、なぜがタブが追加できないケースある。
おそらくその場合は、アプリ設定の下記図のタグURLを設定していないからかも・・・!ここにindex.htmlやindex.phpなど何かしら値をいれておかないとタブとして設定ができませんでした。

 

といった感じファンページを作る上で、迷った点をメモしておきます。
主観的なメモなので、間違っている部分もあるかもしれません。

facebookのセミナーに参加してきた

フェイスブック 若き天才の野望 (5億人をつなぐソーシャルネットワークはこう生まれた)

http://www.facebook.com/search.php?q=facebook%E3%82%84%E3%82%8D%E3%81%86&init=quick&tas=0.7318484897310773&ref=ts#!/socialapp

今話題のfacebookに詳しく知りたく、facebookセミナーに参加してきた。。
正直な感想をいうと、そんなに参考にならなかったw(期待が大きかったのかな笑)

ただ、これからfacebookでファンページやアプリを作る際に下記は勉強になりました。

・最近、FBMLはfacebookは推奨しない
なぜなら→javascript SDKなどでかわりに利用できる
なぜなら→FBMLは今後アップデートされない

あとは、お金をはらってセミナーに行っている方に悪いので、割愛。 😎

あと、日本だとシステムは100%であるべき的な認識があるけど、いまの確実性よりスピードにウエイトをおかないと、
すぐコピペでやられてしまうので、スピードスピードでどんどんアップデートしていくといいらしい。

・・あとセミナーで簡易アプリの実演があったけど、その時にアプリが表示されない現象があったけど、
自分もアプリをためしにアップしてみたら、ときどきに同じエラー画面になる。
あれってfacebook上の問題なのかな??(だとすると不安定だ。。)

↓この試しにいれたアプリだけど、たまにfacebookのヘッダー画像だけのこってエラーになるときがある。(自分のサーバーのせいか!?苦笑)

http://apps.facebook.com/shootgame/?ref=bookmarks&count=0

facebook api FQLでlike情報引き出しメモ

映画でも話題になっている世界最大コミュfacebookの勉強をしてて、
ご存知の1日30億おされているという「いいね」ボタンの情報引き出しがしたいとうことで、

方法を下記にメモします。
日本語ドキュメントがなさすぎて、英語ができないとエンジニアもむずかしい時代になりましたね。。

※ちなみに下記情報まだ途中なので、大分中途半端です。

FQLのテーブル・カラム情報は下記より参照できます。
http://developers.facebook.com/docs/reference/fql/like/

また、FQLの試し打ちは下記からできます。
http://developers.facebook.com/docs/reference/rest/fql.query

■user_idからlikeしたurlをおう?fql

select user_id from like where object_id in(select id from object_url where url="http://apps.facebook.com/sightspacestation/")
サブクエリも使えることにびっくりです、、あとは、実行してみるとuser_idがはいっているので、ここからユーザー情報などを引っ張ればOKという感じです。
試しにjavascriptで実行するとこんな感じ。
FB.api(
  {
    method: 'fql.query',
    query: '
select url from object_url where id in(select object_id from like where user_id=100000296844344)'
  },
  function(response) {
    alert(response.length);
    for (var i = 0; i < response.length; i++) {
        alert('url' + response[i].url);
    }
  }
);

追記メモ:
逆にlikeしたurlからuser_idを出そうとすると、空で返ってくるケースがある、object_urlテーブルからのobject_idは、photoなのかlinkなのか、
ただしいタイプを渡してあげる必要がありそうですが、それを正しくやった上でも空になるケースがある。。。どなたかその原因を教えていただけると幸いです。何かファンページ内のリンクしか返さないとか制約があるのかなと気になっております。。