Comment puis-je créer dynamiquement un bouton tweet?

Je tente actuellement de créer un bouton tweet avec la fonction de compte horizontal de manière dynamique:

JavaScript

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"; 

Le problème que j'ai, c'est que le bouton est affiché sous la forme d'un lien de texte, et non comme un bouton avec la zone de compte horizontal.

J'ai créé un bouton Facebook de la même manière, ce qui fonctionne correctement, mais pour le faire fonctionner, j'utilise les éléments suivants:

• Modification d'une chaîne de requête sans recharger la page
• IE8 v8 ne change pas de classe pour un élément DOM en dépit de la fonction JS modifiant l'attribut élément
• Définir le contenu de HTML <span> avec Javascript
• Attributs HTML booléens
• Existe-t-il une meilleure pratique pour générer html avec javascript

JavaScript

 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'; 

En utilisant ce qui suit:

 FB.XFBML.parse(); 

Pour analyser et dessiner le bouton. FB.XFBML.parse() provient de http://connect.facebook.net/en_US/all.js

Lorsque je crée le bouton Tweet de façon statique dans un fichier .html, il fonctionne correctement. J'inclus le script suivant dans ma page d'index où le bouton tweet devrait être créé dynamiquement:

 <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> 

Si vous pouvez voir ce que je fais de manière incorrecte, informez-moi!

La capture d'écran suivante donne une explication visuelle de ce qui ne va pas avec le bouton tweet!

Solution:

J'ai réussi à résoudre le problème. Le problème que j'imagine, c'est que le script de Twitter s'exécute sur la charge et ne soit pas ré-exécuté lors de la création de l'élément.

L'utilisation du jQuery suivant fonctionne correctement!

$ .getScript (" http://platform.twitter.com/widgets.js ");

• Comment redimensionner l'élément de toile html?
• Clonage profond vs réglage de innerHTML: qu'est-ce qui est plus rapide?
• Alternative à DOMNodeInserted
• Quel est le meilleur code JavaScript pour créer un élément img?
• DecodeURIComponent vs unescape, qu'est-ce qui ne va pas avec unescape?

 twttr.widgets.load(); 

 <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> 

 $.getScript("http://platform.twitter.com/widgets.js"); 

 var twitter = document.createElement('a'); twitter.setAttribute('href', 'http://twitter.com/share'); twitter.setAttribute('class', 'twitter-share-button twitter-tweet'); twitter.setAttribute('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";