ホーム Social Feedback

Social Feedback

1. 概要

Social Feedbackは、GREE外部の様々なWebサービスの情報を、GREEのユーザー間で簡単に共有できるようにするための機能です。Social FeedbackをWebサービスに設置することによって、訪れたユーザーは、興味を持った情報やおすすめの情報をワンクリックでGREEに投稿することが可能になります。

※ 日本のGREEユーザーにのみ公開可能です。

2. GREEへの投稿

外部Webサービスに設置されたSocial Feedbackをユーザーがクリックすると、ポップアップウィンドウが表示、またはGREE内ページに遷移し、フォームが表示されます。ユーザーがフォームにコメントを入力し送信すると、設置されたページの情報とコメントがGREEに送信され、情報の投稿が行われます。コメントを入力無しで送信することもでき、その場合投稿にはタイトルとページに設定された画像のみが表示されます。

3. ページへの設置

Social Feedbackは、GREE Connectの規定する仕様に従って、Webサービス内にHTML要素を記述することで簡単に設置することができます。設置したいページに関する情報をHTMLヘッダのmeta要素に記述し、設置したい箇所にiframe(PCやSmart Phone版サイト)、またはa要素(Feature Phone版サイト)を記述することで機能が提供されます。設置に必要な各HTML要素の詳細について、以下で解説します。

4. meta要素仕様

Social Feedbackは、設置されているページのHTMLヘッダからOpen Graph protocol準拠のmeta要素記述を取得することで、設置ページの情報を登録します。そのため、Social Feedbackを設置するページには以下の書式でmeta要素を記述し、プロパティを設定する必要があります。

4.1. 書式

<meta property="プロパティ名" content="値" />

meta要素のproperty属性に以下のように定められたプロパティ名を、content属性にプロパティの値を記述します。

4.2. プロパティ

プロパティ名プロパティ値説明
og title(必須) GREEに投稿される際、このプロパティで設定される文字列が、タイトルとしてユーザーのコメントに付加されます。100文字以内で設定する必要があります。
og type(推奨) Open Graph protocolで定められた文字列を用いて、ページの種類を設定することができます。
省略した場合、「その他」として扱われます。
og url(推奨) 設置されているページのURLを記述します。このプロパティが、GREE内投稿から外部Webサービスへのリンクに用いられます。
省略した場合、設置ページのURLが設定されます。
gr feature_phone_url Feature Phone版サイト用リンク先URLページの内容が同じで、PC版サイトと携帯電話版サイトのURLがそれぞれ異なる場合は、このプロパティを用いることでリンクの出し分けを行うことができます。PC版GREEからのリンクにはog:urlが、Feature Phone版GREEからのリンクにはgr:feature_phone_urlが用いられます。
このURLによるリンクはGREEによる審査の上で行われるため、非同期に有効になります。
gr smart_phone_url Smart Phone版サイト用リンク先URLgr:feature_phone_urlと同様、PC版GREEからのリンクにはog:urlが、Smart Phone版GREEからのリンクにはgr:smart_phone_urlが用いられます。
og image(推奨) GREEに投稿される際、添付画像として用いられます。
gr image_1 og:imageに加えて、付加的に画像を添付することができます。
gr small_image_1 Feature Phone版GREEで表示される画像に小さいものを用いたい場合、こちらを明示的に設定することで画像の出し分けを行うことができます。PC版GREE上での表示にはog:imageが、Feature Phone版GREE上での表示にはgr:image_1が用いられます。
省略した場合、og:imageが縮小されて表示されます。
gr small_image_2 Feature Phone版サイトの投稿に添付する画像
gr:small_image_1に加えて、付加的に画像を添付することができます。

4.3. og:typeの値

og:typeに用いることのできる値は、Open Graph protocolで定められた以下の文字列のいずれかになります。
詳細はhttp://opengraphprotocol.org/を参照してください。

  • activity
  • sport
  • bar
  • company
  • cafe
  • hotel
  • restaurant
  • cause
  • sports_league
  • sports_team
  • band
  • government
  • non_profit
  • school
  • university
  • actor
  • athlete
  • author
  • director
  • musician
  • politician
  • public_figure
  • city
  • country
  • landmark
  • state_province
  • album
  • book
  • drink
  • food
  • game
  • movie
  • product
  • song
  • tv_show
  • article
  • blog
  • website

4.4. 記述例

<html xmlns:og="http://opengraphprotocol.org/schema/"
      xmlns:gr="http://gree.jp/ns">
<head>
<meta property="og:title" content="GREE" />
<meta property="og:url" content="http://gree.jp" />
<meta property="og:type" content="website" />
<meta property="gr:feature_phone_url" content="http://m.gree.jp" />
<meta property="gr:smart_phone_url" content="http://t.gree.jp" />
<meta property="og:image" content="http://i.gree.jp/img/gree/2009/login/top_img01.jpg" />
<meta property="gr:image_1" content="http://i.gree.jp/img/gree/2009/login/top_img03.jpg" />
<meta property="gr:small_image_1" content="http://i.games.gree.jp/img/common/monpura_60.gif" />
<meta property="gr:small_image_2" content="http://i.games.gree.jp/img/common/drilland_60.gif" />
...
</head>
<body>
...
</body>
</html>

5. 設置方法

Social Feedbackは、設置するページがPC版またはSmart Phone版サイトかFeature Phone版サイトかによって実装方法が異なります。以下では、それぞれの実装方法について解説します。

5.1. PC版またはSmart Phone版サイト

PCまたはSmart Phone向けのページに設置する場合、Social Feedbackはiframe要素を用いて実装することができます。iframeの記述については以下のようなものになりますが、 GREE Connectでは、より簡単にSocial Feedbackを設置できるよう、iframe出力ツールを用意しています。

<iframe src="http://share.gree.jp/share&url=http%3A%2F%2Fgree.jp&type=0&height=20" scrolling="no"
 frameborder="0" marginwidth="0" marginheight="0" style="border:none; overflow:hidden; width:100px;
  height:20px;" allowTransparency="true">
</iframe>

iframe出力ツール

URL
種類
高さ

ツールのプロパティ

ツールによるiframeの出力の際に設定可能なプロパティは、次のとおりです。

  • URL
    Social Feedbackによる投稿の対象となるページ(ボタンを設置するページ)のURLです。空白の場合はこのページのURLになります。
    通常は設置したページ、すなわちmeta要素のog:urlと同一になります。このプロパティを直接編集する場合、URLの文字列をRFC3986形式でエンコードしてください。
  • 種類
    ボタンの見た目を、5種類から選択することができます。
  • 高さ
    ボタンの高さ(大きさ)を、3種類から選択することができます。

5.2. Feature Phone版サイト

Feature Phone向けのページに設置する場合、Social Feedbackはa要素を用いて実装することができます。a要素を用いて実装する場合、次のように記述してください。

<a href="http://m.gree.jp/?mode=share&act=write&url=http%3A%2F%2Fm.gree.jp&button_type=0&button_size=20&guid=ON">
    <img src="http://i.share.gree.jp/img/share/button/btn_iine_20.png">
</a>

クエリパラメータ

href属性で指定するURLにおいて、設定可能なクエリパラメータは次のとおりです。

  • url
    Social Feedbackによる投稿の対象となるページのURLです。通常は設置したページ、すなわちmeta要素のog:urlと同一になります。
    このプロパティを直接編集する場合、URLの文字列をRFC3986形式でエンコードしてください。
  • button_type
    img要素で使用する、画像の種類に対応するIDを記述してください。
    画像の種類に対応するIDは、下記の表をご参照ください。
  • button_size
    img要素で使用する、画像のサイズに対応する整数を記述してください。
    記述する値は、"btn_iine_**.png"の**の部分になります。

利用可能なボタン画像のURL

a要素の内容として、GREEの提供するボタン画像を用いることができます。見た目の種類と大きさに対応するURLは、それぞれ次のとおりです。

http://i.share.gree.jp/img/share/button/以下

ID種類162023
0 いいね! btn_iine_16.png btn_iine_20.png btn_iine_23.png
1 気になる btn_kininaru_16.png btn_kininaru_20.png btn_kininaru_23.png
2 オススメ btn_osusume_16.png btn_osusume_20.png btn_osusume_23.png
3 シェア btn_share_16.png btn_share_20.png btn_share_23.png
ID種類162232
4 ロゴ btn_logo_16.png btn_logo_22.png btn_logo_32.png

6. Social Feedbackの利用ガイドライン

ボタンの設置を行った時点で、次のガイドラインに同意したものとみなします。

Social Feedback利用ガイドライン[PDF]

ホーム Social Feedback