Повторная передача кнопки Tweet через JS

Я использовал этот фрагмент, чтобы повторно отобразить кнопку Tweet.

var tweetButton = new twttr.TweetButton(twitterScript);
twttr.render();

Но похоже, что widgets.js(http://platform.twitter.com/widgets.js) был изменен, поэтому twttr.TweetButton больше не является конструктором.

Может ли кто-нибудь помочь с этой проблемой?

Ответы

Ответ 1

Похоже, что конструктор twttr.TweetButton никогда не поддерживался и теперь больше не работает после последнего обновления API:

Поддерживаемый метод заключается в том, чтобы динамически создавать кнопку с текстом iframe:

Отметьте @Runningskulls ответ для получения обновленной информации.

Ответ 2

Я нашел ответ на web. Идея состоит в том, чтобы повторно запросить javascript файл Twitter. Поскольку он кэшируется, накладных расходов нет.

$.ajax({ url: 'http://platform.twitter.com/widgets.js', dataType: 'script', cache:true});

Ответ 3

Для тех, кто наткнулся на это, есть новый, более простой способ сделать это (начиная с 5/28/12, если не раньше). Быстрый взгляд не нашел его в документации, но вы можете сделать twttr.widgets.load(). Это приведет к загрузке всех виджетов на странице.

EDIT: В конце концов, это задокументировано. Проверьте эту страницу раздел "Оптимизация" (с которым вы не можете напрямую ссылаться)

Ответ 4

вам просто нужно позвонить twttr.widgets.load() после вашего вызова ajax. не нужно перезагружать загруженный script.

Ответ 5

Сначала убедитесь, что в заголовок документа включен jQuery:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

Затем создайте ссылку, имеющую тот же URL, что и конечная кнопка твит, вместе с пустым div, где будет отображаться ваша кнопка:

<a href="http://www.my-site-to-tweet-about.com" id="tlink"></a>
<div id="tbutton"></div>

В нижней части вашей страницы, прямо над тегом/телом, включите javascript из Twitter и функцию, которая отобразит кнопку, а также слушатель, который активирует функцию при желаемом событии:

<script type="text/javascript">
//async script, twitter button fashiolista.com style
    (function() {
    var s = document.createElement('SCRIPT');
    var c = document.getElementsByTagName('script')[0];
    s.type = 'text/javascript';
    s.defer = "defer";
    s.async = true;
    s.src = 'http://platform.twitter.com/widgets.js';
    c.parentNode.insertBefore(s, c);
    })();

function renderTweetButton(tbutton,tlink){
    var href = $("#"+tlink).attr('href'),
        $target = $("#"+tbutton),
        qstring = $.param({ url: href, count: "vertical" }),
        toinsert = '<iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/tweet_button.html?'+qstring+'" style="width:57px; height:70px;"></iframe>';
    $target.html(toinsert);
}

$("#hoverlink").mouseenter(function() {
    renderTweetButton("tbutton","tlink");
});
</script>

Наконец, добавьте ссылку на свою страницу где-нибудь, которая активирует функцию выше на основе некоторого события:

<a href="#" id="hoverlink">Hover here to render a tweet button to div#tbutton.</a>

Что это.

Если вы хотите, чтобы вся тестовая HTML-страница отображала, как я ее работаю, см. здесь:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery Twitter Button Render Test</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

</head>

<body>

<a href="http://www.my-site-to-tweet-about.com" id="tlink"></a>
<div id="tbutton"></div>

<a href="#" id="hoverlink">Hover here to render a tweet button to div#tbutton.</a>


<script type="text/javascript">
//async script, twitter button fashiolista.com style
    (function() {
    var s = document.createElement('SCRIPT');
    var c = document.getElementsByTagName('script')[0];
    s.type = 'text/javascript';
    s.defer = "defer";
    s.async = true;
    s.src = 'http://platform.twitter.com/widgets.js';
    c.parentNode.insertBefore(s, c);
    })();

function renderTweetButton(tbutton,tlink){
    var href = $("#"+tlink).attr('href'),
        $target = $("#"+tbutton),
        qstring = $.param({ url: href, count: "vertical" }),
        toinsert = '<iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/tweet_button.html?'+qstring+'" style="width:57px; height:70px;"></iframe>';
    $target.html(toinsert);
}

$("#hoverlink").mouseenter(function() {
    renderTweetButton("tbutton","tlink");
});

</script>

</body>
</html>

Ответ 6

У меня была такая же проблема, это работает в JQuery:

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

Ответ 7

Попробуйте библиотеку @Anywhere. Пример кода js:

twttr.anywhere(function (T) {
        T("#tweetbox").tweetBox({
        counter: false,
        defaultContent: "Default text in a Tweet box...",
        label: "Share this page on Twitter"
});