twitterのフォローボタンを画像にしたり、テキスト名を変更する方法。

2016年9月1日木曜日

twitter ツイッター フォローボタン

t f B! P L
twitterのフォローボタンを画像にしたり、テキスト名を変更する方法です。

非常に簡単で、以下コピペして「ツイッターID」の部分に自分のツイッターのIDを入れてください。
(twitterのidは自分のツイッターを開いて左の自分の名前の下の@○○の○○の部分です)

<a href="https://twitter.com/intent/follow?screen_name=ツイッターID"><img src="img.jpg"></a>

画像(<img src="img.jpg">)ではなくテキストでもOKです。

さて、ここからがちょっと分からなくてつまずく話しです。

他サイトでもこの方法を紹介していますが、サンプルのフォローボタンをクリックすると、ポップアップで小さいウィンドウが出てきます。

でも、上記のタグだけではポップアップにはなりません。

正規のフォローボタンをtwitterのページから取得して、それを自分で作ったボタンを表示させるページのどこかに一緒に表示させないと、ポップアップにはなりません。

正規のフォローボタンを作る場所はこちら↓

<a href="https://about.twitter.com/ja/resources/buttons#follow">フォローボタンを作る</a>

ここで作ったフォローボタンをサイトのフッターや右カラムのどこかに置いておくと、全ページに表示されるので便利だと思います。

正規のフォローボタンをサイトに表示したくない、表示する場所がない方は、以下の方法でも大丈夫そうです。

正規のフォローボタンを作ると以下のソースになります。
その中の<script>~</script>の部分だけをhtmlの下の方に載せておけば、ちゃんとポップアップが動きました。
赤文字の部分ですね。

<a href="https://twitter.com/yrkmt0403" class="twitter-follow-button" data-show-count="false" data-size="large" data-show-screen-name="false">Follow @yrkmt0403</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

全ページに載せないとダメなので共通のテンプレート(ヘッダーとかフッター)内に入れておけばよいかと思います。

QooQ