FBMLでファン専用のページを作ろう

  • このエントリーをはてなブックマークに追加

これで守れる!フェイスブックの個人情報 」では友達を始めとした、極めて限定的なコンテンツの公開方法を説明しましたが、ファンだけに見せることのできるコンテンツを作成することもできます。例えば、アマチュアバンドを組んでいるのであれば、ファンになってくれた人だけに音源を公開するといった使い方が可能になります。

このような機能を使用するにはFBMLの
<fb:visible-to-connection></fb:visible-to-connection>
タグを使用すれば簡単に実現することができます。

サンプルコードを試していこう

例えば、以下のように記述した場合、ファンであれば「あなたはファンです」と表示されます。

[code]
&lt;fb:visible-to-connection&gt;
あなたはファンです
&lt;/fb:visible-to-connection&gt;
[/code]

もしファンでない場合は何も表示されません。

では、実際にやってみましょう。

まだFBMLを使用したことが無い場合、FBMLをインストールする必要があります。
こちらから「スタティックFBML」を選択後、左メニューの「自分のファンページに追加」をクリックすると自分のファンページでFBMLが使用できるようになります。

まずはFacebookにログインしましょう。

左メニューの「ファンページを編集」をクリックします。

ファンページを編集

クリックすると拡大します

左メニューの「アプリ」をクリックします。

アプリを選択

クリックすると拡大します

「FBML」というアプリケーションがありますので、「アプリケーションへ移動」をクリックします。

アプリケーションへ移動

クリックすると拡大します

以下のような画面が表示されますので、「ボックスのタイトル」欄にタブに表示される際の名前を入力します。

ボックスのタイトル

クリックすると拡大します

下の「FBML」欄には上記のサンプルコードを記述してみましょう。
以下のようになります。

FBMLを記述

クリックすると拡大します

記述したら忘れずに「変更を保存」をクリックしてください。

では、正しく動作しているか確認してみましょう。
左上にファンページへのリンクがありますので、クリックします。

ファンページに戻ります

クリックすると拡大します

ファンページに作成したタブが表示されています。もし表示されていない場合は「+」をクリックすれば表示されます。タブをクリックしてみましょう。

タブが追加されました

クリックすると拡大します

どうでしょうか。
以下のように赤枠の部分が表示されていれば正しく動作しています。この表示はファン、もしくは管理者の場合のみ表示されます。

赤枠の部分が表示されていますか?

クリックすると拡大します

では、ファンでは無い場合は表示されないことを確認しましょう。
メニューから「アカウント」-「ログアウト」を選択します。

ログアウト

クリックすると拡大します

自分が管理しているファンページに遷移し、追加したタブをクリックしてみましょう。

ログアウト状態で確認

クリックすると拡大します

先ほど表示されていた「あなたはファンです」という文言が表示されていないことを確認できれば、正常に動作しています。

では最後に、もう少し手を入れてみましょう。
以前公開した「FBMLでイベント告知ページを作ろう」で使用した<fb:mp3>タグを使用し、ファンなら試聴できるようにしてみます。この<fb:mp3>タグは<fb:visible-to-connection>タグと連動する作りになっており、ファンなら再生ボタンが押すことができ、ファンでなければ再生ボタンを押すことができないという理に適った仕様になっています。

[code lang=”js”]
&lt;div style=&quot;width:500px;height:50px;text-align:center;&quot;&gt;
&lt;p&gt;ここはファン専用ページです。
ファンの方だけが試聴できる音源が掲載されています。&lt;/P&gt;
&lt;p&gt;まだファンになっていない方は、ぜひファンになってください!!&lt;/p&gt;
&lt;/div&gt;

&lt;fb:visible-to-connection&gt;
&lt;fb:mp3 src=&quot;http://socialmediaexperience.jp/mp3/Milky_Way_edit.mp3&quot; title=&quot;Milky Way&quot; artist=&quot;The Anazaworld&quot; album=&quot;Strawberry Love&quot; /&gt;
&lt;/fb:visible-to-connection&gt;
[/code]

いかがでしたか?
より多くのファンを獲得するひとつの手法として試してみてはいかがでしょうか。

  • このエントリーをはてなブックマークに追加

SNSでもご購読できます。