Databases
StackOverflow2013
Postsdbo
POHow can I dynamically create a tweet button?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow can I dynamically create a tweet button?
    text
    copied!<p>I'm currently trying to create a tweet button with the horizontal count feature dynamically:</p> <p><strong>JavaScript</strong></p> <pre><code>var twitter = document.createElement('a'); twitter.setAttribute('href', 'http://twitter.com/share'); twitter.setAttribute('class', 'twitter-share-button twitter-tweet'); twitter.setAttribute('data-url','http://mindcloud.co.uk/idea/?idea=' + this.id); twitter.setAttribute('data-count', 'horizontal'); twitter.setAttribute('data-via', 'jtbrowncouk'); twitter.style.top = '20px'; twitter.style.left = '300px'; twitter.innerHTML = "Tweet"; </code></pre> <p>The problem i'm having is that the button is being displayed as a text link, not as a button with the horizontal count box.</p> <p>I've created a facebook button in the same way, which works correctly, however to make it work I use the following:</p> <p><strong>JavaScript</strong></p> <pre><code>var facebook = document.createElement('fb:like'); facebook.setAttribute('id', 'like'+this.id); facebook.setAttribute('href', 'http://mindcloud.co.uk/idea/?idea=' + this.id); facebook.setAttribute('layout', 'button_count'); facebook.setAttribute('send', 'false'); facebook.setAttribute('width' , '300'); facebook.setAttribute('font', ''); facebook.setAttribute('show_faces', 'true'); facebook.style.top = '0px'; facebook.style.left = '300px'; </code></pre> <p>using the following:</p> <pre><code>FB.XFBML.parse(); </code></pre> <p>to parse and draw the button. <code>FB.XFBML.parse()</code> comes from <a href="http://connect.facebook.net/en_US/all.js" rel="noreferrer">http://connect.facebook.net/en_US/all.js</a></p> <p>When I create the Tweet button statically inside a .html file it works correctly. I'm including the following script within my index page where the tweet button should be created dynamically:</p> <pre><code>&lt;script type="text/javascript" src="http://platform.twitter.com/widgets.js"&gt;&lt;/script&gt; </code></pre> <p>If you can see what i'm doing incorrectly please inform me!</p> <p>The following screenshot gives a visual explanation to what is going wrong with the tweet button! <img src="https://i.stack.imgur.com/oje0E.png" alt="Tweet button not displaying correctly."></p> <p><strong>Solution:</strong></p> <p>I've now managed to solve the problem. The problem i'd imagine is that the twitter script is running on load, and not being re-run upon creating the element.</p> <p>using the following jQuery works correctly!</p> <p>$.getScript("<a href="http://platform.twitter.com/widgets.js" rel="noreferrer">http://platform.twitter.com/widgets.js</a>");</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload