オリジナルのTwitterフォローボタンを作成する方法

Twitterフォローボタンは公式で配布されておりますが、表示に時間がかかるため、できるかぎり使用したくないものだったりします。そこで今回はTwitterフォローボタンをオリジナルのボタンにカスタマイズする方法をご紹介します。私の制作時に使用するための、完全に備忘録的な記事です。

Twitter公式のフォローボタンを確認してみる

実際に公式で用意されているボタンのデザインを確認してみましょう。

Follow @BrunoxMa

どうしても表示がもたつくんですよね。このボタンデザインをそのままにオリジナルでTwitterフォローボタンを作ってみます。

Twitterのオリジナルフォローボタンを作ってみる

まず初めに、Twitterアイコンを表示させるために、Font Awesomeのアイコンフォントを読み込みます。以下のHTMLタグを<head>内にマークアップ。

<link rel="stylesheet" href="https://opensource.keycdn.com/fontawesome/4.6.3/font-awesome.min.css">

次に、Twitterフォローボタンを表示したい箇所に、以下のHTMLタグを記述します。

<a class="tw-follow-btn" href="https://twitter.com/intent/follow?screen_name=BrunoxMa" target="_blank" onclick="window.open(this.href, 'window', 'width=600, height=400, menubar=no, toolbar=no, scrollbars=yes'); return false;">Follow</a>

赤文字部分に、自分のTwitterのIDを記述します。

あとは、CSSでデザインしていきます。

a.tw-follow-btn {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 66px;
	height: 20px;
	color: #fff;
	font-size: 10px;
	font-family: 'Helvetica Neue', Arial, sans-serif;
	text-decoration: none;
	line-height: 1;
	background-color: #1b95e0;
	border-radius: 3px;
	letter-spacing: normal;
}
a.tw-follow-btn:hover {
	background-color: #0c7abf;
}

.tw-follow-btn:before {
	content: '\f099';
	padding-right: 5px;
	width: 1em;
	height: auto;
	font-family: FontAwesome;
}

display: flex;とjustify-content: center;、align-items: center;で、テキスト（Twitterアイコン含む）をボタンの天地中央に配置しております。Flexboxを利用しているので、上記のCSSコードはIE10+の対応となります。もし、前バージョンにも対応させる場合には、Flexboxを使用せずにpadding等で対応してください。

また、ボタンのサイズは公式ボタンの高さが20pxであり、facebookやfeedlyのフォローボタンなども同じく20pxなので合わせてみました。横幅についてはボタン内に記載するテキスト（ここではFollow）によって変わってきますので、もしテキストを変更する場合にはサイズを調整してください。

Twitterオリジナルフォローボタンの実際の表示がこちら

先述した内容でコーディングすると、以下のようなボタンが表示されます。

試しにクリックしてみてください。ポップアップ画面が別ウィンドウで表示されます。Twitter公式ボタンと同じ仕様ですね。

このボタンはCSSとFont Awesomeさえ設定しておけばどこにでも表示させることができます。たとえばブログで自分のTwitterアカウントを紹介したい時に記事内で表示させることも可能なので、色々と用途はあるでしょう。そこで公式ボタンを使用すると表示問題が出てきますので、高速表示できる今回のフォローボタンを使った方がいいかと思います。

Twitterオリジナルボタンは意外に簡単に用意することができますが、facebookの方がどうやってもうまくいかなくて調べても出てこないんですよね。仕様変更が多いからかな。

facebookのフォローボタン（いいねボタン）をオリジナルで実装ができた時は、ブログにてご紹介しますね。