2011/5/22

MovableTypeからもFacebookページに表示させた

WordPressでできるんだから、MovableTypeでもできるだろうというわけで、ETのShowcaseを表示したかったので、試みました。

ET Showcase – Experience Transporters Facebookページ

Facebookページ用に、ちゃちゃっと簡単なインデックステンプレートを作ります。

<html>
<head>
<link rel="stylesheet" href="http://kkpdo.sakura.ne.jp/kosukekato/wp/wp-content/themes/kosukekatocom/facebook.css" type="text/css" />
<script src="http://kkpdo.sakura.ne.jp/kosukekato/wp/js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<script language="JavaScript">
FB.init({
    appId: '104486479641240',
    status: true,
    cookie: true,
    xfbml: true
});
window.fbAsyncInit = function() {
  FB.Canvas.setSize();
}
function sizeChangeCallback() {
  FB.Canvas.setSize();
}
</script>
<base target="_blank" />
</head>
<body>

<div class="showcase facebook">
<mtentries category="Showcase" tag="@Business">
<p><strong><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></strong></p>
<$MTEntryExcerpt mteval="1"$>
<br clear="all" />
<hr />
</mtentries>
</div>

<script>
$(window).load(function(){
var pageHeight = $(document).height();
FB.Canvas.setSize({ width: 500, height: pageHeight });
});
</script>
</body>

ここでポイントは拡張子を.phpなどとしてやること。.htmlだとデータ受け取れないから表示できないみたいなApacheのエラーが出て駄目でした。

これで実績一覧をサムネイル付きでFacebookページに表示することができるようになりました!当然、ETのサイト更新すれば、Facebookページの一覧も自動的に更新されます。勿論、最新のものはウォールにも投稿されるわけですが、古いものの参照可能性がなくなってしまいますからね。しかし、Facebookの仕様がiframeになって、僕のようなCMS使いは本当に助かりますねー。

ひとり仕事: フリーランスという働き方
(2012-10-5)
売り上げランキング: 14,705
100円
WordPressデザインレシピ集
狩野 祐東
技術評論社
売り上げランキング: 197,569
WordPress 高速化&スマート運用必携ガイド
こもりまさあき 岡本渉
エムディエヌコーポレーション
売り上げランキング: 435,263

加藤 康祐 / 企画・設計

1980年1月12日生まれ。フリーランス歴15年。プランナー、デザイナー。加藤康祐企画設計代表。学生時代にデザイン会社でWebデザインを経験。2005年よりフリーランスとしてキャリアスタート。これまでに個人から上場企業まで、100以上のクライアントとのプロジェクトを経験。主な仕事としてベンチャー企業でのサービスのUXデザイン、独法との防災メディアの編集・運営、社会的養護の子どもたちの自立を支援するNPOのサポート等。趣味はラグビーと料理。Keep the head up, Bind tight & Stay low.

加藤康祐企画設計

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