WordPressの認証ページをGFCで簡単に作る方法

 WordPress認証ページ作成

 WordPressページ分割機能と、Google Friend Connect(以下GFC)を
 利用しますと、簡易的な会員認証ページが、簡単に作成できます。

 

Google Friend Connect とは

 Googleが提供するソーシャル機能です。
 ブログ管理者であれば、サイドバーなどにガジェットという形で、
 簡単に貼り付けることが出来ます。

 Google Friend Connect

 また、Google Friend Connect(以下GFC)では、ログインしてもらうときに
 ユーザーに個人情報登録の負担をかけることなく、
 また、管理者にも個人情報保有のリスクを持たせることなく、
 会員機能を利用できることがメリットです。

 Google Friend Connect ログイン例

 

GFCでどんなことが出来るの?

 実装しますと、以下の機能を利用できます。

 ・サイト管理者にとって
  ・参加しているユーザーの管理
  ・(メール登録をさせていれば)メールマガジンの配信
  ・投票やコメント、イベントなどのガジェット設置
  ・会員登録時に簡単なアンケートを取ることも可能

 ・ユーザー
  ・そのサイトを利用している他のユーザーを知ることが出来る
  ・そのユーザーと友達になれる
  ・メルマガを受信したり、会員限定のイベント参加など利用できる
  ・アンケート機能では、その統計情報がわかる

 技術的にはOpenSocialを採用していますので、mixiアプリで出来るような
 ガジェット作成まではOKといったところです。

 (mixiは元々SNSなので、上記ソーシャル機能は有していますが、
 mixiアプリ内ではそこまでは出来ませんよね。その位。)

 なお、ガジェット利用だけでしたら、簡単に実装可能です。
 Google Friend Connect のサイトに行き、自分のサイトを登録、
 その後、自サイト用のコードが生成できますので、それをサイドバーなどに
 貼り付ければOKです。ブログパーツの要領で利用できます。

 

WordPressのページ分割機能

 さて、WordPressでは、長いエントリーを分割する機能があります。
 ※以降、<>はソース以外は、全角になっています。注意。

 エントリー内で分割したい箇所に

<!--nextpage-->

を記述します。

 次に、単一記事の投稿 (single.php)内に、以下のタグを入れておきますと、

<?php wp_link_pages(); ?>

 <!–nextpage–>が置き換えられページ分割されます。
 複数入れますと、page 1 2 3 ・・・となります。

 WordPressページ分割例

 <?php wp_link_pages(); ?>は、テンプレート内の、
 <?php the_content();?>の次あたりに入れておけば良いでしょう。

 また、記事に対するコメントを、ユーザーが投稿できるようにする
 WordPressのプラグインもあります。

 WordPress › Google Friend Connect Integration « WordPress Plugins

 コメント欄にアイコンが表示されるようになりますので、
 華やかな印象になります。

 ただ、GFCのガジェットのコメント機能に置き換わるので、
 WordPressのみで投稿されたコメントとの混在は出来ませんので、
 注意しましょう。

 

WordPressにアカウント認証を連動させる

 Google Friend Connectのサイトにサンプルが多数掲載されていますので、
 それらを参考に出来ます。

 さて、仕組みです。
 ・利用者がログインしなければ、「次項へはログインが必要です」と表示
 ・ログインしていれば、「次へ」のリンクを表示
  (つまり、<?php wp_link_pages(); ?>が機能するようにする)

 以下のソースでは、membersというID部分が、ログインの有無で
 表示切り替えされます。

<div id="members"></div>
<!– Initialize the Google Friend Connect OpenSocial API. –>
<script type="text/javascript">
google.friendconnect.container.setParentUrl(‘/xxxxxxx/’ /* サイトのディレクトリ */);
google.friendconnect.container.initOpenSocialApi({
site: ‘xxxxxxxxxxxxxxxxx(サイトコード)’,
onload: function(securityToken) { initAllData() }});
function initAllData() {
var params = {};
params[opensocial.DataRequest.PeopleRequestFields.PROFILE_DETAILS]
=[opensocial.Person.Field.ID,opensocial.Person.Field.NAME,opensocial
.Person.Field.THUMBNAIL_URL,opensocial.Person.Field.PROFILE_URL];
/*プロパティが長いので、矯正折り返しさせてます。注意*/
var req = opensocial.newDataRequest();
req.add(req.newFetchPersonRequest(‘VIEWER’, params), ‘viewer’);
req.add(req.newFetchPeopleRequest(
new opensocial.IdSpec({‘userId’ : ‘OWNER’, ‘groupId’ : ‘FRIENDS’}), params),
‘ownerFriends’);
req.add(req.newFetchActivitiesRequest(new opensocial.IdSpec({‘userId’ : ‘OWNER’, ‘groupId’ : ‘FRIENDS’})), ‘activities’);
req.send(setupData);
};
function setupData(data) {
viewer = data.get(‘viewer’).getData();
if (viewer) {
document.getElementById(‘members’).innerHTML =
‘<h4 class=nextpage><?php wp_link_pages(‘before=<p>&after=</p>&next_or_number=next&previouspagelink=前へ&nextpagelink=次へ’); ?></h4>’;
} else {
document.getElementById(‘members’).innerHTML =
‘<h4 class=nextpage>・・・続きは、参加(ログイン)後お読み頂けます<br/><br/>(サイドバーに参加ボタンあります。Google、Twitterアカウント等で認証可能。)</h4>’;
}
}
</script>

 プロパティが長くなってますので、上記コードを貼り付けてもうまくいかない場合は、
 公式サイトで紹介されているコードと照合し、修正してみて下さい。

 

GFCを利用した認証方法、その他の課題

 この方法では、簡易的な認証に留まり、
 また、WordPressのページ分割の仕様と絡み、以下の課題があります。

 ・2ページ目以降は、URLを直打ちすればアクセス可能。
 (「次へ」リンクの表示をコントロールしているだけなので)
 ・故に、2ページ目以降をブックマーク、TWEET等でもアクセスが可能に。

 したがって、有料会員といったレベルまでの運用は無理があります。

 現状では、ログインの有無で簡易的なメッセージや画像を表示させたり、
 より利便性が増すようなリンクを表示させたり・・・、と
 直打ちされたとしても、それ以上に利便性が増すような「演出」等に
 向いているのかな、と思います。
 あとは、Google Analytics のカスタム変数にログインの有無を記録しておくとか。

 また、ソーシャルと言うことでは、Facebookウィジェットも強力なライバルです。

 Facebook | Facebookウィジェット

 SNSとしては世界をリードするfacebook、そのウィジェットも軽快な印象を受けます。
 一方、GFCは「(環境次第とは思いますが)ログイン出来ない」といった声も。
 たしかに、ガジェットを入れすぎますと若干もたつく印象です。

 ただ、そういった課題はあれども、
 カジュアルに認証機能が利用できるGFCには、使い出があるのは事実であり、
 APIも利用可能ですので、それらを応用したガジェット登場は期待します。

 Google Friend Connect、皆さんも良かったら試してみて下さい。

 WordPress認証ページ作成

 ・会員機能を使ったブログ例
  F.Ko-Jiの「一秒後は未来」
  makitani.com
  Analytics Blog | Web Analytics Canada | Mobile, Social Media

 ・OpenSocial関連情報
  OpenSocial – Google Code
  OpenSocial-Japan | Google グループ
  mixi Developer Center (ミクシィ デベロッパーセンター)
  連載:OpenSocialを利用してガジェットを作ろう!|gihyo.jp … 技術評論社

 ・facebookウィジェットを使ったブログ例
  Social Media News and Web Tips – Mashable –
  Orange County Search Engine Optimization
  Nothing2Hide