ひとり部長のひとりごと

社会人1年目で社内起業を始めたひとり部長がその経験を語ります。Mac関連もつぶやきます。映画のレビューはサブブログに移行しました。世の中の明るいニュースだけをまとめたエントリーも始めました。

【またかよ】最強の記事紹介ブックマークレットを作りました【読者+ボタン付】

追記

結局この形に落ち着きそうです

さらに追記

こうなりました


こんにちは

前回、紹介リンク先のツイッターはてブのシェアボタンがついたブックマークレットを公開しましたが、

さらにこいつを昇華させたいと思い、はてなブログの記事に関しては「読者追加ボタン」がつくようにしました。

はてなユーザーがこのブックマークレットを使ってシェアしあえるようになれば、もっとお互いに読者を増やすことができそうです。

読者ボタンiframeを生成するブックマークレット

まずは、読者ボタンを生成するだけのブックマークレットを作ってみましょう。

javascript: (function() {
  function author() {
    var pi = document.getElementsByTagName('html'); 
    for (i = 0; i < pi.length; i++) { 
      if (pi[i].getAttribute("data-admin-domain") == "http://blog.hatena.ne.jp") { 
        return pi[i].getAttribute("data-author");}} 
        return "";}
  function blog() {
    var pi = document.getElementsByTagName('html'); 
    for (i = 0; i < pi.length; i++) { 
      if (pi[i].getAttribute("data-admin-domain") == "http://blog.hatena.ne.jp") { 
        return pi[i].getAttribute("data-blog");}} 
        return "";}
  var author = author();
  var blog = blog();
  var card = '<iframe src="http://blog.hatena.ne.jp/'+author+'/'+blog+'/subscribe/iframe" allowtransparency="true" frameborder="0" scrolling="no" width="150" height="28"></iframe>';
  prompt(card,card);
})();

これは、はてなブログのソースのうち、[html]内に含まれているdata-authordata-admin-blogを抽出して、読者ボタンコードを生成しているだけです。

試しに一個前の記事でやってみると、以下のコードが現れます

<iframe class="iframe" src="http://blog.hatena.ne.jp/hitoribucho/hitoribucho.hatenablog.com/subscribe/iframe" allowtransparency="true" frameborder="0" scrolling="no" width="150" height="28"></iframe>

ブログの管理画面でコピーできる「読者になるボタン」のやつですね。 こいつをブログに貼り付けると、当然ひとり部長の読者になるボタンが出てきます。

こいつと、前回のツイッターはてぶシェア機能付きリンクカード生成ブックマークレットと合わせれば、「ツイッターはてぶシェア機能および読者登録ボタン付きリンクカード生成ブックマークレット」が完成します。もちろん、はてなサービスではないページに適用しても、読者ボタンは出てきません。

じゃーん。

ツイッターはてぶシェア機能および読者登録ボタン付きリンクカード生成ブックマークレット

javascript: (function() {
    function author() {
        var pi = document.getElementsByTagName('html');
        for (i = 0; i < pi.length; i++) {
            if (pi[i].getAttribute("data-admin-domain") == "http://blog.hatena.ne.jp") {
                return pi[i].getAttribute("data-author");
            }
        }
        return "";
    }

    function blog() {
        var pi = document.getElementsByTagName('html');
        for (i = 0; i < pi.length; i++) {
            if (pi[i].getAttribute("data-admin-domain") == "http://blog.hatena.ne.jp") {
                return pi[i].getAttribute("data-blog");
            }
        }
        return "";
    }

    function productImg() {
        var f = document.evaluate('//link[(@rel=\'icon\') or (@rel=\'shortcut icon\') or (@rel=\'ICON\') or (@rel=\'SHORTCUT ICON\')][1]/@href', document, null, XPathResult.STRING_TYPE, null);
        var u = f.stringValue; 
        var favicon = (u == '') ? 'http://' + location.host + '/favicon.ico' : (u.substring(0, 7) != 'http://') ? 'http://' + location.host + '/' + u : u;
        var pi = document.getElementsByTagName('meta');
        for (i = 0; i < pi.length; i++) {
            if (pi[i].getAttribute("property") == "og:image") {
                return pi[i].getAttribute("content");
            }
        }
        return favicon;
        return "";
    }
    var author = author();
    var blog = blog();
    var ogimg = productImg();
    var title = document.title;
    var desc = document.getElementsByName('description').item(0) ? document.getElementsByName('description').item(0).content : document.location.href;
    var url = window.location.href;
    var card = '<!--' + title + '-->\n<div class="entrylist"><div class="image"><a href="' + url + '"><img src="' + ogimg + '"></a></div><div class="caption"><div class="pagetitle"><a href="' + url + '">' + title + '</a></div><div class="description"><a href="' + url + '">' + desc + '</a></div></div><div class="tweetbtn"><a href="javascript:window.location=\'twitter://post?message=\'+encodeURIComponent(\'' + title + '%20' + url + '\');"><img src="https://goo.gl/lFvqh6"></a></div><div class="hatebubtn"><a href="javascript:window.open(\'http://b.hatena.ne.jp/entry/' + url + '\');"><img src="https://goo.gl/yYRxpB"></a></div><iframe class="iframe" src="http://blog.hatena.ne.jp/' + author + '/' + blog + '/subscribe/iframe" allowtransparency="true" frameborder="0" scrolling="no" width="150" height="28"></iframe></div>';
    window.prompt("コピー", card);
})();

これをブックマークレットで使いブログのhtmlで貼り付けると、上のような感じででてきます!

もう一度マスクドにしおかさんに登場していただきましょう。最新の記事をシェアしてみます。

・読者ボタンは、マスクドさんのブログ

ツイッターシェアは、記事のURLとタイトルの投稿

はてなブックマークは、記事のはてぶ

とこれぞ本当に最強ブックマークレットが完成しました。

クラスは付いていますが、スタイルを指定してあげないと、整いません。 一応、上であげているスタイルをのっけておきますので、使いたい人はどうぞ。

.entrylist {position:relative;width:100%;height:110px;border-radius:4px;border:2px solid #000;margin-bottom:5px;}
.entrylist a {display:block;width:100%;height:100%;text-decoration:none;color:#000;}
.entrylist:hover {margin-left: 3px;}
.entrylist div.image{width:65px;height:65px;float:left;margin:5px 5px;}
.image img {width: 100%;height: 100%;}
.caption {height:100px;margin:5px 35px 5px 5px;overflow:hidden;}
.pagetitle {font-size:90%;font-weight:bold;}
.pagetitle a{line-height:1.4rem;}
.description {font-size:80%;color:#444;}
.description a{line-height:1.2em;}
.hatebubtn img,.tweetbtn img{width:100%;height:100%;}
.tweetbtn{position:absolute;width:30px;height:30px;top:5px;right:5px;}
.hatebubtn{position:absolute;width:30px;height:30px;top:40px;right:5px;}
.entrylist iframe{position:absolute;bottom:5px;left:5px;}

こいつをざっとコピーしてカスタムCSSに貼り付けるだけです。 簡単なお仕事でしょ?

では!

せっかくなので、いつも記事を読んでくれている人のページをシェアしちゃおう。 どんどん読者登録しちゃいましょう!w

(需要あるといいな・・・・。