Facebookエクステンション利用マニュアル

(1)

HeartCore

Facebook エクステンション利用マニュアル

(2)

改訂履歴

改訂日改訂内容

初版 2012 年 4 月新規作成

(3)

1. 本文書の目的と対象ライセンス ... - 4 - 1.1. 目的 ... - 4 - 1.2. 対象ライセンス ... - 4 - 2. 機能概要 ... - 4 - 2.1. Facebookエクステンションとは？ ... - 4 - 2.2. Facebookエクステンションの利用目的 ... - 4 - 3. 利用方法 ... - 5 - 3.1. fb_init ... - 5 - 3.2. fb_like ... - 5 - 3.3. fb_likebox ... - 5 - 3.4. fb_comments ... - 6 - 3.5. fb_facepile ... - 7 - 3.6. fb_prof ... - 8 - 3.7. fb_share ... - 8 - 3.8. fb_recommend ... - 9 - 4. 制限事項 ... - 11 -

(4)

1. 本文書の目的と対象ライセンス

1.1. 目的本文書は、弊社がお客様に納品する CMS パッケージ製品「HeartCore」の拡張機能である Facebook エクステンションの実装手順及び操作手順を説明する文書です。お客様が実際に Facebook エクステンションを利用するにあたり、本文書を参照することで、該当機能の一通りの操作を行うことができることを目的としております。対象モジュールは v8.2.2 より標準機能となります。 1.2. 対象ライセンス当該機能を提供しているライセンスは以下の通りです。 Professional Enterprise

Standard Suite Standard Suite

Facebook エクステンション ● ● ● ● ●：標準装備 ○：オプション装備－：設定なし ※JSP 版のみの提供となります。

2. 機能概要

2.1. Facebookエクステンションとは？ HeartCore で作成するウェブページ上で、ソーシャルネットワークサービス「Facebook」の様々なソーシャル機能が簡単に実現できるエクステンションです。本書で紹介するエクステンションは以下の通りです。  _{fb_init：紐づく情報を取得するための設定用エクステンションです。}  fb_like：「いいね！」ボタンおよび「いいね！」をした人数（友達の名前）を表示します。

 _{fb_likebox：指定した facebook page に「いいね！」をした人のプロフィール画像や、facebook} page のストリーム（ウォールの最新情報など）を表示します。  _{fb_comments：指定した URL 上にコメント入力フィールドを設置し、コメントの投稿および} 表示を可能にします。  _{fb_facepile：指定したページに「いいね！」をした友達のプロフィール画像を表示します。}  fb_prof：指定した Facebook ユーザのプロフィール画像を表示します。  _{fb_share：「シェア」ボタンおよび「シェア」をした人の人数を表示します。}  fb_recommend：おすすめボックスを設置し、指定したサイトやアプリに紐づけられたおすすめ情報を表示します。 2.2. Facebookエクステンションの利用目的世界最大のソーシャルネットワークサービスである Facebook のソーシャル機能を利用することで、ウェブマーケティングの強化に役立てて頂くことを目的としております。企業や製品の Facebook ページへ誘導するために使用したり、または企業のイベント情報や新製品のニュース記事といった Facebook の世界からは離れた一般のページを広めるためにも使用することができます。

(5)

3. 利用方法

3.1. fb_init

「アドバンススクリプト」タブの「HTML HEAD コード」へ、以下のコードを記述します（< >は実際の値に置き換えてください）。

@@@extension:fb_init(:app_id=<facebook app id>)@@@

実用例） @@@extension:fb_init(:app_id=123456789123456)@@@ ※当エクステンションを設定した上で、他の各エクステンションをご利用ください。 3.2. fb_like 「いいね！」ボタンを挿入したい場所へ、以下のコードを埋め込みます（< >は実際の値に置き換えてください）。 @@@extension:fb_like(url=< URL>)@@@ 実用例） @@@extension:fb_like(url=@@@url@@@)@@@ ウェブ上では、以下のように表示されます。 ※「いいね！」をした人の中に、ログインユーザの友達が存在する場合は、名前まで表示されます。友達が存在しない場合もしくは Facebook へログインしていない場合は、人数のみ表示されます。 3.3. fb_likebox いいね！ボックスを挿入したい場所へ、以下のコードを埋め込みます（< >は実際の値に置き換えてください）。

(6)

@@@extension:fb_likebox(:url=<facebook page url>:width=<幅>:height=<高さ>:border=ボーダーの色(#xxxxxx 形式):stream=<true or false>:header=<true or false>)@@@

実用例） @@@extension:fb_likebox(url=http://www.facebook.com/HCsamplePage:width=500:height=500: border=#0000FF:stream=true:header=true)@@@ ウェブ上では、以下のように表示されます。 3.4. fb_comments コメントフィールドを挿入したい場所へ、以下のコードを埋め込みます（< >は実際の値に置き換えてください）。 @@@extension:fb_comments(:width|<幅>:posts|<表示件数>:prot|<http or https>:domain|<HC 動作ドメイン><:port|<HC 動作ポート>>:path|<ページの相対パス>)@@@ 実用例） @@@extension:fb_comments(:width|500:posts|10:prot|http:domain|mywebsite.co.jp:path|/pa ge.jsp?id=123)@@@ ウェブ上では、以下のように表示されます。 header該当部分 stream該当部分

(7)

※「Facebook に投稿」チェックボックスにチェックを入れた状態でコメントすると、facebook のフィードへも表示されます。チェックを外した状態でコメントすると、このページ上でのみ表示されます。 3.5. fb_facepile 「いいね！」をした友達のプロフィール画像を一覧表示したい場所へ、以下のコードを埋め込みます（< >は実際の値に置き換えてください）。

@@@extension:fb_facepile(:url=<ur >:width=<幅>:size=<small or large>:rows=<列数>@@@ 実用例） @@@extension:fb_facepile(:url=@@@url@@@:width=400:size=large:rows=1)@@@ ウェブ上では、以下のように表示されます。 ※ここで表示対象となるのは、友達のみです。「いいね！」をしているユーザの中に友達がいない場合、もしくは Facebook へログインしていない場合は何も表示されません。

(8)

3.6. fb_prof

特定ユーザのプロフィール画像を表示したい場所へ、以下のコードを埋め込みます。 @@@extension:fb_prof(:uid=<facebook user id>:link=<true or false>:logo=<true or false>:size=<thumb or small or normal or square>:width=<幅>:height=<高さ>)@@@ 実用例） @@@extension:fb_prof(:uid=100003789422682:link=true:logo=true:size=small)@@@ ※width、height を指定すると、size は無効になります。ウェブ上では、以下のように表示されます。画像をクリックすると、指定ユーザの facebook ユーザページへ遷移します。 ※ページを iframe 内に表示させている場合は、link=true は機能しませんのでご注意ください。 3.7. fb_share 「シェア」ボタンを挿入したい場所へ、以下のコードを埋め込みます。 @@@extension:fb_share()@@@ ※シェアの対象は、シェアボタンが表示されている現在のページです。ウェブ上では、以下のように表示されます。 Logo該当部分

(9)

ボタンをクリックすると、ページをシェアするためのダイアログが表示されます。 3.8. fb_recommend おすすめボックスを挿入したい場所へ、以下のコードを埋め込みます（< >は実際の値に置き換えてください）。 @@@extension:fb_recommend(:domain=<サイトドメイン>:app_id=<アプリケーション ID>:width=<幅>:height=<高さ>:color=<light or dark>:border=<ボーダー色(#xxxxxx 形式)>:font=<フォント種別(arial or lucida grande or segoe ui or tahoma or trebuchet ms or verdana)>)@@@ 実用例） @@@extension:fb_recommend(:domain=http://www.xyxon.co.jp:width=300:height=300:color=lig ht:border=#000000:font=arial)@@@ ウェブ上では、以下のように表示されます。＜Facebook へログインしていない場合＞ページのタイトル

(10)

＜Facebook へログインしている場合＞

ログインボタンが表示されます。

(11)

4. 制限事項

Facebook の仕様やポリシーの変更により、予告なく挙動や制約に変更が生じる可能性があります。

Facebookエクステンション利用マニュアル

HeartCore