はてなブックマークのお気に入りユーザー追加ボタンをブログ記事内に追加する

2017年3月12日 2017年3月13日
ブログ運営

どうしてはてなブックマークにはブログ用フォローボタンがないのでしょうか！

はてなブックマークには記事をブックマークするだけではなくユーザーをお気に入りする機能もありますが、これってはてなブックマーカーにとっては結構重要な機能なのではないかと思うのです。

ツイートボタンがあってフォローボタンがあるなら、お気に入りがあってブックマークがあってもいいですよね。
（意味が重複しちゃうな……理解してもらってるかな……）

今回のカスタマイズは、このフォローボタン的なものをブログに設置するカスタマイズです。

これからはてなブックマークを本格的に始めてみようという方にも有益かと思いますのでぜひ最後までお付き合いください。

はてなブックマークのそもそもの使い方がわからないという方はこちらのサイトを参考にしてみてください。
会話形式になっていてスーッと理解できます。

はてなブックマークとは？何でみんな使っているの？ | 小雪が紡ぐと・・・

はてブのお気に入りユーザー機能をブログに追加

はてなブックマークのプロフィール画面にあるお気に入りボタンを押すことで、そのユーザーをお気に入り登録してブックマークを共有できます。

このお気に入りボタンのリンクをブログに張り付けます。

やることは簡単！　下記のコードをコピペするだけです。

[html]
<input type="button" value="はてブでお気に入りユーザーに追加する" onclick="window.open(‘//profile.hatena.ne.jp/はてなID/follow.add’, ‘_blank’, ‘width=530,height=440’); return false;">
[/html]

そして、実際にbutton属性を使用して設置したボタンリンクがこちらです。
ボタンをクリックするとユーザーページがポップアップで表示されますので、登録ボタンを押すだけです。

button属性は簡単にボタンっぽくなってくれるので便利です。

注意点としては、はてブに登録してかつログインしている方でないとクリックしても「見つかりません」と表示されます。「ログインした状態でクリックしてください」といった注意書きがあると親切かもしれません。

CSSを使ってオリジナルボタンにカスタマイズ

もっとオリジナリティーを出したいという方は、ボタンにCSSを当てればおしゃれにカスタマイズも可能です。
こちらはbutton属性を使わない方法です。

共通HTML

[html]
<a class="hatebu-favorite-button" href="javascript:void(0);" onclick="window.open(‘//profile.hatena.ne.jp/はてなID/follow.add’, ‘_blank’, ‘width=530,height=440’); return false;">はてブでお気に入りユーザーに追加する></a>
[/html]

カスタマイズCSS①

◆スタンダードな枠付きボタン

はてブでお気に入りユーザーに追加する

[css]
.hatebu-favorite-button01 {
width:300px;
font-size:14px;
font-weight:bold;
text-decoration:none;
display:block;
text-align:center;
padding:8px 0 10px;
color:#333;
border:1px solid #333;
}
[/css]

カスタマイズCSS②

◆角丸ボックスシャドウボタン

はてブでお気に入りユーザーに追加する

[css]
.hatebu-favorite-button02 {
width:300px;
font-size:14px;
font-weight:bold;
text-decoration:none;
display:block;
text-align:center;
padding:8px 0 10px;
color:#fff;
background-color:#49a9d4;
border-radius:5px;
box-shadow:2px 2px 2px #555;
}
[/css]

カスタマイズCSS③

◆角丸テキストシャドウボタン

はてブでお気に入りユーザーに追加する

[css]
.hatebu-favorite-button03 {
width:300px;
font-size:14px;
font-weight:bold;
text-decoration:none;
display:block;
text-align:center;
padding:8px 0 10px;
color:#fff;
background-color:#49a9d4;
border-radius:5px;
box-shadow:2px 2px #1a6ea0;
text-shadow:0 -1px #1a6ea0;
}
[/css]

CSSはこちらのサイトからお借りしました。