自身のブログに設置するのにちょっと手間取ったので、ひょっとしたら同じ人がいるのでは？と思い公開した次第です。
◇BloggerへのGREE「いいね！」設置手順
まず、Bloggerのダッシュボードから「デザイン⇒HTMLを編集」を選択。ウィジェットのテンプレートの展開チェックします。
テンプレートを編集
次に、テンプレートの html 要素の xmlns 属性で、名前空間を以下のように宣言します。
<html xmlns:og="http://opengraphprotocol.org/schema/"
xmlns:gr="http://gree.jp/ns">
xmlns:gr="http://gree.jp/ns">
Bloggerの場合は、
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:gr='http://gree.jp/ns' xmlns:og='http://opengraphprotocol.org/schema/'>
といった感じでしょうか。
GREE Developer Centerの 記述例では、meta 要素が head 要素内に記述してありますが、Bloggerでは <b:includable id='post' var='post'>～</b:includable> 内に記述します。これは投稿記事のタイトルを取得するBloggerのタグ data:post.title を使用するためです。プロパティについては、最低限 og:title のみ記述すればOKです。その他はお好みで。自分の場合は以下のようにしました。
<b:includable id='post' var='post'>
～
<meta content='data:post.title' property='og:title'/>
<meta content='blog' property='og:type'/>
<meta content='data:post.url' property='og:url'/>
～
</b:includable>
最後に、同じく <b:includable id='post' var='post'>～</b:includable> 内に、
<iframe allowTransparency='true' expr:src='"http://share.gree.jp/share?url=" + data:post.url + "&type=0&height=20"' frameborder='0' marginheight='0' marginwidth='0' scrolling='no' style='border:none; overflow:hidden; width:70px; height:20px;'/>
のように記述し、Social Feedbackを iframe 要素を用いて設置します。
ポイントとしては、ページごとにSocial Feedbackをポストできるよう、Bloggerのタグ data:post.url を使用することです。そのために、expr: を src 属性の頭に付加します。また、" で src 属性を囲み、& は & に書き換えてエスケープします。
ちなみに、上記コードは「いいね！」の場合です。他のSocial Feedbackを設置したい場合はGREE Developer Centerを参照しながら type=0 の部分を変更してください。
◇最終結果
以上をまとめると、BloggerにGREEのSocial Feedback「いいね！」を設置する方法は次のようになります。
～
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:gr='http://gree.jp/ns' xmlns:og='http://opengraphprotocol.org/schema/'>
～
<b:includable id='post' var='post'>
～
<!-- GREE いいね！ここから -->
<meta content='data:post.title' property='og:title'/>
<meta content='blog' property='og:type'/>
<meta content='data:post.url' property='og:url'/>
<iframe allowTransparency='true' expr:src='"http://share.gree.jp/share?url=" + data:post.url + "&type=0&height=20"' frameborder='0' marginheight='0' marginwidth='0' scrolling='no' style='border:none; overflow:hidden; width:70px; height:20px;'/>
<!-- GREE いいね！ここまで -->
～
</b:includable>
～
</html>
うまくいったでしょうか？
P.S.
Social Feedbackのプロパティ og:image を設定し、GREEに投稿される際の添付画像を指定しようとしましたがどうもうまくいきません。どなたかうまくいった方はお知らせいただけると幸いです。
0 件のコメント:
コメントを投稿