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

SNSフォローボタンとは？

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

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

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

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

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

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

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

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

デザインイメージ

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

対応しているSNS

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

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

自動生成はこちら

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

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

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

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

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

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

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

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

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

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

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

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

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