【ブログカード風】シンプルに記事をシェアするブックマークレットを作りました

ブログを書くとき、記事へのリンクをどのように貼っていますか？

べた書きですか？ ShareHTMLですか？ GetTabInfoなんて拡張機能を使っている人もいらっしゃるかもしれません。

最近よく見る方式は「ブログカード」。

はてなブログでは記事をシェアするときにURLを書いておけば自動的にブログカードという形式で表示されるようになっています。

こんな感じ。最近よく見ますね。

faviconとかはてブ数とか表示できる割にシンプルで、結構イイと思います。

でも、これには大きな問題が1つ。

実は、リンク元がはてなになってしまうので、ピンバックを送ることができないんです。

そこで、わたくしは考えました。

似たようなデザインで表示されればいいんでしょ？ 自分でブックマークレット作っちゃえ！ と。

できたものがこれ。

SNSボタンのデザインがばらばらだったので自作してみた。(Stinger5カスタマイズ)

困ったときは猫に喋らせろというのが僕の家の家訓なんですよ。たぶん。 さて。SNSシェア用のボタンはほとんどのブログが設置しているのではないでしょうか。 ただ、シェアボタンは各SNSが作っているので、デ

sakueji.com

なかなかよござんすでしょ？

ぜひ導入してみてください。記事の作成がさらに捗るはずです。

導入方法

技術的なことよりも先に、使えるようにしましょう。

それぞれの方式のメリットデメリットはこんな感じ。

本家のメリットはなによりシンプルに書けること。

挿入すると3行になりました。

一方自作の方は……

たしかにごちゃごちゃしてはいるんですけど……それは綺麗に表示するためですから！
ほら、白鳥も水面下では頑張ってバタ足してるって言うでしょ？
それです。それ。

私はピンバックもらえるとかなり喜んでしまう人間ですので、ピンバックが送れないというのはなかなかきつい。

ピンバックを送りたい人が世の中にどれくらいいるかは存じ上げませんが、そのような人につかっていただけたらと思います。

ここまで読んで、「本家」「はてな風」どちらを使うか決めましたか？

それでは導入に参りましょう。

ピンバックなんて送らない！ という人向け。本家カード用ブックマークレット

どこか好きなページをブックマークしてください。ブックマークバーに表示するようにすると便利です。

次に、このコードをコピーしてください。(複数回クリックすると全選択になるはず)

javascript:prompt("blogcard",'<iframe style="width:100%;height:155px;max-width:500px;margin:0 0 20px 0;display:block;" title="'+document.title+'" src="http://hatenablog.com/embed?url='+location.href+'" width="300" height="150" frameborder="0" scrolling="no"></iframe>');

ブックマークバーに表示されているブックマークの上で右クリックし、「編集」をクリックします。

あとは、「ブログカード」などと名前をつけて、URL
のところにペーストして保存すればOKです。

ポチッと押せばダイアログが開き、コードがコピーできるようになっているはずです。

ピンバック送りたい人向け。自作カード用ブックマークレット

やり方は上の場合と同じです。

下のコードをコピペして登録してください。

javascript:(function(){javascript:(function(d,j,b,s){function r(){setTimeout(function(){(typeof jQuery=='undefined')?r():b(jQuery)},99)}(j)?b(jQuery):d.body.appendChild(d.createElement('script')).src='//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js',r()})(document,this.jQuery,function($){var ogurl=$("meta[property='og:url']").attr("content");var ogtitle=$("meta[property='og:title']").attr("content");var ogdesc=$("meta[property='og:description']").attr("content");var ogimg=$("meta[property='og:image']:last").attr("content");var urlhost=location.host;if(ogtitle==null){ogtitle=document.title};if(ogurl==null){ogurl=location.href};if(ogdesc==null){ogdesc=""};if(ogimg==null){ogimg="http://capture.heartrails.com/100x100/?"+location.href};var card='<!--'+ogtitle+'--><div style="width:100%;max-width:500px;margin:0 0 20px 0;background:#fff;border:1px solid#ccc;border-radius:5px;box-sizing:border-box;padding:12px;"><div style="width:100px;height:100px;float:right;margin:0 0 10px 10px;padding:0;position:relative;overflow:hidden;"><a href="'+ogurl+'"style="position:absolute;width:1000%;left:50%;margin:0 0 0 -500%;text-align:center;"><img src="'+ogimg+'"style="width:auto;height:100px;margin:0;vertical-align:middle;display:inline;"></a></div><p style="margin:0;"><a href="'+ogurl+'"style="color:#333;font-weight:bold;text-decoration:none;font-size:17px;margin:0 0 10px 0;line-height:1.5;">'+ogtitle+'</a></p><p style="margin:0;color:#666;font-size:11px;line-height:1.5;">'+ogdesc+'</p><div style="border-top:1px solid#eee;clear:both;margin:10px 0 0 0;padding:0;"><p style="color:#999;margin:3px 0 0 0;font-size:11px;"><img src="http://favicon.hatena.ne.jp/?url='+ogurl+'"style="margin:0 5px 0 0;padding:0;border:none;display:inline;vertical-align:middle;">'+urlhost+'<img src="http://b.hatena.ne.jp/entry/image/'+ogurl+'"style="margin:0 0 0 5px;padding:0;border:none;display:inline;vertical-align:middle;"></p></div></div>';prompt("blogcard",card);});})();

はてな風カードでやっていること

ここからは少し技術的な話なので興味の無い方はすっ飛ばして下の方にあるSNSシェアボタンをぽちっと押していただければOKです！笑

はてな風カード(以下自作カード)では、開かれているページのOGP(Open Graph Protocol)を取得して表示しています。Facebookにシェアするときに表示されるアレですね。

faviconとはてブ数の表示ははてなのAPIを使わせていただいています。(非公開APIなのでもしかしたらまずいのかも)

コードのうち大半はCSSで、見た目を統一するために書いています。ブログ環境によっては表示が崩れるかもしれませんが、ご容赦ください。

サムネイル

サムネイルにはOGPに登録されている画像を使っていますが、これを正方形にトリミングするのに苦労しました。

最終的にはこのページを参考にしました。ありがたやありがたや。

CSSのみで色んなサイズの画像を横並びにして縦横サイズを合わせる方法（レスポンシブも可）

どうもこんにちは。Toshikuraです。今回のTipsは【CSSのみで色んなサイズの画像を横並びにして縦横サイズを合わせる方法（レスポンシブも可）】です。jQueryをつかえば一瞬でできる内容ですが…CSSのみでも簡単に実装できますので、…

zxcvbnmnbvcxz.com

アイキャッチ画像に登録されているのは9割9分横長だろうと勝手に決めつけ、
縦方向の調整を放棄することによってコードの量を(ちょっと)減らしています。

OGPがない場合

OGPが記述されていない場合、何も表示されないと困るので、要約を表示するのを泣く泣く諦めています。

サムネイルはHeartRails Captureを使って表示しています。ありがたや。

HeartRails Capture | サムネイル画像／PDF ファイル作成サービス

capture.heartrails.com

あとがき

読みやすく記事をシェアすることのできる「はてなブログカード」。しかし、はてなブログカードにはピンバックが送れないという(個人的には)致命的な弱点がありました。

それを改善するため、ブログカード風の見た目でシェア用リンクを生成することのできる
ブックマークレットを書いてみました。
使っていただければ幸いです。

それでは！