はてなブックマーク登録ボタンを一覧ページに設置する方法と SSL 対応の方法
2017/05/31 09:00
  • はてなブックマークのボタンを一覧ページで有効にする方法、 SSL サイトに対応する方法をまとめます。

    はてなブックマークを登録するボタンは、公式に設置方法が記載されていますが、
    http のリンクがあったり、ブックマークさせたいURLを指定されていなかったり色々と不便があります。

    そこで、たとえば ここ のようなブログの一覧ページ内で、各ブログ記事をブックマークできるように
    設置タグを修正しました。

    また、 SSL 対応もついでに行いました。

    はてなブックマークの公式のタグ

    たとえば、はてブの公式サイトにあるツールを使うと、
    以下のようなタグが生成されると思います。

    <a href="http://b.hatena.ne.jp/entry/" 
        class="hatena-bookmark-button" 
        data-hatena-bookmark-layout="basic-label-counter" 
        data-hatena-bookmark-lang="ja" 
        title="このエントリーをはてなブックマークに追加">
        <img src="https://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" />
    </a>
    <script type="text/javascript" src="https://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
    

    これだと、ブックマークさせたい URL や記事タイトルを指定できません。
    必然的に現在表示しているページがブックマーク対象の URL, タイトルとなってしまいます。

    はてブが正しく反映されない例

    ブックマークさせる URL, タイトルを任意に指定する

    任意に指定するには、以下のようにコードを修正する必要があります。

    <a href="http://b.hatena.ne.jp/entry/" 
        class="hatena-bookmark-button" 
        data-hatena-bookmark-url="{{info.base_url}}article/post/{{article.id}}" 
        data-hatena-bookmark-title="#{article.subject}"
        data-hatena-bookmark-layout="basic-label-counter" 
        data-hatena-bookmark-lang="ja" 
        title="このエントリーをはてなブックマークに追加">
        <img src="https://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" />
    </a>
    <script type="text/javascript" src="https://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
    

    data-hatena-bookmark-url="{{info.base_url}}article/post/{{article.id}}"
    data-hatena-bookmark-title="#{article.subject}"

    data-hatena-bookmark-url, data-hatena-bookmark-title を追記してあげるだけですね。
    はてブが正しく反映された例

    SSL に対応する

    はてなブックマークの登録ボタンは SSL にも対応しているので、 画像や JS のリンク先を
    //b.st-hatena.com/.....
    みたいにすればOKです。
    実際に当サイトでもこの設定でうまく行っています。

    以上です。

    人気ブログランキングへ ブログランキング・にほんブログ村へ
    ↑応援よろしくお願いします!m(_ _)m

  • <2017/05/31 09:00>
  • その他
  • はてなはてブブックマークSSLブログ一覧一覧登録ボタン
  • 新しい記事へ
    Slack の表示を見やすくする Chrome 拡張を作りました

    古い記事へ
    [Mac] tree-tagger を使って英文の形態素解析を試してみた

profile picture

自己紹介的な何か

@wkmettyでついったーやってます。時々。 6年間勤めたゲーム会社を2018年2月に退職しフリーランスのプログラマに。 WordPress Core, WP-CLI コントリビューター。 お仕事募集中です。