追記
結局この形に落ち着きそうです
さらに追記
こうなりました
こんにちは
前回、紹介リンク先のツイッターとはてブのシェアボタンがついたブックマークレットを公開しましたが、
さらにこいつを昇華させたいと思い、はてなブログの記事に関しては「読者追加ボタン」がつくようにしました。
はてなユーザーがこのブックマークレットを使ってシェアしあえるようになれば、もっとお互いに読者を増やすことができそうです。
読者ボタン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;}
こいつをざっとコピーしてカスタムCSSに貼り付けるだけです。 簡単なお仕事でしょ?
では!
せっかくなので、いつも記事を読んでくれている人のページをシェアしちゃおう。 どんどん読者登録しちゃいましょう!w
(需要あるといいな・・・・。