2011/3/13

FacebookページにWordPressで生成したページを埋め込む(FacebookページをWordPressの管理画面から更新)

WordPressでページを更新すると、Facebookページで登録したページを更新できるフローを作りました。まずFacebookアプリを作って、iframeで別サーバのページ読み込めるようにしてください。

ASCII.jp:iframe対応!初めてのFacebookページの作り方|今日からできるFacebookファンページ制作&運用ガイド

でWordPressでソリッドなテンプレートを作ります。僕はこんな感じにしました。

Facebook用テンプレート

/**
 * Template Name: Facebook
 */

<link rel="stylesheet" href=" bloginfo('url'); /css/facebook.css" type="text/css" />
<div style="font-size:10pt;">
<div style="margin-bottom:20px;" class="clearfix">
<span style="float:left;margin-right:20px;line-height:24px;">
<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="kosuk" data-lang="ja">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</span>
<span style="float:left;margin-right:20px;line-height:24px;">
<iframe src="http://www.facebook.com/plugins/like.php?href= the_permalink(); &amp;layout=standard&amp;show_faces=false&amp;width=300&amp;action=like&amp;colorscheme=light&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:24px;" allowTransparency="true"></iframe>
</span>
</div>
 if (have_posts()) : while (have_posts()) : the_post();
 the_content(__('Read more'));<div style="clear:both;"></div>
 endwhile;  endif;
</div>

Facebook用CSS

.clearfix:after {
  content: ".";  /* 新しい要素を作る */
  display: block;  /* ブロックレベル要素に */
  clear: both;
  height: 0;
  visibility: hidden;
}

.clearfix {
  min-height: 1px;
}

* html .clearfix {
  height: 1px;
  /*¥*//*/
  height: auto;
  overflow: hidden;
  /**/
}

で例えばパーマリンクを「http://kkpdo.sakura.ne.jp/kosukekato/wp/link/」とかにすればいいのですが、僕の環境では404ページにリダイレクトされてしまいました。そこで、タブのURLを「?fb=facebook」としたらパスできました。理屈はわかりません、すいません、が、これでいけると思います。

ファンページでトラフィック持ってて、今後何かやりたくて、更新環境を整えたい人はパクってください。

加藤 康祐 / 企画・設計

プランナー、デザイナー。加藤康祐企画設計代表。Webデザインを入り口に、2005年よりフリーランスとしてのキャリアスタート。主な仕事としてベンチャー企業でのサービスのUXデザイン、独法との防災メディアの運営、社会的養護の子どもたちの自立を支援するNPOのサポート。ラグビーと料理、最近イラスト。

加藤康祐企画設計

是非、フォローしてください!
Twitter / Instagram

(2012-10-5)
売り上げランキング: 14,705
100円