Twitterフォローボタンをテキストリンクにする方法

ソーシャルメディア

2014.05.06

Javascriptを用いずに、TwitterのフォローリンクをテキストリンクにしたりCSSでオリジナルボタンに装飾する方法のご紹介です。

フォローリンクをテキストにする
CSS によるデザイン装飾例

フォローリンクをテキストにする

フォローリンクを置きたい場所に、以下のようなa タグを書きます。
screen_name にはTwitterユーザー名（@の後ろの名前）を指定します。

<a href="https://twitter.com/intent/follow?screen_name=webantena">
	Follow @webantena
</a>

Follow @webantena

</a>

デモはこちら↓です。リンクをクリックするとウィンドウが立ち上がります。
Follow @webantena

CSS によるデザイン装飾例

aタグに任意のクラスを指定して、オリジナルデザインのフォローボタンにすることも可能です。

<style>
.follow-btn	{
	width:100%;
	display:block;
	background:#55acee;
	padding:10px;
	text-align:center;
	color:#fff;
	text-decoration:none;
}
</style>

<a href="https://twitter.com/intent/follow?screen_name=webantena" class="follow-btn">
	Follow @webantena
</a>