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>
全ページに載せないとダメなので共通のテンプレート(ヘッダーとかフッター)内に入れておけばよいかと思います。
0 件のコメント:
コメントを投稿