Повторно визуализировать кнопку Tweet через JS - PullRequest
Новая
       2

Повторно визуализировать кнопку Tweet через JS

19 голосов
/ 01 июня 2011

Я использовал этот фрагмент для повторного рендеринга кнопки Tweet. 

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

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

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

Ответы [ 7 ]

45 голосов
/ 30 июня 2011

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

$.ajax({ url: 'http://platform.twitter.com/widgets.js', dataType: 'script', cache:true});
23 голосов
/ 28 мая 2012

Для любого, кто сталкивается с этим, есть новый, более простой способ сделать это (с 28.05.12, если не раньше).Быстрый взгляд не нашел его в документации, но вы можете сделать twttr.widgets.load().Это [пере] загрузит все виджеты на странице.

РЕДАКТИРОВАТЬ: В конце концов, это задокументировано.Проверьте эту страницу раздел «Оптимизация» (который вы не можете напрямую связать)

10 голосов
/ 19 ноября 2013

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

4 голосов
/ 07 июня 2011

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

Поддерживается методдля динамического создания кнопки твита на основе iframe:

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

1 голос
/ 12 июля 2013

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

$.getScript('http://platform.twitter.com/widgets.js');
1 голос
/ 07 сентября 2011

Во-первых, убедитесь, что 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>

В нижней части вашей страницы, прямо над тегом / body, включите 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>
0 голосов
/ 01 июня 2011

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

twttr.anywhere(function (T) {
        T("#tweetbox").tweetBox({
        counter: false,
        defaultContent: "Default text in a Tweet box...",
        label: "Share this page on Twitter"
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...