Follow button vertical count


#1

I’m surprised there is no ‘vertical’ setting for a twitter follow button with count. Wonder is there (a) any work around to achieve this; and (b) is there plans to make it possible? (I would imagine it isn’t that hard and would give consistency with other social media buttons)


#2

I really want a vertical count follow button please.


#3

jangan biarkan hal indah merusak diri kita lebih baik menderita dan dapat kbhgian diakhir kelak
nafsu dunia slalu menggoda hingga akhirnya menyesatkan dan merugikan
jangan lihat nikmat nya tapi lihat lah resiko nya


#4

I suppose you could make your own using the default follow button and adding your own bubble above it. If I get impatient enough I’ll do it and post my code.


#5

I Did what Steve suggested, hacked away the css for the tweet bubble, implemented it and got the count using twitter api, have the follow button below as an iframe.

Simple: Use an iframe with the src being http://mikeseese.com/tw_vert_follow.php?username=twitter_user_here ie:


#6

Here’s my version. It’s 1:1 with Twitter’s default buttons. Very easy to implement, enjoy.

http://jsfiddle.net/5r7Nz/


#7

Brilliant work guys – looks great!


#8
  1. Twitter: Please add vertical capability for the Follow button - as you can see there’s demand.

  2. Mike Seese: Appreciate your efforts. I think if you just ding the API every time when a user visits on a high-traffic site - you will end up being blocked by Twitter real fast. So without caching the count and limiting requests to API - your solution is probably not viable for high-traffic sites.

  3. SteveGrenier: Are you dinging the API too?


#9

Yeah, I think it’s limited to 150 requests/hour. Creating a cached variable should be relatively easy, update it once every minute. I’ll give it a go tomorrow.


#10

Steve, cool, any other way to contact you besides here? Have something to discuss related to this.


#11

Here’s an updated version. http://jsfiddle.net/cqKs9/

It uses a small plugin called jStorage to cache the follower count. It’ll refresh once every minute.


#12

Great piece of code. Can you please help me with the code to place counter to the right side of the follow button?


#13

If you want to move the bubble to the side, just use the stock widget. That’s the only way Twitter officially supports it. https://dev.twitter.com/docs/follow-button


#14

Hello Please Help me Please
how to fix this problem http://jsfiddle.net/cqKs9/41/
i need to all buttons in one line and correctly


#15

Just place it inside another container. http://jsfiddle.net/XmXLn/


#16

Hi mate, I had this on my site with WP layout, when changed layout, implementing the code in the same way - with the javascript in the head using , the html in the footer and the css with my css - it no longer works, I have tried putting the javascript everywhere but it doesn’t change a thing, I just seem to get the follow button and box without the count :frowning: any info will be greatly appreciated mate


#17

For WordPress, add something like this to your functions.php:

<?php add_action('wp_head', 'addTallTwitter'); function addTallTwitter() { ?>
<script type="text/javascript">
jQuery(function($){
    var followers_count = $.jStorage.get("followers_count");
    if (null === followers_count) {
        $.ajax({
            url: 'http://api.twitter.com/1/users/show.json',
            data: {screen_name: 'eatfindr'},
            dataType: 'jsonp',
            success: function(data) {
                $('#followers').text(data.followers_count);
                $.jStorage.set("followers_count", data.followers_count, {TTL: 60 * 1000});
            }
        });
    } else {
        $('#followers').text(followers_count);
    }
});

</script>
<?php } ?> Then add the css to your styles, and the html to a template file.

#18

Thanks how to fix facebook button?


#19

pls help me


#20

What do you need help with? If you want the buttons to line up, put each in a container and position them as you wish. Note: Not all services use the same dimensions. Facebook for example is 2-3px smaller than Twitter.

http://jsfiddle.net/qpjQf/