Lognote

整体師によるお役立ち情報ブログ

hatebu-favorite-button-thumbnail

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

2017-03-12

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

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

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

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

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

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

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

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の最新ニュース情報を、
いいねしてチェックしてください!

関連記事

linkis-com-redirection-thumbnail

連携アプリ「Linkis」にタイトル丸ごとコピーされたのでスパム報告とリダイレクト処理をしました

先日、jetpackのリファラに見慣れないドメインが表示されました。 In.is?? アドレスの末尾にへんな文 …

掃除機をかける黒人男性の写真

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

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

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

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

5ステップで誰でもできる!WordPressをロリポップからエックスサーバーへ引っ越すまでの全工程

今回はWordPressサイトをロリポップからエックスサーバーに引っ越したときの全過程の備忘録となります。 一 …

スプレッドシートを使ったキーワードプランナー活用方法

ブログに限らずサイトを運営する上で必要不可欠になってくるのがキーワードの選定です。 今、どんなキーワードが検索 …


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

lognote
2017/5/09
コメントありがとうございます。 本当にそうですよね。 通販サイトは、相手の顔が見えない分信頼第一で成り立っているので、Amazonにはマーケットプレイスの管理をしっかりやっていただきたいで...
匿名探偵
2017/5/09
ここ最近のamazonはちょっとヤバいですね。 4,5000円が相場で微小の変動しかしていなかった市場に、今年度に入って急に1000円切った値で断続的に出品するなど、異常な出品者が様々な商品に出没し...
Healer

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