hatebu-favorite-button-thumbnail

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

公開日:2017-03-12
最終更新日:

Pocket

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

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

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

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

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

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

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

hatebu-favorite-button-01

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

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

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

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

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

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

hatebu-favorite-button-02

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

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

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

共通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>

カスタマイズ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②

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

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

.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③

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

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

.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はこちらのサイトからお借りしました。

まとめ

今回のカスタマイズはリンクをボタンにしただけの簡単なものですが、あればあったで意外と便利なのではないでしょうか。

設置したばかりなのでフォロワーさんが増えるかはまだわかりませんが、少し様子を見て結果報告しようと思います。

よかったらぜひお気に入り登録してください!(切実)

以上、「はてなブックマークのお気に入りユーザー追加ボタンをブログ記事内に追加する」という記事をお届けしました。

それでは、また。

-ブログ運営
-

この記事のタイトルとURLをコピーする
はてなブックマークのお気に入りユーザー追加ボタンをブログ記事内に追加する
この記事はいかがでしたでしょうか。
是非Lognoteの最新ニュース情報を、
いいねしてチェックしてください!

関連記事

category-tag-decide-thumbnail

もう迷わない!ブログ執筆時のカテゴリとタグの使い分けルールを決めよう!

ブログを書いたけど既存カテゴリで分けるか、新しくカテゴリーを作るべきか迷うことってありませんか? さらにはタグ …

ogp-cache-clear-thumbnail

コピペで簡単!OGPキャッシュ更新フォームの設置用コード

WordPressでサムネを新しいものに変えると、Facebookにリンクを貼ったときの画像が更新されずに真っ白に...

google-algorithm-thumbnail

現在のGoogleアルゴリズムはどうなっている?急にアクセス数が爆発したので調べてみた

昨晩19時くらいだったでしょうか。私にとってとんでもない事件が起きたんです。 昨晩起きたアクセス数爆発事件 何 …

question-of-the-reader-thumbnail

ブログの文章量を上手に増やすコツは読者の「なぜ?どうして?」に答えること

LINEやTwitterの短文に慣れてしまったせいか、ブログの文章を作るのが毎回苦痛でしかたありません。 ブロ …

infotop-stop-payment-thumbnail

インフォトップで悪質アフィリエイターへの報酬を停止する方法

アフィリエイトの販売者をやっていると、一部悪質極まりないアフィリエイターに出会います。何回注意を...


コメントを入力

日本語が含まれない投稿は無視されます。(スパム対策)

トラックバックURL

管理人のヤマカワです
山形在住、整体院「癒眠」院長
3級ウェブデザイン技能士

にほんブログ村 ブログブログ ブログノウハウへ

ヤマカワ
2017/8/16
子テーマのコピー方法はカスタマイズの基本ですので省略してしまいました。 新しく別ページで解説記事を...
たろ
2017/7/31
子テーマにコピーするの所がわかりにくい
ヤマカワ
2017/7/25
キャッシュの削除は試されましたでしょうか。 それでも反映されないようでしたら、!important...
haruboshi
2017/7/24
全く反映されません。