Twitterのフォローボタンをバルーン型化、ソーシャルボタンをバルーンで統一

  • このエントリーをはてなブックマークに追加
  • feedly
    follow us in feedly

ソーシャルボタンは、バルーン型(吹き出し)!じゃないと嫌だっていう、きんちゃん(@wa_kinchan )です。

2013 11 27 午後10 45 のイメージ
↑バルーンってこいつらね。

Twitterのフォローボタンが簡単にバルーン型出来なかったのでメモ。

ツイートボタンは簡単にバルーンできるのに・・

ツイートボタンは簡単に出来ちゃうんです。
いろんなプログに書かれまくっているので割合させていただきます。
data-count="vertical"
って書くとバルーン(vertical)になります。

NewImage
参考記事・画像拝借:
バルーン型の公式ツイートボタンを設置する方法 : ihayato.書店


しかしながら、先ほどのオプションを与えてもフォローボタンはバルーンにならない。
いろいろ調べてみたが、まともなサンプルを書いてるとこもない・・。
理想の形はこの下のようなサイトだけど、画像に埋め込むとか少々回りくどいし、見た目悪い。

ツイッターのフォローボタンについて質問です!


しょうがない、たまには自分でがんばるか。ということで作りました。
作るって言っても皆さんのすばらしいコードの張り合わせ・・笑


Feedlyのバルーン(吹き出し)ボタンをパクらせて頂く

僕のサイトの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サイトからアプリケーションを作成しなければ行けません。
慣れている方はすぐ出来ますが、初めての方は少し戸惑うかも。

でも詳しく書いて頂いてくれているのでここははしょります。

参考記事:
web帳 | Twitter API 1.1 twitteroauth php 使い方


取得した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など表示させたい場所にに書き込んで下さい。

出来上がったらこんな感じ。

スクリーンショット 2013 11 27 22 37 13
ボタンが押されると・・

スクリーンショット 2013 11 27 22 56 36
ここは公式だけど。

まとめ

バルーン(/∇\*)いい感じに出来ました。
うぅ、高まるっ!!

珍しく、というか初のWebネタ。
では、きんちゃん(@wa_kinchan )でした。


最後まで読んで頂きありがとうございます。良かったら、RSS購読、シェアして下さいね(≧∀≦)!





One Thought on “Twitterのフォローボタンをバルーン型化、ソーシャルボタンをバルーンで統一

  1. ugh, old youtuber haters are so duolm-indedYlu must like the recent activity and the beta channels and your proud that they got rid of the video watched bar, your not a good youtuber.

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Post Navigation