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

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

14 голосов
/ 08 августа 2011

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

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 type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

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

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

Решение:

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

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

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

Ответы [ 3 ]

32 голосов
/ 03 апреля 2012

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

twttr.widgets.load();

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

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

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

6 голосов
/ 09 августа 2011

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

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

$.getScript("http://platform.twitter.com/widgets.js");
2 голосов
/ 08 августа 2011

Вы просто используете неправильный код. Чтобы указать URL, вы используете URL, а не data-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

...