CODEWITHSUNDEEP
javascriptjquerydomtwitter
iamjonesy
iamjonesy

Reputation: 25122

Can't load twitter share button via Javascript

I have a div that I want to load the twitter share button into via jQuery. The works when the script is executed on page load. But after that when I do it manually the script doesn't seem to loaded.

Original button:

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

I tried just loading the whole button (link plus script) via jQuery but it didn't work, I just got the link. Instead I've tried to inject the script into the DOM like this:

Here's my JS:

var twitter = '<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://customer-url" data-via="givestreamuk" data-hashtags="socialgiving">Tweet</a>';
jQuery('#twitter_share').html(twitter);

var jstext = '!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");';

var script   = document.createElement("script");
script.type  = "text/javascript";
script.text  = jstext;
jQuery('#twitter_share').append(script);

My DIV the button gets placed in:

<div id="twitter_share"></div>

This works when the script is executed on page load but then manually after that only the link appears in the div.

Can anyone suggest how I can manually load this button into a DIV and have the script execute so the button gets generated?

Upvotes: 1

Views: 678

Answers (2)

peterfh
peterfh

Reputation: 83

If you are inserting content dinamically the Twitter script must be modified, as only the first widget will load correctly.

For new Twitter buttons a script tag with ID twitter-wjs already exists and the if(!d.getElementById(id)) will return false.

Just add an else statement to that if in order to force Twitter Widget object to detect new elements:

<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';
       js.parentNode.insertBefore(js,fjs);
    }
    else
    {
        twttr.widgets.load();
    }
}(document, 'script', 'twitter-wjs');
</script>

Source: https://dev.twitter.com/web/javascript/initialization

Upvotes: 0

rcd
rcd

Reputation: 1348

Are you using Turbolinks, PJAX, or other similar gems in your project? If so, refer to this thread:

https://github.com/rails/turbolinks/issues/25

And these solutions:

http://www.blackfishweb.com/blog/asynchronously-loading-twitter-google-facebook-and-linkedin-buttons-and-widgets-ajax-bonus

http://reed.github.com/turbolinks-compatibility/facebook.html

Upvotes: 2

Related Questions