はてなブログブログカードをブックマークレット化してみたよ

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

先日でこにくというサイトで見かけてちょいちょい使っていたのですけども、このためだけに拡張機能を入れるのはなんか違うなぁと思ったのでブックマークレット化。

参考にしたというかきっかけになった記事

最初にでこにくを見たんですけれど、でこにくさんが参考にした、というところまで。

でこにく ↓

でこにくさんが参考にした記事 ↓

とまぁ、こういう感じでカード形式なリンクを作れる、というやつです。

ちょっと変えたところ

mbdb さんの iframe ソースで作ると、HTML5バリデータで怒られるのでそこを変更。

mbdb さん追記で言及されている

リファラーを見ていて気づいたんですが、ブログカードでリンクを挿入すると、参照先がhttps://hatenablog-parts.com/となり、リンク先ブログのアクセス解析からは自分が発リンクしたことが伝わりません。

WordPressのピンバックはもちろん、Google Analyticsのトラックバックからもログを参照できないので、「それは嫌だなぁ」という人は普通にリンクを挿入したほうが良いと思います。

というのは a タグを挿入することに。リファラは無理ですが、ピンは通るはず。

あとは iframe にクラスを付加して、~~横幅は480px~~ 100%に。

ブックマークレット、できた

ブックマークレットの登録はこのリンク→ はてなブログカードをブックマークバーにドラッグ&ドロップで。

ブログカードを作りたい記事にブラウザでアクセスしてブックマークレットをクリックすると

生成されるコードはこんな感じ。

2015.04.06 横幅100% にしました。

<iframe class="bookmarklet hatena-embed" src="https://hatenablog-parts.com/embed?url=http%3A%2F%2Fhayashikejinan.com%2Fblog%2F1166%2F" title="はてなブログ ブログカードをブックマークレット化してみたよ" style="border:none;display:block;margin:0 0 1.7rem;overflow:hidden;height:155px;width:100%;max-width:100%;"><a href="/blog/1166/" target="_blank">はてなブログ ブログカードをブックマークレット化してみたよ</a></iframe>