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

Size: px

Start display at page:

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

えりかふしはら
4 years ago
Views:

1 HeartCore Facebook エクステンション利用マニュアル October 2013 Ver

2 改訂履歴改訂日改訂内容初版 2012 年 4 月新規作成 Ver 年 10 月テンプレート更新制限事項追加 - 2 -

3 目次 1. 本文書の目的と対象ライセンス目的対象ライセンス機能概要 Facebookエクステンションとは? Facebookエクステンションの利用目的利用方法 fb_init fb_like fb_likebox fb_comments fb_facepile fb_prof fb_share fb_recommend 制限事項

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 の世界からは離れた一般のページを広めるためにも使用することができます - 4 -

5 3. 利用方法 3.1. fb_init アドバンススクリプトタブの HTML HEAD コードへ以下のコードを記述します (< > は実際の値に置き換えてください app id>)@@@ 実用例当エクステンションを設定した上で他の各エクステンションをご利用ください 3.2. fb_like いいね! ボタンを挿入したい場所へ以下のコードを埋め込みます(< > は実際の値に置き換えてください URL>)@@@ 実用例いいね! をした人の中にログインユーザの友達が存在する場合は名前まで表示されます友達が存在しない場合もしくは Facebook へログインしていない場合は人数のみ表示されます 3.3. fb_likebox いいね! ボックスを挿入したい場所へ以下のコードを埋め込みます (< > は実際の値に置き換えてください ) - 5 -

@@@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.

6 page url>:width=< 幅 >:height=< 高さ >:border= ボーダーの色 (#xxxxxx 形式 ):stream=<true or false>:header=<true or 実用例 border=#0000ff:stream=true:header=true)@@@ header 該当部分 stream 該当部分 3.4. fb_comments コメントフィールドを挿入したい場所へ以下のコードを埋め込みます (< > は実際の値に置き換えてください < 幅 >:posts < 表示件数 >:prot <http or https>:domain <HC 動作ドメイン ><:port <HC 動作ポート >>:path < ページの相対パス >)@@@ 実用例 500:posts 10:prot mywebsite.co.jp:path /pa ge.jsp?id=123)@@@ - 6 -

をした友達のプロフィール画像を一覧表示したい場所へ以下のコードを埋め込みます (< > は実際の値に置き換えてください ) @@@extension:fb_facepile(:url=<ur >:width=< 幅

7 Facebook に投稿チェックボックスにチェックを入れた状態でコメントすると facebook のフィードへも表示されますチェックを外した状態でコメントするとこのページ上でのみ表示されます 3.5. fb_facepile いいね! をした友達のプロフィール画像を一覧表示したい場所へ以下のコードを埋め込みます (< > は実際の値に置き換えてください >:width=< 幅 >:size=<small or large>:rows=< 列数 >@@@ 実用例ここで表示対象となるのは友達のみですいいね! をしているユーザの中に友達がいない場合もしくは Facebook へログインしていない場合は何も表示されません - 7 -

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

9 ボタンをクリックするとページをシェアするためのダイアログが表示されますページのタイトル 3.8. fb_recommend おすすめボックスを挿入したい場所へ以下のコードを埋め込みます (< > は実際の値に置き換えてくださいサイトドメイン >: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)>)@@@ 実用例 ht:border=#000000:font=arial)@@@ <Facebook へログインしていない場合 > - 9 -

10 ログインボタンが表示されます <Facebook へログインしている場合 > 友達の名前が表示されます

11 4. 制限事項 Facebook の仕様やポリシーの変更により予告なく挙動や制約に変更が生じる可能性があります以上

Another HTML-lint 導入マニュアル（JSP）版

Another HTML-lint 導入マニュアル（JSP）版 HeartCore Another HTML-lint 導入マニュアル (JSP 版 ) October 2013 Ver1.1-1 - 改訂履歴改訂日改訂内容 Ver1.0 2013 年 07 月マニュアル改訂 Ver1.1 2013 年 10 月フォーマット改訂 - 2 - 目次 1. 本文書の目的と対象ライセンス... - 4-1.1. 概要説明... - 4-1.1. 対象ライセンス...