スマフォにも最適化し、ファンゲート対応のFacebookページも作成できるフリーのWPテーマ・Flexibleがなかなか良さそう

iPhoneのようなスマートフォンや、iPad
のようなタブレットデバイスだけでなく、
Facebookページにも対応できる様に
工夫されているフリーのWordPress
テーマ・Flexibleをご紹介します。ベース
はTwenty Tenみたいですね。

css3のMedia QueryでiPhoneやiPadにレイアウトを自動調整し、ファンゲート対応のFacebookページの作成にも対応している珍しいテーマです。ファンゲートとは、FBページを「いいね！」した人だけ見れるようにする、というFB独自の機能です。※後述

[note]以前書いたMedia QueriesでスマートフォンやiPad等の様々なデバイスに対応済みのWPテーマいろいろもご参考下さい。[/note]

シンプルながら機能が凝縮されたテーマなのでフレームワーク的にも使えそうです。

Flexible

ベースはTwenty Tenだそうですが、かなりソースを削ってくれています。Twenty Tenはよほど慣れてない人でない限り、カスタムしやすい構成とは思えないのでこれはありがたい。ざっと特徴を。

MediaQueryでiPhone、iPadといったデバイスにもレイアウトを最適化済み

Tumblrライクな記事属性アイコン

ファンゲート対応のFacebookページ作成

クロスブラウザ対応

シンプルなファイル構成

カスタムメニュー対応

ヘッダ画像や背景も簡単に変更可能

ライセンスはGPLで、無料

以下、簡単に機能をご紹介します。

様々なデバイスに対応

Media Queries Tester（←割と便利）でのキャプチャ。iPhone、Android、BlackberryやNotebook、iPad等でもレイアウトを綺麗に保ってくれます。

Tumblrライクな記事属性アイコン

投稿画面には上図左手のようなラジオボタン（日本語化されてます）があり、Tumblrのように記事コンテンツに応じたアイコンを加えることも出来ます。

Facebookページも作れる

未検証ですが、上記のようにFacebookページも作成できるようです。MediaQueryでレイアウトを調整し、 FB.Canvas.setAutoResize();を使ってスクロールが出るのを防いでいます。

また、「いいね！」した人だけがコンテンツを見ることが出来るように設定出来るFanGate（ファンゲート）にも対応してくれています。

以下に、ざっと作り方をメモしておきます。

ページのテンプレートで作成

Facebookページはページ属性→テンプレートでFanpressを選択します。作成したページをFacebookアプリ登録する、という流れですかね。

アプリ登録に関してはオリジナルコンテンツを加えたFacebookページの作り方を書いたのでご参照下さい。

オーバーレイがかかる

Facebookのファンゲートは、「いいね！」した人だけがコンテンツを見れるように出来る、というもので、作成当初はオーバーレイがかかって見えない状態です。

ファンゲートは以下のスクリプトで対応します。

ファンゲートに対応する為のコード

if(isset($_REQUEST['signed_request']) && $_REQUEST['signed_request']){
 $signed_request = $_REQUEST['signed_request'];
} else {
 $signed_request = "";
}
function parsePageSignedRequest() {
 if (isset($_REQUEST['signed_request'])) {
 $encoded_sig = null;
 $payload = null;
 list($encoded_sig, $payload) = explode('.', $_REQUEST['signed_request'], 2);
 $sig = base64_decode(strtr($encoded_sig, '-_', '+/'));
 $data = json_decode(base64_decode(strtr($payload, '-_', '+/'), true));
 return $data;
 }
 return false;
}

このコードが、ページ属性→テンプレートで選べるFanpress用のPHPファイルに含まれています。

ファンゲートはFacebook側で「いいね！」しなくても見れる、という設定も可能だそうです。

ファンゲートに関しては以下が参考になりますよ。