【公開停止】g.o.a.tの新着記事を自分のサイトに表示させる方法

【2017/1/13追記】

GoogleのFEED API公開停止に伴い以下のコードが使用できないようになりました。

jQueryを使用した代替え案もあるのですがクロスドメイン対応のため処理が複雑になり、別途PHPファイルなどを準備しなくてはいけないなど、簡単にg.o.a.tの新着記事を好きな場所に表示させたいという意図とは離れたものになってしまうので公開を停止させていただきます。ご了承のほどよろしくお願いいたします。

【/追記】

g.o.a.tで書いた記事を自分のサイトのサイドバーなどに表示させるスクリプトを書きました。ついでにg.o.a.tのデザインに合わせたCSSも書いたので使いたい方は使って下さい。DEMOページというか自分のg.o.a.tの記事は以下のように表示されます。

g.o.a.tの新着記事一覧

ソースコード

Javascript

以下のコードを必ず改変してから内に貼り付けてください。改変するのは5行目と6行目です。

  • 5行目:自分のブログのURLを貼り付けて下さい。
  • 6行目:g.o.a.tのRSSのURLを貼り付けて下さい。RSSのURLはg.o.a.tの最下部右下にあるRSSのマークにあるリンクです。
  • 7行目(任意):表示させる記事数です。初期設定は10記事にしてあります。変更する場合はこの数字を変更してください。
右下のアイコンがRSSリンクです。リンク先のURLを6行目の例のように貼り付けて下さい。
右下のアイコンがRSSリンクです。リンク先のURLを6行目の例のように貼り付けて下さい。
<script src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("feeds", "1");
function initialize() {
 var blogURL = "http://sho-yamane.goat.me/";
 var feed = new google.feeds.Feed("https://s3-ap-northeast-1.amazonaws.com/zipang/blog/user/3r1Pm3V0/3r1Pm40R.feed");
 feed.setNumEntries(10);
 feed.load(function(result) {
  if (!result.error) {
   var container = document.getElementById("goat-entries");
   var useFeed = "";
   for (var i = 0; i < result.feed.entries.length; i++) {
    var entry = result.feed.entries[i];
    var pdate = new Date(entry.publishedDate);
    var mnames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    var strdate = mnames[pdate.getMonth()] + ' ' + pdate.getDate() + ', ' + pdate.getFullYear();
    var no_image = '代わりの画像のURL';
    var first_image = (entry.content.match(/http(?:s|):{1}[\S_-]+\.(?:jpg|gif|png)/) != null) ? entry.content.match(/http(?:s|):{1}[\S_-]+\.(?:jpg|gif|png)/) : no_image.match(/http(?:s|):{1}[\S_-]+\.(?:jpg|gif|png)/);
    useFeed += '<a href="' + entry.link + '"><div class="goat-new-entrie" style="background-image: url(' + first_image[0] + ');"><div class="goat-new-entry-content"><span class="goat-entry-date">' + strdate + '</span><span class="goat-entry-title">' + entry.title + '</span></div></div></a>';
   }
  container.innerHTML = '<div class="goat-new-entries">' + useFeed + '</div>';
 }
 });
}
google.setOnLoadCallback(initialize);
</script>

HTML

新着記事一覧を表示したい場所に以下のHTMLをコピペして貼り付けて下さい。

<div id="goat-entries"></div>

CSS

g.o.a.tの世界観を変えないようにg.o.a.tのトップページに似たようなCSSも書きましたので以下に置いておきます。使いたい方はCSSに以下のコードを貼り付けて使って下さい。自分はちょっとフォントだけ変えて使ってます。ご自由に改変して使って下さい。

#goat-entries {
  font-family: Arial, Roboto, "Droid Sans", 游ゴシック, YuGothic, ヒラギノ角ゴシック, "Hiragino Sans", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif;
}
#goat-entries a {
  text-decoration: none;
  color: #fff;
}
#goat-entries a .goat-new-entrie {
  display: table;
  position: relative;
  width: 100%;
  height: 450px;
  background-size: cover;
  background-position: center center;
}
#goat-entries a .goat-new-entrie:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  -webkit-transition: 0.1s;
  -moz-transition: 0.1s;
  -ms-transition: 0.1s;
  -o-transition: 0.1s;
  transition: 0.1s;
}
#goat-entries a:hover .goat-new-entrie:after {
  background-color: rgba(0, 0, 0, 0.6);
}
#goat-entries a .goat-new-entrie .goat-new-entry-content {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  position: relative;
  z-index: 2;
}
#goat-entries a .goat-new-entrie .goat-new-entry-content .goat-entry-date {
  font-family: 'Droid Serif',serif;
  font-style: italic;
  display: block;
  font-size: 16px;
  color: #fff;
  text-decoration: none;
}
#goat-entries a .goat-new-entrie .goat-new-entry-content .goat-entry-date:before,
#goat-entries a .goat-new-entrie .goat-new-entry-content .goat-entry-date:after {
  content: '';
  display: inline-block;
  background-color: #fff;
  width: 32px;
  height: 1px;
  margin: -1px 17px 0;
  vertical-align: middle;
}
#goat-entries a .goat-new-entrie .goat-new-entry-content .goat-entry-title {
  display: block;
  font-size: 36px;
  margin: 15px 10px 0px;
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  line-height: 1.3;
}

自分のg.o.a.tは以下になります。京都の写真をメインにアップしてるので良かったらのぞいてみて下さい。それでは。

g.o.a.t from Kyoto

© 2011 - 2017 ShoYamane