本記事では、TwitterとFeedlyの公式っぽいフォローボタンをCSSで自作する方法を紹介します。
作成した理由は、言わずと知れたWordPressの高速化。
サイトを軽量化することには意味がありますので、是非お試しいただければと存じます。
作成に至る経緯と完成図
WordPress高速化を謳うページでも、なぜか公式ボタンは設置していたり。
具体的には画像のボタン。
恐らくお洒落なアイコンよりも直観的にわかりやすいからだと思います。
その一方で、なぜかCSSを載せた記事はあまり見かけない。
（普通の人にとっては簡単すぎるからなんでしょうけど）
ただ自作できるものはした方がいいですし、需要はあるはず。
そう思って慣れないCSSと格闘してみました。
完成したものがこちらです。
遜色ないと思いません？
私みたいにフェイスブックの「いいね」でバイラルボックスを使っていない人間だと、３つ並びでコンパクトに納められます。
Twitterの公式っぽいフォローボタンの設置手順
始める前に ～参考記事の紹介
参考にしたのは、Webデザイナー小林 マサユキ様の記事です。
これを元にして作成し、Feedlyボタンも作りました。
１ HTML＆CSS
HTMLを設置したい場所（single.phpやプロフィール紹介など）にコピペします。
CSSをstyle.cssにコピペします。
See the Pen 公式風Twitterフォローボタン by 天満川鈴 (@kimoota) on CodePen.
上の見本ではアイコン出てませんが、ちゃんと出ます（要font awesome）。
元記事と異なり、アイコンフォントは記述の中にまとめてしまっています。
開くページも公式と同じものが開きます。
他のフォローボタンカスタマイズで紹介されているものはホームがそのまま開くのが多いです。
もしそうしたければ、以下の部分を変更してください。
https://twitter.com/intent/follow?screen_name=【＠も含めたあなたのID）】これを次の通りに。
https://twitter.com/【＠も含めたあなたのID）】他のボタンをお使いの場合でホームが開く場合は、逆に変更すれば公式と同じページが開きます。
個人的には公式と同じ方が、フォローボタンに視線が誘導されやすいと思います。
２ TwitterIDを記入する
IDの記入箇所は２つあります。
①は、@を含めたIDを正確に記して下さい（リンク先なので）。
②は、IDを入れれば公式っぽくなりますが、任意で変えられます。表示したい名前を入れて下さい。
私は「天満川鈴」と自分の名前に変えています。
視認性が高まることで反応率上がりそうなので。
３ ボタンの大きさやフォントを調整する
お使いのテーマや表示したい名前によってかなり見え方が異なります。
次の部分を修正して調整してください。
width: 150px;
height: 26px;
font-size: 13px;Feedlyの公式っぽいフォローボタンの設置手順
１ Feedlyのアイコンフォントを用意する
まず、Feedlyのシンボルアイコンをフォントとして導入していることが前提となります。
お使いのテーマに含まれていない場合は、わいひら様のサイトからダウンロードできます。
私の使っているテーマ「Luxeritas」やわいひら様のテーマ「Simplicity２」には最初から入っています。
２ HTML＆CSS
要領はTwitterと同じです。
See the Pen 公式風feedlyフォローボタンCSS by 天満川鈴 (@kimoota) on CodePen.
見本ではアイコン出てませんが、ちゃんと出ます。
ホバーの色は適当です。
もし正しい値を知っている方がいらっしゃれば教えて下さい。
３ ボタンの大きさやフォントを調整する
Twitterと同じです。
まとめ
特にモバイルだとTwitter公式の表示遅れは見ただけで明らかでした。
それがなくなりましたし、今回のボタンで多少の速度改善は図れたのではないかと思っています。
それよりも「公式っぽい方がいい！」という方は、ぜひ試してみてください！
コメント