カグア！

17/02/10 at 12:02 pm　 カグア！ > API >

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

　

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

　

Google Friend Connect とは

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

　Google Friend Connect

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

　

　

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 ・・・となります。

　

　＜?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、皆さんも良かったら試してみて下さい。

　

　・会員機能を使ったブログ例
　　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

　

こちらの記事もオススメです

• 関連情報は無さそうですが、上記エントリーは有益かと思われます。

当ブログは平日毎日更新しています。最新情報を便利に読めるRSS購読（無料、いつでも解除可能）が便利です。以下のアイコンでご希望のアイコンをクリックして下さい！