¿Cómo puedo crear dinámicamente un botón de tweet?

Question

Actualmente estoy tratando de crear un botón de tweet con la función de recuento horizontal de forma dinámica:

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

El problema que estoy teniendo es que el botón se muestra como un enlace de texto , no como un botón con la caja de conteo horizontal.

He creado un botón de Facebook de la misma manera, que funciona correctamente, sin embargo hacer que funcione utilizo el siguiente:

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

utilizando la siguiente:

FB.XFBML.parse(); 

para analizar y dibujar el recuadro. FB.XFBML.parse() viene de http://connect.facebook.net/en_US/all.js

Cuando creo el botón Tweet de manera estática dentro de un archivo .html, funciona correctamente. Estoy incluyendo la secuencia de comandos siguiente dentro de mi página de índice en el botón Tweet se debe crear de forma dinámica:

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

Si usted puede ver lo que estoy haciendo incorrectamente, me comunique!

¡La siguiente captura de pantalla da una explicación visual de lo que está pasando mal con el botón tweet!

Solución:

ahora he logrado resolver el problema. El problema que me imagino es que la secuencia de comandos de Twitter se está ejecutando con carga, y no se vuelve a ejecutar al crear el elemento.

utilizando el siguiente jQuery funciona correctamente!

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

Answer 1

Vale la pena señalar que a partir del recientemente puede utilizar la siguiente función de widget de Twitter:

twttr.widgets.load(); 

Suponiendo que haya cargado los widgets.js archivo:

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

Esto volverá a crear dinámicamente el botón de tweet para usted.

Answer 2

Solo está usando el código incorrecto. Para especificar la URL, use url, no data-url. Esto funciona:

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

Para más detalles, consulte la documentación de Twitter en https://dev.twitter.com/docs/tweet-button#properties

Answer 3

Ahora he logrado resolver el problema. El problema que me imagino es que la secuencia de comandos de Twitter se está ejecutando con carga, y no se vuelve a ejecutar al crear el elemento.

utilizando el siguiente jQuery funciona correctamente!

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