- Tweet
- feedly
ソーシャルボタンは、バルーン型(吹き出し)！じゃないと嫌だっていう、きんちゃん(@wa_kinchan )です。
↑バルーンってこいつらね。
Twitterのフォローボタンが簡単にバルーン型出来なかったのでメモ。
ツイートボタンは簡単にバルーンできるのに・・
ツイートボタンは簡単に出来ちゃうんです。いろんなプログに書かれまくっているので割合させていただきます。
data-count="vertical"って書くとバルーン(vertical)になります。
参考記事・画像拝借:
しかしながら、先ほどのオプションを与えてもフォローボタンはバルーンにならない。
いろいろ調べてみたが、まともなサンプルを書いてるとこもない・・。
理想の形はこの下のようなサイトだけど、画像に埋め込むとか少々回りくどいし、見た目悪い。
しょうがない、たまには自分でがんばるか。ということで作りました。
作るって言っても皆さんのすばらしいコードの張り合わせ・・笑
Feedlyのバルーン(吹き出し)ボタンをパクらせて頂く
僕のサイトのFeedlyのバルーン(吹き出し)ボタンも下記のサイトを参考に設置しています。
Twitterのフォローボタンは、このcssとphpを弄れば出来ちゃうんじゃないか、って結論に至り編集。
wa_kinchanの部分は自分のアカウント名にしてくださいね。
<div id="twitter-followers">
<span id="twitter-count" class="twtr-count"><?php echo $request->{'followers_count'}; ?></span>
<a href="https://twitter.com/wa_kinchan" class="twitter-follow-button" data-show-count="false" data-show-screen-name="false">Follow @wa_kinchan</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>
</div>
以下は、style.cssなどに書き込んでください。
枠ぶちの色は、公式のバルーンから、カラービッカーで抽出しました(#D3D3D3)。
高さ、幅もTwitterのフォローボタンとあうように変更してあります。
/* フォロワー数つきTwitterボタン */
#twitter-followers {
display: block;
}
/* フォロワー数の表示部分 */
#twitter-count {
margin-bottom: 6px;
width: 62px; /*←カウンタの幅*/
height: 34px; /*←カウンタの高さ*/
background-color: #FFF;
position: relative;
border: 1px solid #D3D3D3;
border-radius: 4px;
padding: 0 12px;
font-family: Arial;
font-size: 16px;
line-height: 34px;
text-align: center;
display: block;
background: white;
}
/* フォロワー数吹き出し部分 */
.twtr-count:after,
.twtr-count:before {
border: solid transparent;
content: ' ';
right: 43%;
position: absolute;
}
.twtr-count:before {
border-width: 5px;
border-top-color: #B0C1D8;
top: 35px;
}
.twtr-count:after {
border-width: 5px;
border-top-color: #FFF;
top: 33px;
}
フォロワー数取得
フォロワー数は、以下のサイトを参考に取得。API 1.1からOAuthが徹底化されているので、Twitterのdeveloperサイトからアプリケーションを作成しなければ行けません。
慣れている方はすぐ出来ますが、初めての方は少し戸惑うかも。
でも詳しく書いて頂いてくれているのでここははしょります。
参考記事:
取得したConsumer key, Consumer secret, Access token, Access token secretを自分のものと置き換えてください。
<?php
session_start();
require_once('twitteroauth/twitteroauth.php');
$consumer_key = '[consumer_key]';
$consumer_secret = '[consumer_secret]';
$access_token = '[access_token]';
$access_token_secret = '[access_token_secret]';
$tw_obj = new TwitterOAuth ($consumer_key, $consumer_secret, $access_token, $access_token_secret);
$tw_rest_api = "https://api.twitter.com/1.1/users/show.json";
$request_method = 'GET';
$request = $tw_obj->OAuthRequest($tw_rest_api, $request_method, array('cursor' => '-1', 'screen_name' => 'wa_kinchan'));
$request = json_decode($request);
?>
自分のサイトに埋めこむ
single.phpなど表示させたい場所にに書き込んで下さい。出来上がったらこんな感じ。
ボタンが押されると・・
ここは公式だけど。
まとめ
バルーン(/∇＼*)いい感じに出来ました。うぅ、高まるっ！！
珍しく、というか初のWebネタ。
では、きんちゃん(@wa_kinchan )でした。
最後まで読んで頂きありがとうございます。良かったら、RSS購読、シェアして下さいね(≧∀≦)！
