ブログ(fc2)とgoogle+を両方やっているのですが、
google+に貼り付けた写真を、投稿が新しい順にブログに埋め込みたいです。
(1枚1枚手動でリンクさせるのではなく、自動でやりたいです。)
こちらのサイト「http://www.imamura.biz/blog/google/7376」を参考にやってみたのですが、できません。
ちなみに、google+ではなく他のRSSフィードではちゃんと表示されました。
google+のRSSは「http://gplus.slfeed.net/RSS2/グーグルのID」を使いました。
どうしたら表示されるようになるか教えて頂けませんか?
詳しくないので、「ここをこう変えればいい」などのように教えて頂けると助かります。
よろしくお願いします。
divritPlus というサービスを使って、Google+ の RSS を取得すれば、多分、期待通りのことができます。
質問で「参考にした」というページのスクリプトを、ちょっとだけ変更します。
長いですけど、スクリプトの部分だけ、以下に全部のせます。
「参考にした」のページにある、「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) というコメントを入れています。
No.1 の回答にならって、HKT48の森保まどかさんのGoogle+ブログフィードの URL を使いました。
jsFiddle というサイトで、javascript を試すことができるのですが、そこで試してみたのが、こちらです。
http://jsfiddle.net/a_kuma3/vnnfV/embedded/result/
画像も取得できているのが、分かると思います。
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つ表示されます) ~以下省略~
Google+ friends listには写真のURLが出てこないので表示できません。
Google+ To RSS http://gplusrss.com/ を使えば写真URLが出てくる場合もあるのですが、かならずしも全部の写真を披露とは限りません。それと、Google+は画像の拡張子としてjpgやpngを付けないようなので、質問にあるスクリプトでは表示することができません。
RSS 1.0/2.0は、写真などのマルチメディアファイルを扱うことが定義されていないので、ブログ中の写真を表示させたいなら、別の手段を探した方がいいと思います。
どうしてできないのかずっと謎だったが、この形ではできないとわかってスッキリしました!
ありがとうございました。
divritPlus というサービスを使って、Google+ の RSS を取得すれば、多分、期待通りのことができます。
質問で「参考にした」というページのスクリプトを、ちょっとだけ変更します。
長いですけど、スクリプトの部分だけ、以下に全部のせます。
「参考にした」のページにある、「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) というコメントを入れています。
No.1 の回答にならって、HKT48の森保まどかさんのGoogle+ブログフィードの URL を使いました。
jsFiddle というサイトで、javascript を試すことができるのですが、そこで試してみたのが、こちらです。
http://jsfiddle.net/a_kuma3/vnnfV/embedded/result/
画像も取得できているのが、分かると思います。
a-kuma3さん
できました!これがやりたかったんです!
とても詳しく書いていただいたので、そのまま貼り付けただけでできました。
本当に助かりました。ありがとうございます。
とてもとても感謝です。
上手くいったようで、良かったっす。
a-kuma3さん
2014/04/09 22:18:49できました!これがやりたかったんです!
とても詳しく書いていただいたので、そのまま貼り付けただけでできました。
本当に助かりました。ありがとうございます。
とてもとても感謝です。
上手くいったようで、良かったっす。
2014/04/09 22:20:11