Follow button is not displaying @username by default or when i set the attribute


#1

Whether or not i set the data-show-screen-name the @username is not displaying. This is the generated snippet I’m using (I’ve replaced the username for this discussion thread):

Follow @username

Thanks in advance.


#2

Is there anything noteworthy about the environment you’re putting this button in (is it a CMS or blogging platform that may be modifying the HTML you put in)? Is the user a protected account?


#3

The problem was that the divs were hidden. If I execute that snippet of code when the divs are visible then it works properly. One follow-up question for you is:
I have a visible share-button and the hidden follow-button above. When the page loads the share-button works fine. But I can’t get the follow-button to work after I’ve made it visible.
I’ve tried:
twttr.widgets.load() and twttr.render()
and the second method returns an error.
Any suggestions?


#4

I’m having the same problem. Screen name doesn’t show if the div is hidden on page load. Workaround or bug fix?


#5

, , , , , .


#6

Thanks for the stuff…always wellcome…this is a great place to happen…


#7

uyeahhh


#8

I ended up having to do a workaround.


#9

Any chance you can tell me what you did? Still can’t seem to figure it out.


#10

Hi, the trick is to force the iframe to reload once the twitter button is visible; however, this is not easy (or certainly not as easy as it used to be). I’m currently using this (with jQuery):

// force twitter button to re-init, and thus put screen name in: // broken due to being hidden initially. var twitterIFrames = $('iframe.twitter-follow-button'); twitterIFrames.each(function(index,element) { if($.browser.webkit) { // webkit browsers require some serious shenanigans... var $e = $(element); var $clone = $e.clone(); $e.replaceWith($clone); } else { // other browsers seem happy with this... element.setAttribute('src',element.getAttribute('src')); } }); [Edit: use clone() instead of html()]

#11

@lisamdb I’d be really grateful for that solution too …


#12

All,

Here’s the solution I implemented on Lean Domain Search:

Wrap the link in a div like so:

Follow @mhmazur

In your CSS, add:

div#twitter_follow.hidden { position: absolute; left: -10000px; }

When you’re ready to show it, simply remove the “hidden” class:

$("div#twitter_follow").removeClass("hidden");

Basically you’re making the widget visible in the DOM, but positioning it so far offscreen that the user can’t see it. When you’re ready to display it, you remove the class that forces it offscreen so that it now appears to the user.


#13

@mhmazur, your solution fixed the problem. This issue/limitation should be mentioned in the button documentation.


#14

Thanks for this, it’s a bit ridiculous.


#15

As an alternate solution, I appended the iframe to an empty

in the $(window).load handler. Even using the approach suggested by @mhmazur didn’t work every time :frowning:

#16