えじの自由帳

今の自分を書きためるブログ

Wordpress

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

2014/11/03

bookmarklet0

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

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

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

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

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

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

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

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

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

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

できたものがこれ。

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

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

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

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

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

導入方法

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

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

本家はてな風
メリットシンプルピンバック送れる
デメリットピンバック送れないごちゃごちゃ

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

bookmarklet1

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

一方自作の方は……

bookmarklet2

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

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

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

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

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

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

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

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

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>');

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

bookmarklet3

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

bookmarklet4

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

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

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

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

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のみでも簡単に実装できますので、...

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

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

OGPがない場合

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

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

あとがき

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

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

それでは!

 Wordpress