読者です 読者をやめる 読者になる 読者になる

かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

Twitterのフォローボタンをカスタマイズしたい

HTML javascript Twitter

Twitterのアカウントをフォローできるボタンを作るには公式のドキュメントから作成できます。

こんな感じに。

 
この公式のボタンではなくテキストリンクなどで、同様のフォローすつページを開かせたいみたいな事もあります。そんな時は次の様なURLで実現可能なようです。

https://twitter.com/intent/follow?screen_name={TwitterのID}

screen_name=の後にTwitterのIDを@無しでしてすればOKです。

aタグにするとこんな感じです。

<a href="https://twitter.com/intent/follow?screen_name={TwitterのID}" target="_blank">Follow Twitter</a>

公式ボタンと同じようにポップアップで表示させるならjsでwindow.openしてあげれば良いかなと思います。

サンプル

<a class="js-twitterFollowBtn" href="https://twitter.com/intent/follow?screen_name={TwitterのID}" target="_blank">Follow Twitter</a>
$('.js-twitterFollowBtn').on('click', function(evt) {
  window.open(this.href, '', 'width=600, height=600');
  return false;
});

で、出来たのがこんな感じになります。 Follow My Twitter!
後はCSSなどで好きなデザインを当てればOKですね。


[参考にしました]
Twitterのフォローボタンをテキストリンク化する方法 | 9ineBB

やはり俺の青春ラブコメはまちがっている。 (ガガガ文庫)

やはり俺の青春ラブコメはまちがっている。 (ガガガ文庫)