2016/11/4 【html, css, jQuery】twitterのフォローボタンを自作する
ネット上のサイトを見ていると、twitterのフォローボタンがあるサイトは多いと思います。
twitterが提供しているデフォルトのボタンは
Follow @mizzsig
こんな感じのやつですが、これだとちょっと味気ないかなぁと思ったので、自作してみました。
ページを下の方までスクロールすると、右下から変なイラストがピョコ！っと出てくるので、
それをクリックすると、上にあるフォローボタンと同じように
twitterのプロフィールの画面が出るようになっています。
作り方を以下に書いていきます。
目次
1. デフォルトのボタンを見る
まずはこのサイトでフォローボタンのひな型を見てみます。
ボタンのプレビューをクリックすると、別ウィンドウでプロフィールの画面が開きます。
URLには色々とパラメータが付いていますが、
最低限誰のフォロー画面なのかということが分かれば開けるので
https://twitter.com/intent/follow?screen_name=ユーザ名
というURLにアクセスすれば目的の画面が開くことが分かります。
2. 自作ボタンの概要・画像用意
今回作るボタンは、クリックすることでフォロー画面を開くようにするのですが、
その他に動きをつけてみようと思います。
ボタンが置いてあるページを開いたときにはボタンは見えないのですが、
ページを下の方までスクロールするとボタンが右下から出てきて、
マウスを乗せると少し跳ねて画像が変わります。
マウスをボタンの外にやると画像は元に戻り、
画面を上の方にスクロールするとボタンが跳ねるようにして消えるようにします。
ボタンには２枚の画像を用意しました。
左から、tButton_off.pngとtButton_on.pngです。
FireAlpacaで作りました。
左から、tButton_off.pngとtButton_on.pngです。
FireAlpacaで作りました。
3. jQuery(JavaScript)のコード
3-1. ボタンの出現
次はjQueryを使ってプログラムを組んでいきます。
スクロールでボタンが出てくる・消える部分の処理はこうなりました。
$(function(){
var showFlag = false;
var tButton = $('#twitter-follow-button');
// 最初はボタンを隠しておく
tButton.css('bottom', '-400px');
$(window).resize(btnShow);
$(window).scroll(btnShow);
function btnShow(){
scrollHeight = $(document).height();
scrollPosition = window.innerHeight + $(window).scrollTop();
if ( (scrollHeight - scrollPosition) / scrollHeight <= 0.05) {
// ボタンが出てくる
if(showFlag == false){
showFlag = true;
tButton.stop(true, false).animate({'bottom': '-15px'}, 300).animate({'bottom': '-30px'}, 200);
}
} else{
// ボタンが消える
if(showFlag){
showFlag = false;
tButton.stop(true, false).animate({'bottom': '-15px'}, 200).animate({'bottom' : '-400px'}, 300);
}
}
}
});
animate()関数で動きを指定しているのですが、出てくる時も消えるときも
一度上に跳ねてから下に落ちるようにしてみました。
それによって、一度に２つの処理がボタンのキューに溜まることになるので
動く前にはstop()関数を呼び出し、第一引数にtrueを指定することで
それまでに溜まっているキューを全部消すようにしています。
また、スクロールバーの位置はウィンドウのサイズが変わったときにも変動するので
画面をスクロールした時だけでなく、画面をリサイズした時にもボタンの処理を行っています。
3-2. カーソルを合わせる
ボタンにカーソルを合わせたときの処理は下のようになりました。
tButton.hover(function(){
$(this).attr('src', $(this).attr('src').replace('_off', '_on'));
tButton.stop(true, false).animate({'bottom' : '-15px'}, 100).animate({'bottom' : '-30px'}, 100);
}, function(){
if(!$(this).hasClass('current')){
$(this).attr('src', $(this).attr('src').replace('_on', '_off'));
}
});
カーソルがボタンに乗ったときは、画像が変わる他にボタンが少し跳ねるようにして
カーソルがボタンの外に出ていったときには、そのまま画像を変えるようにしました。
こちらを参考に作りました。
http://howtohp.com/2008/10/19/rollover/
4. htmlのコード
次はhtmlのコードです。
まずはjQueryを使っているので読み込みます。
公式ページを見てみると今現在のjQueryの最新版は3.1.1みたいなので、
それをheadで読み込ませておきます。
<head> <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script> </head>次に、bodyの中にボタン本体を設置します。
<body> <a href="https://twitter.com/intent/follow?screen_name=mizzsig"> <img id="twitter-follow-button" src="../tButton_off.png"> </a> </body>
フォローボタンは１つしか設置しないのでclassではなくidを使って、
名前はtwitter-follow-buttonとしておきました。
5. cssのコード
最後にcssを書いていきます。
コードはこんな風にしました。
#twitter-follow-button{
width: 250px;
right: 10px;
position: fixed;
bottom: -1500px;
}
positionをfixedにすることで画面の絶対位置に配置して、htmlの他の要素に影響されることなく画面の右下に出てくるようにしています。
また、jQueryを読み込んでいる途中にボタンが画面に映らないようにするために
bottomを低くしておきました。
6. ソースコード全体・あとがき
全体のソースコードはこちらにあります。
https://github.com/mizzsig/html-tests/tree/master/twitter-follow-button
javascriptとcssは別ファイルにしたので、htmlにそれらを読み込む処理をいれてあります。
今回はこれで終了です。
動いているところを見ると、結構自分の思い通りに動いていて満足です。
(特に最初にちょっと上に上がってから下に落ちる感じが！)
フォローボタンができたので、記事の共有ボタンも同じ感じで作ろうかなと思ったのですが、
妙なキャラが２人もピョコピョコしてるのは流石にくどいかなぁと思ったので
今回のものとは少し違った感じで作ろうかなと考えてます。
2016/11/13 追記 記事の共有ボタンを作りました！
http://sssignal.web.fc2.com/column/column19.html
-
Please
- feedly
- hatena bookmark
- Google plus
Share!
