ソーシャルブックマークに登録するボタンを設置する方法

ここでは、国内で有名なソーシャルブックマークサービスである「はてなブックマーク」と、あとで読む機能を提供(ブックマークに加えてコンテンツの簡単なコピーを保存)する「Pocket」のボタンを表示する方法をご紹介いたします。特に難しいことはありません。どちらのサービスも、基本は指定のソースをコピーして貼り付けるだけです。


はてなブックマークのボタンを表示する方法

はてなブックマークボタンを生成するページ

はてなブックマークボタンを生成するページ

まずは、「はてなブックマークボタン」ページにアクセスします。ボタンの表示形態を3種類の中から選ぶと、その下にオプション項目が表示されます。設定を変更するたびに、右上のプレビューが変化します。望みの設定ができたら、右下に表示されているソース(右図赤丸部分)をコピーして、望みのページに貼り付けます。

ボタンを1ページに1つしか掲載しないなら、これ以上することはありません。上記の作業だけで完了です。

※ボタンの生成オプションにある「保存するURL」欄で「ページのURLを使う」側をチェックしている場合は、ボタンを設置しているページがブックマークされます。もう片方の選択肢にチェックを入れてURLを入力すれば、ボタンを設置しているページとは異なる任意のページをブックマークさせることもできます。

はてなブックマークのボタンを複数個掲載する方法
はてなブックマークボタンは、1ページ内に複数個を掲載することもできます。例えば、「閲覧中のページをブックマークするボタン」と「TOPページをブックマークするボタン」を並べて掲載するなどの用途に使えます。その際、掲載するボタンは何個でも、記述するscript要素は1回だけで充分です。記述例を以下に紹介しておきます。

はてなブックマークボタンを掲載するソースは、以下のような構造になっています。
<a リンク><img 画像></a><script>スクリプト</script>
このソースのうち、後半の<script>~</script>の部分は、1ページに2回以上記述する必要はありません。ボタンを複数個掲載したい場合は、前半の<a ...>~</a>の部分を必要なだけ記述すれば充分です。

例えば、 https://allabout.co.jp/gm/gt/1053/ と https://allabout.co.jp/ のボタンを掲載したい場合は、下記のように記述します。
▼1つ目のはてなブックマークボタン:
<a href="http://b.hatena.ne.jp/entry/s/allabout.co.jp/gm/gt/1053/" class="hatena-bookmark-button" data-hatena-bookmark-layout="vertical-normal" 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>
▼2つ目のはてなブックマークボタン:
<a href="http://b.hatena.ne.jp/entry/s/allabout.co.jp/" class="hatena-bookmark-button" data-hatena-bookmark-layout="vertical-normal" 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>
▼スクリプトの読み込みは1回だけ:
<script type="text/javascript" src="https://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
このように必要なだけ列挙できます。なお、スクリプトの読み込みはボタンの直後である必要はないので、ページの末尾(=</body>タグの直前)に追いやっても問題ありません。スクリプトの読み込みは後回しにする方が、ページの表示待ち時間を軽減できます。

※上記のソースは2017年3月現在の仕様です。将来的には変わる可能性があります。


 

Pocketのボタンを表示する方法

Pocketボタンを生成するページ

Pocketボタンを生成するページ

まずは、「Pocket Button」ページにアクセスします。ボタンの表示形態を3種類の中から選ぶと、その下にソースが表示されます(右図赤丸部分)。このソースを、望みのページに貼り付ければ完了です。

ボタンを掲載したページをブックマークの登録対象にしたい場合で、ボタンを1ページに1つしか掲載しないなら、これ以上することはありません。上記の作業だけで完了です。

ボタンの設置ページとは異なるページを対象にしたい場合
提示されたソースをそのまま掲載した場合は、Pocketボタンの存在するページがブックマークの対象になります。このソース前半のa要素は以下のようになっていて、URLは記述されていません。
<a data-pocket-label="pocket"
   data-pocket-count="vertical"
   class="pocket-btn"
   data-lang="en"></a>
もし、ボタンを設定しているページとは異なるページをブックマークの対象にしたい場合は、以下のように追記します。
<a data-pocket-label="pocket"
   data-pocket-count="vertical"
   class="pocket-btn"
   data-lang="en"
   data-save-url="https://allabout.co.jp/"></a>
上記のように、data-save-url属性を使って値に望みのURLを記述します。すると、Pocketボタンをクリックした際にはこのURLがブックマークされます。

なお、1ページ内に複数のPocketボタンを掲載したい場合には、上記のソース(a要素)を必要なだけ列挙します。scriptの読み込みは1回だけで充分です。
▼1つ目のPocketボタン:
<a data-pocket-label="pocket" data-pocket-count="vertical" class="pocket-btn" data-lang="en" data-save-url="https://allabout.co.jp/"></a>
▼2つ目のPocketボタン:
<a data-pocket-label="pocket" data-pocket-count="vertical" class="pocket-btn" data-lang="en" data-save-url="https://allabout.co.jp/gm/gt/1053/"></a>
▼スクリプトの読み込みは1回だけ:
<script type="text/javascript">!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pocket-btn-js");</script>
スクリプトの読み込みはボタンの直後である必要はないので、ページの末尾(=</body>タグの直前)に追いやっても問題ありません。スクリプトの読み込みは後回しにする方が、ページの表示待ち時間を軽減できます。

※上記のソースは2017年3月現在の仕様です。将来的には変わる可能性があります。

ブックマークボタンの作り方

今回は、Internet Explorerでお気に入りに登録できるボタンやリンクの作成方法と、ソーシャルブックマークサービスへの登録ボタンとして、はてなブックマークボタンとPocketボタンの作成方法をご紹介いたしました。ぜひ、活用してみて下さい。

【関連記事】



※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。