rcmdnk's blog

20150209_hatebulist_200_200

はてなブックマークの人気リストを自作&httpsでも出来るようにする の所でリストをアップデートしてみましたが、 サイドバーのRecent Postsを画像付きにした で、同じサイドバーにある最近の投稿リストを画像付きにしたので、 同じような雰囲気に出来るように画像付きのリストにしてみました。

Sponsored Links

画像の取り方

Recent Postsはローカルでビルドするときに作るので Octopressの中で設定してある値を使ったり出来ますが、 はてなブックマークのリストは実際表示するときにJavaScriptで作るので 同じような事は出来ません。

以前のリストの取り方だと、リストの中には ページのタイトル、リンクとブックマーク数くらいしか無いので 画像を取るためには直接各ページにアクセスするか、 もしくは各ページ用の画像を適当な規則で決めたURLにおいておくかする必要があります。

最初、各ページの画像を作っておいておこうかと思ったんですが、 ちょっと面倒なので別の方法を。

ちょっと探したら、Feedを取ってきてその中の画像を使うという方法があったので、 これを参考にさせてもらいました。

【修正済】コピペで簡単! はてなブログの人気記事を画像付きで表示させる方法。 - #ChiroruLab

この方法だとタイトルやリンクもこの中で一緒に取ってくることになります。

source/_includes/custom/asides/hatebu.htmlを下のように変更します。

source/_includes/custom/asides/hatebu.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
{% if site.hatena_popular_posts %}
<section>
  <h1><a href="http://b.hatena.ne.jp/entrylist?mode=rss&sort=count&url={{site.url}}">Popular Posts</a></h1>
  <div id="hatena-bookmark-widget"><div>
     <ul>
     </ul>
  </div>
  <script src="//www.google.com/jsapi"></script>
  <script type="text/javascript">
    google.load("feeds", "1");
    function getHatebuEntries() {
      var feed = new google.feeds.Feed("http://b.hatena.ne.jp/entrylist?mode=rss&sort=count&url={{site.url}}");
      feed.setNumEntries({% if site.hatena_popular_num %}{{site.hatena_popular_num}}{% else %}10{% endif %});
      feed.load(function(result) {
        if (!result.error) {
          var f = document.createDocumentFragment();
          for (var i = 0; i < result.feed.entries.length; i++) {
            var entry = result.feed.entries[i];
            var l = document.createElement('li');
            var d = document.createElement('div');
            d.className="group";
            var wrap = document.createElement('div');
            wrap.className="title-smallthumb";
            var imglink = document.createElement('a');
            imglink.href = entry.link;
            var img = document.createElement('img');
            img.src = entry.content.match(/(http:){1}[\S_-]+\.(?:jpg|gif|png)/)[0];
            imglink.appendChild(img);
            wrap.appendChild(imglink);
            d.appendChild(wrap);
            var title = document.createElement('a');
            title.href = entry.link;
            title.className = 'hatena-bookmark-entrytitle';
            title.appendChild(document.createTextNode(entry.title.replace(/ #.*/,"").replace(/ - rcm.*/,"")));
            d.appendChild(title);
            d.appendChild(document.createElement('br'));
            var count = document.createElement('a');
            count.href = '//b.hatena.ne.jp/entry/' + entry.link;
            var users = document.createElement('img');
            users.src="http://b.hatena.ne.jp/entry/image/" + entry.link;
            count.appendChild(users);
            d.appendChild(count);
            l.appendChild(document.createElement('div').appendChild(d));
            f.appendChild(l);
          }
          var t = document.getElementById('hatena-bookmark-widget').getElementsByTagName('ul')[0];
          t.appendChild(f);
        }
      });
    }
    google.setOnLoadCallback(getHatebuEntries);
    </script>
</section>
{% endif %}

各ページの画像の設定

各ページの画像は自動的に設定されますが、自分で変更することも出来ます。

変更するにはFirefoxかGoogle Chromeではてなブックマークの拡張を入れる必要があります。

はてなブックマークFirefox拡張で新しいインターネットを体験しよう

はてなブックマークGoogle Chrome拡張で新しい情報を発見しよう

これらの拡張経由でブックマーク編集ページを表示させると 画像を設定できる所があるのでそれで変更すればOK。

Sponsored Links
Sponsored Links

« サイドバーのRecent Postsを画像付きにした Google AnalyticsのView数を取ってきてランキングを作る »