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

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

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

 

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

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

でこにく ↓

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

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

 

ちょっと変えたところ

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

バリデートしてみた
バリデートしてみた

 

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

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

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

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

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

 

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

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

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

ブックマークレット起動。コピーすればOK。
ブックマークレット起動。コピーすればOK。

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

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>

ホホまとめ

特になし。要望・杜撰なところなどあればコメントください。


投稿日

カテゴリー:

投稿者:

コメント

“はてなブログ ブログカードをブックマークレット化してみたよ” への35件のフィードバック

  1. beatride Avatar

    元々その拡張機能愛用していたのだけど、参照先が気になっていたのでコード使わせていただきます(っ´ω`c)べんり!

  2. akamejoshi Avatar

    なんと!"φ(・ェ・o)~メモメモ

  3. georgek5555 Avatar

    あ、これよさそう。

  4. feelingplace Avatar

    1度使ってみなきゃな〜

  5. hinaloe Avatar

    これ、公式のみたく

    “`
    title
    “`

    にした方がいいでないですか?(一応ビジュアルエディタ対策にもなる)
    https://gist.github.com/b607ef76b1ee839e35f6

    1. hinaloe Avatar

      加えてSSLなページでjquery読み込めなくてエラー出る点も。

      1. hayashikejinan Avatar

        なるほど、参考にします。
        確かにそうするのがベターですね!
        次回更新時に。

  6. hayashikejinan Avatar

    hinaloe さんのご指摘を踏まえしれっと v1.3 に更新しました。

  7. まなしば(Manami Shibata) (@manami1030) Avatar

    いいですね!ぜひ使わせていただきます^^

  8. […] はてなのブログカードのブックマークレット はてなブログ ブログカードをブックマークレット化してみたよ […]

  9. abeshin22 Avatar

    たすかる。

  10. shintarowfresh Avatar

    RSSで読む人のことを考慮すると通常リンクも表示できる用にブックマークレット改造したいところですが、それって可能かなぁ?

    1. hayashikejinan Avatar

      というのは iframe とは別でアンカーつけるということでしょうか?

      1. shintarowfresh Avatar

        知識がなくて恐縮ですがアンカーつける他に何らかの方法ってあるでしょうか?RSSリーダーの仕様に強制されるので、iframeだけだとものによってはかなり見づらいんですよね。

        1. hayashikejinan Avatar

          Feedly と FireFox デフォルトの RSS 表示を試してみました。
          RSS リーダーによって許可(書き換えられたり消されたり)される属性やタグが一貫されないため、ブックマークレット単体での対応は正直とても難しいと考えます。
          WordPress なら RSS 用のスタイルシートを当てるフィルターフックを使うのが一番無難でしょうか。
          折に触れていろいろ試してはみます、近々にどうこうできずすみません。

          1. shintarowfresh Avatar

            いえ、こちらこそ不躾なお願いをしてすみません。丁寧な対応に感謝します。ありがとうございました。

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

  12. […] こちらで紹介されているブックマークレットから生成されるhtmlコードをWorkflowで取得するという流れです。 はてなブログ ブログカードをブックマークレット化してみたよ […]

  13. がちょぴん Avatar

    「Chrome ウェブストア」内にある拡張機能ページで、
    ブックマークレット利用しても貼り付けコードが表示されません。
    Chrome 拡張機能ページではコードが生成されないのでしょうか?

  14. chan38 Avatar

    大変ためになりました!

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

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

  17. […] はてなブログ ブログカードをブックマークレット化してみたよ ライブドアブログに移動して、こういう機能はないのかな?と思いつつ、放置してしまっていたのですが、ありましたよ […]

コメント、してみません?

%d人のブロガーが「いいね」をつけました。