スポンサード

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

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

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

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

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

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>

デモはこちら↓です。
Follow @webantena

スポンサード