CODEWITHSUNDEEP
javascriptjquerytwitter
Talha Akbar
Talha Akbar

Reputation: 10040

Why twitter tweet button does not work if appended dynamically?

I was just playing with Facebook and Twitter Like & Tweet Button respectively. When I noticed that dynamically appended Twitter button does not work but manually added Anchor works. Why is it so?

Here's The Fiddle : Fiddle

You can see it is not working.

Code:

$("body").append('<a href="https://twitter.com/share" class="twitter-share-button" data-dnt="true" data-count="none" data-via="SitesTwitter">Tweet</a>');

Upvotes: 1

Views: 761

Answers (2)

NielsInc
NielsInc

Reputation: 426

This is because the Javascript that converts the link into a twitter link is fired before (onload probably) you add the new link with javascript: if you delete the section in your html and call it in the js after you add the button, it works (or leave it and call it after you add the button)

 $("body").append('<a href="https://twitter.com/share" class="twitter-share-button" data-dnt="true" data-count="none" data-via="SitesTwitter">Tweet</a>');
 ! function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (!d.getElementById(id)) {
            js = d.createElement(s);
            js.id = id;
            js.src = "https://platform.twitter.com/widgets.js";
            fjs.parentNode.insertBefore(js, fjs);
        }
    }(document, "script", "twitter-wjs");

Check the JsFiddle

Upvotes: 5

ZER0
ZER0

Reputation: 25332

How interesting. The current code it's actually works for me on: http://codepen.io/anon/pen/punfx but I got the same issue of you on your Fiddle.

I think it's a timing issue. You have to inject the twitter-wjs once you added dynamically your button. I believe this script will probably scan the page to modifying any link that has the twitter-share-button class, or something like that. So if you add the button after the execution of that script, your link won't be scanned.

Upvotes: 1

Related Questions