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

追記

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

ひとり部長のひとりごと

社内起業を始めた入社2年目の社員がつぶやく、日常、映画鑑賞の感想レビュー、その他ガジェットの情報など。

さらに追記

こうなりました

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

前回、紹介リンク先のツイッターとはてブのシェアボタンがついたブックマークレットを公開しましたが、さらにこいつを昇華させたいと思い、はてなブログの記事に関しては「読者追加ボタン」がつくようにしました。見ているページのシェアボタンを作成するブックマークレットを作成しました+おまけ - ひとり部長のひとりごとリンク先に飛…

こんにちは

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

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

見ているページのシェアボタンを作成するブックマークレットを作成しました+おまけ - ひとり部長のひとりごと

リンク先に飛ぶ前に共有したいみんな忙しい Twitterシェアのブックマークレットリンク先のシェアができるボタンそしてこいつが最終形態！！！！リンク先に飛ぶ前に共有したい今回は、「ブックマークレットを作成するブックマークレット」の紹介です。ブックマークレットって「今見ているページ」に対して行うものなので、基…

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

読者ボタン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-authorとdata-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;}