google+の投稿をRSSフィードで自分のサイトに表示したいです。

ブログ(fc2)とgoogle+を両方やっているのですが、
google+に貼り付けた写真を、投稿が新しい順にブログに埋め込みたいです。
(1枚1枚手動でリンクさせるのではなく、自動でやりたいです。)
こちらのサイト「http://www.imamura.biz/blog/google/7376」を参考にやってみたのですが、できません。
ちなみに、google+ではなく他のRSSフィードではちゃんと表示されました。
google+のRSSは「http://gplus.slfeed.net/RSS2/グーグルのID」を使いました。

どうしたら表示されるようになるか教えて頂けませんか?
詳しくないので、「ここをこう変えればいい」などのように教えて頂けると助かります。
よろしくお願いします。

回答の条件
  • 1人5回まで
  • 登録:
  • 終了:2014/04/09 22:20:49
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

ベストアンサー

id:a-kuma3 No.2

回答回数4973ベストアンサー獲得回数2154

ポイント300pt

divritPlus というサービスを使って、Google+ の RSS を取得すれば、多分、期待通りのことができます。
質問で「参考にした」というページのスクリプトを、ちょっとだけ変更します。

  • RSS フィードの URL を、http://dlvritplus.appspot.com/グーグルのID にする
  • 画像を切り出すところを、ちょっと変える

長いですけど、スクリプトの部分だけ、以下に全部のせます。
「参考にした」のページにある、「3.それでは、コードを書きます(サンプルです)」の部分にあたります。

google.load("feeds", "1");
var FA = new Array( //配列です。ここに、取得したいRSSフィードを加えるだけです
 // ★(1)
 "http://dlvritplus.appspot.com/107858117023519021548"
);
function initialize() {
 var feedsArr = new Array();
 // ★(4)
 var numEntr = 3; //各サイトのフィードを読み込む数(3サイトなので、投稿が3つ表示されます)
 var container = document.getElementById("feed");
 var cnt = FA.length;
 for (var k=0; k<FA.length; k++) {
  var feed = new google.feeds.Feed(FA[k]);
  feed.setNumEntries(numEntr);
  feed.setResultFormat(google.feeds.Feed.JSON_FORMAT); //JSONフォーマットに整形
  feed.load(function(result) {
  if (!result.error) {
   for (var i = 0; i < result.feed.entries.length; i++) {
    var entry = result.feed.entries[i];
    var eimg = "";
    // ★(2)
    var imgCheck = entry.content.match(/<img src="(https:[^"]+)"/); //データを取得する拡張子を指定
    if(imgCheck){
     // ★(3)
     eimg += imgCheck[1]; //配列の1番目に格納されたデータを取得(つまり、1枚目の画像を取得)
    } else {
     eimg += 'http://www.imamura.biz/blog/wp-content/themes/alltuts/images/logo_blog8.png'; //画像が取得できなかった場合の代替画像のURLを指定
 }
var attributes = ["title", "link", "publishedDate", "contentSnippet"];
 var ind = feedsArr.length;
 feedsArr[ind] = new Array();
 feedsArr[ind][0] = Date.parse(entry[attributes[2]]); // 日付でソート(並び替え)
 feedsArr[ind][1] = entry[attributes[1]]; // link
 feedsArr[ind][2] = entry[attributes[2]]; // publishedDate
 feedsArr[ind][3] = entry[attributes[3]]; // contentSnippet
 feedsArr[ind][4] = entry[attributes[0]]; // title
 feedsArr[ind][5] = result.feed.title; // site title
 feedsArr[ind][6] = eimg; // thumbnail
 }
 }
 cnt--;
 if (cnt == 0) {
 feedsArr.sort();
 feedsArr.reverse();
 for (var j = 0; j < feedsArr.length; j++) {
 var aE = document.createElement("A");
 var h3 = document.createElement("H3");
 var p = document.createElement("P");
 var spanD = document.createElement("SPAN");
 aE.href=aE.title=feedsArr[j][1];
 aE.appendChild(document.createTextNode(feedsArr[j][4]));
 h3.appendChild(aE);
 spanD.appendChild(document.createTextNode(feedsArr[j][2]));
 spanD.appendChild(document.createTextNode(" ("+feedsArr[j][5]+")"));
 p.appendChild(document.createTextNode(feedsArr[j][3]));
 p.appendChild(spanD);
 container.appendChild(h3);
 container.appendChild(p);
 var img_link = document.createElement("img");
 img_link.setAttribute("src", feedsArr[j][6] );
 img_link.setAttribute("width", "100" ); //幅:width属性に100pxを指定
 container.appendChild(img_link); //img(画像)タグを出力
 }
 }
 });
 }
}
google.setOnLoadCallback(initialize);

変更したところの前に、★(1) ~ ★(4) というコメントを入れています。

  • ★(1)
    RSS の URL を divritPlus を使うように変えてました
  • ★(2)
    画像の URL の切り出し方のパターンを変えました
  • ★(3)
    画像の切り出し方を変えたので、ここも変える必要があります
  • ★(4)
    ひとつの URL あたりの記事数を変えました

No.1 の回答にならって、HKT48の森保まどかさんのGoogle+ブログフィードの URL を使いました。

jsFiddle というサイトで、javascript を試すことができるのですが、そこで試してみたのが、こちらです。
http://jsfiddle.net/a_kuma3/vnnfV/embedded/result/

画像も取得できているのが、分かると思います。

id:yuruoti

a-kuma3さん
できました!これがやりたかったんです!
とても詳しく書いていただいたので、そのまま貼り付けただけでできました。
本当に助かりました。ありがとうございます。
とてもとても感謝です。

2014/04/09 22:18:49
id:a-kuma3

上手くいったようで、良かったっす。

2014/04/09 22:20:11

その他の回答1件)

id:snow0214 No.1

回答回数470ベストアンサー獲得回数116

ポイント100pt

1.スクリプト(HTMLファイル)はUTF-8形式で保存してください。

2.ブラウザで "http://gplus.slfeed.net/RSS2/グーグルのID" にアクセスして、ちゃんとRSS(XMLファイル)が表示されるか確認してください。

HKT48の森保まどかさんのGoogle+ブログフィードURL
http://gplus.slfeed.net/RSS2/107858117023519021548
を見てみると、参考サイトのままのスクリプト(以下参照)で正常に表示されました。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load("feeds", "1");
var FA = new Array( //配列です。ここに、取得したいRSSフィードを加えるだけです
 "http://gplus.slfeed.net/RSS2/107858117023519021548" //HKT48の森保まどかさんのGoogle+ブログフィードURL
);
function initialize() {
 var feedsArr = new Array();
 var numEntr = 3; //各サイトのフィードを読み込む数(3サイトなので、投稿が3つ表示されます)
~以下省略~
他1件のコメントを見る
id:snow0214

Google+ friends listには写真のURLが出てこないので表示できません。

Google+ To RSS http://gplusrss.com/ を使えば写真URLが出てくる場合もあるのですが、かならずしも全部の写真を披露とは限りません。それと、Google+は画像の拡張子としてjpgやpngを付けないようなので、質問にあるスクリプトでは表示することができません。

RSS 1.0/2.0は、写真などのマルチメディアファイルを扱うことが定義されていないので、ブログ中の写真を表示させたいなら、別の手段を探した方がいいと思います。

2014/04/09 18:04:41
id:yuruoti

どうしてできないのかずっと謎だったが、この形ではできないとわかってスッキリしました!
ありがとうございました。

2014/04/09 22:16:23
id:a-kuma3 No.2

回答回数4973ベストアンサー獲得回数2154ここでベストアンサー

ポイント300pt

divritPlus というサービスを使って、Google+ の RSS を取得すれば、多分、期待通りのことができます。
質問で「参考にした」というページのスクリプトを、ちょっとだけ変更します。

  • RSS フィードの URL を、http://dlvritplus.appspot.com/グーグルのID にする
  • 画像を切り出すところを、ちょっと変える

長いですけど、スクリプトの部分だけ、以下に全部のせます。
「参考にした」のページにある、「3.それでは、コードを書きます(サンプルです)」の部分にあたります。

google.load("feeds", "1");
var FA = new Array( //配列です。ここに、取得したいRSSフィードを加えるだけです
 // ★(1)
 "http://dlvritplus.appspot.com/107858117023519021548"
);
function initialize() {
 var feedsArr = new Array();
 // ★(4)
 var numEntr = 3; //各サイトのフィードを読み込む数(3サイトなので、投稿が3つ表示されます)
 var container = document.getElementById("feed");
 var cnt = FA.length;
 for (var k=0; k<FA.length; k++) {
  var feed = new google.feeds.Feed(FA[k]);
  feed.setNumEntries(numEntr);
  feed.setResultFormat(google.feeds.Feed.JSON_FORMAT); //JSONフォーマットに整形
  feed.load(function(result) {
  if (!result.error) {
   for (var i = 0; i < result.feed.entries.length; i++) {
    var entry = result.feed.entries[i];
    var eimg = "";
    // ★(2)
    var imgCheck = entry.content.match(/<img src="(https:[^"]+)"/); //データを取得する拡張子を指定
    if(imgCheck){
     // ★(3)
     eimg += imgCheck[1]; //配列の1番目に格納されたデータを取得(つまり、1枚目の画像を取得)
    } else {
     eimg += 'http://www.imamura.biz/blog/wp-content/themes/alltuts/images/logo_blog8.png'; //画像が取得できなかった場合の代替画像のURLを指定
 }
var attributes = ["title", "link", "publishedDate", "contentSnippet"];
 var ind = feedsArr.length;
 feedsArr[ind] = new Array();
 feedsArr[ind][0] = Date.parse(entry[attributes[2]]); // 日付でソート(並び替え)
 feedsArr[ind][1] = entry[attributes[1]]; // link
 feedsArr[ind][2] = entry[attributes[2]]; // publishedDate
 feedsArr[ind][3] = entry[attributes[3]]; // contentSnippet
 feedsArr[ind][4] = entry[attributes[0]]; // title
 feedsArr[ind][5] = result.feed.title; // site title
 feedsArr[ind][6] = eimg; // thumbnail
 }
 }
 cnt--;
 if (cnt == 0) {
 feedsArr.sort();
 feedsArr.reverse();
 for (var j = 0; j < feedsArr.length; j++) {
 var aE = document.createElement("A");
 var h3 = document.createElement("H3");
 var p = document.createElement("P");
 var spanD = document.createElement("SPAN");
 aE.href=aE.title=feedsArr[j][1];
 aE.appendChild(document.createTextNode(feedsArr[j][4]));
 h3.appendChild(aE);
 spanD.appendChild(document.createTextNode(feedsArr[j][2]));
 spanD.appendChild(document.createTextNode(" ("+feedsArr[j][5]+")"));
 p.appendChild(document.createTextNode(feedsArr[j][3]));
 p.appendChild(spanD);
 container.appendChild(h3);
 container.appendChild(p);
 var img_link = document.createElement("img");
 img_link.setAttribute("src", feedsArr[j][6] );
 img_link.setAttribute("width", "100" ); //幅:width属性に100pxを指定
 container.appendChild(img_link); //img(画像)タグを出力
 }
 }
 });
 }
}
google.setOnLoadCallback(initialize);

変更したところの前に、★(1) ~ ★(4) というコメントを入れています。

  • ★(1)
    RSS の URL を divritPlus を使うように変えてました
  • ★(2)
    画像の URL の切り出し方のパターンを変えました
  • ★(3)
    画像の切り出し方を変えたので、ここも変える必要があります
  • ★(4)
    ひとつの URL あたりの記事数を変えました

No.1 の回答にならって、HKT48の森保まどかさんのGoogle+ブログフィードの URL を使いました。

jsFiddle というサイトで、javascript を試すことができるのですが、そこで試してみたのが、こちらです。
http://jsfiddle.net/a_kuma3/vnnfV/embedded/result/

画像も取得できているのが、分かると思います。

id:yuruoti

a-kuma3さん
できました!これがやりたかったんです!
とても詳しく書いていただいたので、そのまま貼り付けただけでできました。
本当に助かりました。ありがとうございます。
とてもとても感謝です。

2014/04/09 22:18:49
id:a-kuma3

上手くいったようで、良かったっす。

2014/04/09 22:20:11
  • id:psne
    http://jsfiddle.net/psne/9yUGw/embedded/result/
    書いていたら質問が終わってしまったので、こちらに。
    Google+埋め込み用にフォーマットされた形式で出力します。
  • id:a-kuma3
    あまりきちんと読めてませんが、ここら辺りが肝?
    >>
    gapi.post.go("feed");
    <<
    https://developers.google.com/+/web/embedded-post/
  • id:psne
    >id:a-kuma3 さん
    gapi.post.renderとgapi.post.goのどちらを使おうか考えながら書いた部分が残っていますね。申し訳ないです。

    ・Goole+の投稿を取得して表示させる。
    ・Goole+の埋め込みガイドラインが変更になった場合でも、勝手に対応される。(Twitterの表示ガイドラインが変更になった場合のように。)

    今回は、質問のURLにあるスクリプトを利用していますが、投稿URLの一覧が取得できれば任意の方法で良いです。(かなり無駄があります。)

    <div class="g-post" data-href="..."></div>
    と、すべてのデータを生成し終わった後に gapi.post.go("feed"); を発火させても良かったのですが、一度に複数回弄るのは何だかなぁという事で、gapi.post.go("feed");を使っています。

    ※その名残なので、そこにも無駄があります。
    キモは plusone.js を読ませる事と、表示をplusone.jsに丸投げするところです。
  • id:yuruoti
    ぽけっとしてすてむさん
    回答くださる途中で締め切ってしまい失礼をごめんなさい。
    お礼もできずすみません。
    google+の見たままでビックリです!
    ありがとうございました。


この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません