无法通过 Javascript 加载 Twitter 分享按钮

Can't load twitter share button via Javascript

本文关键字：Twitter 分享 按钮 加载 Javascript      更新时间：2023-09-26

我有一个div，我想通过jQuery将Twitter共享按钮加载到其中。当脚本在页面加载时执行时起作用。但是在那之后，当我手动执行此操作时，脚本似乎没有加载。

原始按钮：

<a href="https://twitter.com/share" class="twitter-share-button" data-via="givestreamuk">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

我尝试通过jQuery加载整个按钮（链接加脚本），但它不起作用，我只是得到了链接。相反，我尝试将脚本注入 DOM 中，如下所示：

这是我的JS：

var twitter = '<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://customer-url" data-via="givestreamuk" data-hashtags="socialgiving">Tweet</a>';
jQuery('#twitter_share').html(twitter);
var jstext = '!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");';
var script   = document.createElement("script");
script.type  = "text/javascript";
script.text  = jstext;
jQuery('#twitter_share').append(script);

我的 DIV 按钮被放置在：

<div id="twitter_share"></div>

当脚本在页面加载时执行时执行，但之后手动执行时，这才有效，只有链接出现在div 中。

谁能建议我如何手动将此按钮加载到 DIV 中并让脚本执行以生成按钮？

您是否在项目中使用 Turbolinks、PJAX 或其他类似的 gem？ 如果是这样，请参阅此线程：

https://github.com/rails/turbolinks/issues/25

这些解决方案：

http://www.blackfishweb.com/blog/asynchronously-loading-twitter-google-facebook-and-linkedin-buttons-and-widgets-ajax-bonus
http://reed.github.com/turbolinks-compatibility/facebook.html

如果你以动态方式插入内容，则必须修改Twitter脚本，因为只有第一个小部件才能正确加载。

对于新的Twitter按钮，ID twitter-wjs的脚本标签已经存在，if(!d.getElementById(id))将返回false。

只需向该if添加一个else语句，即可强制 Twitter Widget 对象检测新元素：

<script>
!function(d,s,id)
{
    var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';
    if(!d.getElementById(id))
    {
       js=d.createElement(s);
       js.id=id;
       js.src=p+'://platform.twitter.com/widgets.js';
       js.parentNode.insertBefore(js,fjs);
    }
    else
    {
        twttr.widgets.load();
    }
}(document, 'script', 'twitter-wjs');
</script>

来源： https://dev.twitter.com/web/javascript/initialization

相关文章：