はてなブログカードをやめて Embedly に移行してもいいんじゃないか。公式ボタンもあるし。ブックマークレットも作った。

※2017年3月15日(水)、Dropbox のパブリックフォルダが廃止されたためブックマークレットが動かなくなりました。URL を差し替えたリンクに直しましたので、再登録お願いいたします。

他のブログを紹介する方法として ShareHtml やはてなブログカードが有名。

それらに取って代わるものを見つけました。

はてなブログカードの問題点

はてなブログのブログカードは拙作ブックマークレットがあったりしますが、既知の問題が。

RSS 配信時、表示が乱れる問題
リファラが残らない問題

@hayashikejinan リファラに残ってるのはhttp://t.co/7JGhSbdAXqだけじゃない？これはどこかのサイトに貼られたはてなブログカード経由で来てくれたってことになるやろ。なので、どこに貼られてたのか知りたいってやつよ

— bouya Imamura (@s56bouya) June 8, 2015

正確には「？url=参照されてる記事」で、こういうの→http://t.co/6qFDmaIlg2 なんだけど、だいたいわかるだろう、だいたいでいんだよ

— bouya Imamura (@s56bouya) June 19, 2015

RSS は抜粋配信をすれば対症療法としては一応なんとかなりますが、リファラはいかんせんどうにも。

というわけで Embedly

Provide a clean, responsive, and shareable card for any content on the web. Use them to make your posts easier to share and repost.

Embedly

ウェブの記事を簡単にレスポンシブなカードでシェアできる、という Web サービス。

Embedly で出力されるコード&表示サンプル

貼り付け用の Embedly カードはウェブ上から生成でき、Embedly カードを作成すると

<a class="embedly-card" href="/">林家次男| 開いた口が半開きになるブログ</a><script async="" charset="UTF-8" src="//cdn.embedly.com/widgets/platform.js"></script>

で、普通のリンク+ js になっており前述の問題は起きない。js が走って出力された後は

<iframe frameborder="0" scrolling="no" allowtransparency="true" allowfullscreen="true" src="http://cdn.embedly.com/widgets/card.html#sid=57f5ec8260ae4f77ad4083e66db38207&amp;url=http%3A%2F%2Fhayashikejinan.com%2F" id="emb_176199259" class="embedly-card" style="border: none; position: relative; visibility: visible; display: block; margin: 10px auto; max-width: 99%; min-width: 200px;" width="600" height="333"></iframe>

林家次男| 開いた口が半開きになるブログ

こう。出力される iframe には embedly-card というクラスが振られているので、マージンなど気に入らない場合は css で調整可能。 ( iframe[src*="cdn.embedly.com"] でもできますけども。

右上の紙飛行機アイコンからは再共有できるという素晴らしさ。