2013年6月1日土曜日

Google+の記事についたコメントをブログやWEBページに貼り付ける

ブログやWEBページにGoogle+から付けられたコメントを表示する方法には
がありますけど、上記のやり方は特定のURL(WEBページ)と関連したGoogle+コメントしか表示できません。従って、例えばNoz Oさんのブログのように、最初にGoogle+に投稿した記事をその後にブログ記事にした場合、元のGoogle+記事がブログと関係づけられていないから、Google+コメントを上記のやり方ではブログに表示できません。そういう場合に、Google+の投稿についたコメントをG+以外のWEBページやブログに貼り付けるやり方を説明します。
  1. APIキーというものを以下の手順で取得します
    1. https://code.google.com/apis/console/をクリックして下さい。
    2. 左側の「Service」をクリックしてから「Google+」をクリックして下さい。始めての場合は「OFF」を「ON」にする必要があります。
    3. 左側の「API Access」をクリックするとAPI keyが表示されます。
  2. 対象となるGoogle+記事の記事IDをhttp://wheresgus.com/urltoidに記事のURLを入力して取得します。リンク切れの場合はhttp://gusclass.com/blog/2012/12/18/getting-an-activity-id-from-a-google-post-url/から辿って下さい。その方法がうまく動かない場合Google+記事のHTMLソースを表示して「data-update-id」をサーチすると記事IDがわかります(2013年6月1日現在)。例としてhttps://plus.google.com/102903912989809953917/posts/dxwNTTYaBmqの記事IDはz13odvgjpw2uvvzyw04cdfcjlxnyvtzpqy40kであることがわかります。
上記の準備が終わったら、下記のJavascriptをHTMLを直接編集してコメントを設置したい場所に貼り付けてください。APIキーと記事IDを上記で得たものに置き換えて下さい。

<div class="g-comments-for 記事ID"></div>
<script type="text/javascript">
// This file was originally made by Jennifer Murphy, and
// downloaded from http://little418.com/2011/12/google-comments-on-your-static-html-blog.html

var commentr = commentr || {};
var apiKey = "APIキーをhttps://code.google.com/apis/console/をから入手して下さい";

function commentrLoad() {
  gapi.client.load('plus', 'v1', commentr.go);
  gapi.client.setApiKey(apiKey);
}

// search for g-comments-for classes
commentr.go = function() {
  //  Find the comment elements to process
  var fetchElements = document.getElementsByClassName('g-comments-for');
  for (var i=0; i < fetchElements.length; i++) {
    var activityId = fetchElements[i].classList[1];
    commentr.fetchComments(activityId);
  }
}

commentr.fetchComments = function(activityId) {
  var request = gapi.client.plus.comments.list({
    'activityId': activityId,
    'maxResults': '500'
  });
  request.execute(commentr.parseComments);
}

commentr.parseComments = function(responseJson) {
  var activity = responseJson.items[0].inReplyTo[0];
  var comments = responseJson.items;

  //find element to insert into
  var insertionElements =
      document.getElementsByClassName('g-comments-for ' + activity.id);
  var insertionElement = insertionElements[0];

  var newContents = "";
  for (i = 0; i < comments.length; i++) {
    var actor = comments[i].actor;

    var commentBody = comments[i].object.content;

    //do the insertion
    newContents += "<dt><a href='" + actor.url + "'><img src='" +
        actor.image.url + "'> " + actor.displayName +
        "</a>:</dt><dd>" + commentBody + "</dd>";

  }
  insertionElement.innerHTML = "<dl>" + newContents +
      "</dl> <p class='g-commentlink'>コメントを追加するには <a href='" +
      activity.url + "'>ここ (Google+に移動)</a> をクリックして下さい.</p>";
}
</script>
<script type="text/javascript" src="https://apis.google.com/js/client.js?onload=commentrLoad">
</script>

以下実施例です。プロフィール画像の後に改行が入ることが気に入らない場合、プロフィール画像はHTMLのdtで実現されているので関連するスタイルをCSSで調整して下さい。


以下はグーグルブロガーが提供するこのブログ記事へのコメント欄です