Как я могу динамически создать кнопку твитта?

В настоящее время я пытаюсь создать кнопку твита с функцией горизонтального подсчета динамически:

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

Проблема заключается в том, что кнопка отображается как текстовая ссылка, а не как кнопка с горизонтальным счетчиком.

Я создал кнопку facebook таким же образом, который работает правильно, однако для его работы я использую следующее:

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

используя следующее:

FB.XFBML.parse();

разобрать и нарисовать кнопку. FB.XFBML.parse() происходит от http://connect.facebook.net/en_US/all.js

Когда я создаю кнопку Tweet, статически внутри .html файла, она работает правильно. Я включаю в себя следующую script на моей индексной странице, где кнопка твита должна создаваться динамически:

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

Если вы видите, что я делаю неправильно, пожалуйста, сообщите мне!

Следующий скриншот дает визуальное объяснение того, что происходит с кнопкой твитта! Tweet button not displaying correctly.

Решение:

Теперь мне удалось решить проблему. Проблема, которую я могу себе представить, заключается в том, что твиттер script работает под нагрузкой и не перезапускается при создании элемента.

используя следующие jQuery, работает правильно!

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

ОТВЕТЫ

Ответ 1

Стоит отметить, что с недавнего времени вы можете использовать следующую функцию виджета Twitter:

twttr.widgets.load();

Предполагая, что вы загрузили файл widgets.js:

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

Это приведет к динамическому повторному созданию кнопки твита для вас.

Ответ 2

Теперь мне удалось решить проблему. Проблема, которую я могу себе представить, заключается в том, что твиттер script работает под нагрузкой и не перезапускается при создании элемента.

используя следующие jQuery, работает правильно!

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

Ответ 3

Вы используете неправильный код. Чтобы указать URL-адрес, вы используете URL-адрес, а не URL-адрес. Это работает:

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

Для получения дополнительной информации ознакомьтесь с документацией Twitter на https://dev.twitter.com/docs/tweet-button#properties