読者です 読者をやめる 読者になる 読者になる

コピペで簡単、はてなブログにSNSフォローボタンを実装するカスタマイズ

広告

(※当初のプログラムだとはてなブログの購読URLに誤りがありました。現在は修正してあります。)

どうも、ゴトーだ。

f:id:hogehoge223:20170208081817j:plain

はてなブログにSNSのフォローボタンを設置するにあたり、参考になるブログをいくつか当たった。
しかし、いざ使ってみるとレスポンシブ対応していなかったり、記事下とサイドバーで別のコードが必要だったりして、要件に合わなかったので、それなら作ってしまえということで、SNSフォローボタンを自作してみた。

記事内に埋め込んだプログラムで簡単にカスタマイズできるので、ぜひ使ってみて欲しい。

SNSフォローボタンとは?

はてなブログ・Feedlyの購読ページ、Twitterのフォローページに飛ばすためのボタンだ。
このページだと、記事下とサイドバーにこのようなボタンを設置している。

f:id:hogehoge223:20161129133351p:plain

これまであまり定期購読者のことを考えていなかったが、SEOとは別に定期購読してもらえるユーザーがいると大変ありがたいもので、それを増やすためにはまず導線を増やすべきだろうと考えて設置した。

記事を読んで気に入ってもらえたユーザーが、読んだ流れで定期購読するアクションを取ってもらうことは重要だと思うので、記事下への設置は必須だと思う。

この記事のオリジナル要素

この記事ではコピペですぐに使えるSNSフォローボタンのHTMLとCSSを用意しているが、もちろん他のブログでも同じ趣旨のものを提供している。

それなのになぜわざわざこんな記事を作ったのかというと、以下の点で既存のものでは要件に合わなかったからだ。

  1. レスポンシブ対応していない
  2. 記事下とサイドバーで共通のコードが使えない
  3. 自分でHTMLを改変しないといけない

これらの要素を全てカバーしているので、おそらく他の記事よりも楽に導入できるはずだ。

レスポンシブ対応

同じコードでPCとスマホ両方に対応するレスポンシブデザインを導入していているブログも多いと思う。

既存のものではレスポンシブに対応していなくて、スマホから見るとサイズが大きすぎたり、タップした時にマウスオーバーの挙動をしてしまってユーザービリティが良くなかったので、その辺りを調整している。

記事下とサイドバーで共通のコード

はてなブログでは記事下とサイドバー両方にボタンを設置するケースが多いが、別々のCSSを設置しないといけないものがあったので、せっかくなら共通で使用できるものにしている。

HTMLの自動生成

記事内に埋め込んであるフォームに自身のブログURLなどを打ち込めば、そのままコピペで使用できる形でHTMLが自動生成される。

デザインイメージ

生成されたコードを貼ると以下のようなデザインになる。

PC

f:id:hogehoge223:20161129135148p:plain

スマホ

f:id:hogehoge223:20161129135119p:plain

対応しているSNS

ここでは、はてなブログで一般的な「はてなブログ購読ボタン」「Twitterフォローボタン」「Feedly購読ボタン」の順に3つ並んだものになっている。

FacebookやInstagramには非対応だが、対応してほしいという方がいればコメント欄まで要望を書いて欲しい。

自動生成はこちら

SNSボタンの生成には「ブログのURL」「はてなID」「Twitter ID」3つの要素が必要なので、それぞれ順に入力してほしい。

Twitter IDは自分のTwitterページにアクセスした時のURLが「https://twitter.com/gotoblog」なら「gotoblog」に当たる部分だ。
メンションの「@~」のところでもある。

↓ 以下、実際に入力してみてください












「記事下」に挿入して下さい


「サイドバー」に挿入して下さい


「デザインCSS」に挿入して下さい


生成されたコードの貼り方

自動生成されたコードの貼り方も説明しよう。

まずは、はてなブログのヘッダーのメニューからデザインを選択。

f:id:hogehoge223:20161129135754p:plain

そうしたらスパナアイコンをクリックして、「デザインCSS」をクリック。 

f:id:hogehoge223:20161129140356p:plain

するとテキストボックスが拡大されるので、自動生成されたコードの「CSS」を末尾にペーストしよう。

f:id:hogehoge223:20161129140454p:plain

続いて同じように「記事下」をクリックして、拡大されたテキストボックスに、自動生成されたコードのうち「記事下」をペーストしよう。

f:id:hogehoge223:20161129140732p:plain

サイドにサイドバーにSNSフォローボタンを追加しよう。

「サイドバー」をクリックして、「モジュールを追加」をクリックすると、このようなウインドウが表示されるので、左のメニューから「HTML」を選択。
タイトルに「フォローする」などの文言を入力して、HTMLのところに自動生成されたコードのうち「サイドバー」をペーストしよう。

f:id:hogehoge223:20161129141006p:plain

最後に「変更を保存する」ボタンをクリックするのを忘れないようにしよう!

f:id:hogehoge223:20161129141050p:plain

これで皆さんのブログにもSNSフォローボタンが設置されているはずだ。