• RSS

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

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

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



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください