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

lisamdb · 2012-03-26T20:58:06.000Z

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.

episod · 2012-03-27T14:30:39.000Z

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?

lisamdb · 2012-03-30T01:18:00.000Z

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?

taddgiles · 2012-04-14T22:18:13.000Z

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

alssssafir · 2012-04-16T06:01:32.000Z

, , , , , .

book20 · 2012-04-17T22:11:56.000Z

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

nakamuraagatha · 2012-04-17T22:16:02.000Z

uyeahhh

lisamdb · 2012-04-17T23:11:00.000Z

I ended up having to do a workaround.

mattaningram · 2012-05-29T17:29:07.000Z

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

ellispritchard · 2012-07-05T09:59:58.000Z

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()]

aestheticss · 2012-07-03T13:05:25.000Z

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

mhmazur · 2012-07-13T17:21:00.000Z

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.

appcropolis · 2012-10-23T13:49:07.000Z

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

adrian_irwin · 2013-02-06T04:41:29.000Z

Thanks for this, it’s a bit ridiculous.

adrian_irwin · 2013-02-07T06:39:09.000Z

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

niall · 2016-02-06T07:18:28.592Z