はじめに

はてなブログ、普通に書いている分にはマークダウンで書けたり楽しく書けるし画像のアップロードも楽チンなんですけど、同一カテゴリーの記事を表示してくれなかったり、ちょっとしんどい部分があります。

ないなら作る

ということで、Javascriptでカテゴリのフィードから記事の内容を取ってきて、記事の下にくっつけるスクリプトを書いてみました。

ちゃんと動作していればこんな感じ↓で記事の下に関連記事が挿入されます。

f:id:yoh_mar28:20161206154901p:plain

まぁはてなブログを無料プランで使用していると記事下のAdsenseが勝手にくっついてしまうため終わりと勘違いされてあんまり参照されないかもしれませんが・・・

要素技術

カテゴリーのフィード

はてなブログはカテゴリーごとのフィードを発行しているので今回はこちらを使用します。記事のタイトルとURLがわかれば最悪リンクは貼れるので

http://nodemand.hatenablog.com/feed/category/PORTABOOK

embedなページ

はてなブログの記事は他のページに組み込まれることを想定して「embed用」のURLが存在します。これをiframeで貼り付ければはてなブログ標準のページ組み込みができるわけです。

http://nodemand.hatenablog.com/embed/2016/12/04/140348

jQuery

まぁおなじみのjQueryを使って特定のdivの中に要素を追加したりしてます。

コード

とりあえず自分用に使えればいいか～～～ってノリで作っているので動作しないかもしれません。何かあればコメントいただけると。

ブログのフッターに入れる内容

記事全体が読み込まれた後に実行される必要があるので、フッターに入れておきます。はてなブログへのJavaScriptの組み込み方はいろんな方がやられている内容だと思いますので、そちらを参照していただけると。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type="text/javascript">
    function gen_emb(emb_url, str_title){
        var result = '<p><iframe src="'+emb_url
        +'" title="'+str_title
        +'" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px;  margin: 10px 0px;"></iframe><cite class="hatena-citation"></cite></p>'
        return result;
    }
    function get_category_url(){
        var src_url = $("div.entry-categories a:first-child").attr("href");
        console.log(src_url);
        if(!src_url){
            return null;
        }else{
            return src_url.replace("archive", "feed");
        }
    }
    $(function(){
        var category = get_category_url();
        console.log(category);
        if (category){
        $.ajax({
            url: category,
            type: "GET",
            dataType: "xml",
            timeout: 1000,
            error: function(){
                console.log("failed to fetch category feeds");
            },
            success:function(xml){
                var cnt = 0 ;
                $(xml).find("entry").each(function(){
                    if(cnt < 3){
                    var str_title = $(this).find("title").text();
                    var emb_url = $(this).find("link").attr("href").replace("entry","embed");
                    console.log(str_title);
                    console.log(emb_url);
                    var emb_html = gen_emb(emb_url, str_title);
                    $("div#related-articles").append(emb_html);
                    }
                    cnt+=1;
                });
                if(cnt > 0){
                $("div#related-articles").show();
                }
            }
        });
        }
    })
    </script>