问题标签 [twitter-button]

我正在创建一个简单而快速的网站，并且我正在尝试尽可能优化该网站。我注意到社交媒体按钮大大降低了网站的速度。我包括 Facebook Like 按钮、Twitter 按钮和 Google+ 按钮。所以我进行了一些测试：

没有社交媒体按钮的网站，加载时间 0.24 秒：

带有社交媒体按钮的网站，加载时间 1.38 秒：

这是我的代码：

所以我尝试了一些方法来加载这些社交按钮，而不会减慢网站加载时间。

通过 JavaScript 在延迟一秒后加载按钮：

这没有帮助，按钮没有正确加载并且它们正在窃听。

文档准备好后加载按钮：

这也没有帮助。按钮加载得很好，但网站加载时间仍然 > 1.00 秒。

我的想法不多了。有什么方法可以在不减慢网站速度的情况下加载它们？

PS。在这些测试中使用了 chrome 的页面加载时间插件

解决方案：

感谢 CodeMonkey 的回答，我最终通过在加载整个页面后加载社交按钮来解决这个问题。我将必要的 JavaScript 代码（用于社交媒体按钮）移动到一个单独的文件中，以使我的 HTML/标记更清晰。

JS（在单独的文件 social.js 中）：

HTML：

所以在这个加载时间再次正常之后，0.24s：

我有一个函数可以平均来自多个滑块的所有值。我正在尝试从该平均值中获取数据并插入到推文中。示例：“我刚刚在玩这个很棒的游戏时得了 100 分！” 点值显然是根据平均值动态变化的。我对 Javascript/Jquery 非常陌生，因此请在回答时包含大量详细信息。谢谢！这是我的jQuery：

HTML

有没有一种相对干净的方法可以让我获得 twitter 按钮的简单 javascript 版本的所有内置优点，但推迟执行其相当繁重的 javascript，直到用户真正点击按钮？

我在想我可以像这样构建一个锚标签：

然后定义一个函数，如：（注意：编辑原始帖子，现在设置href）：

如果我twitter_button.gif看起来与 twitter 指定的 javascript 通常插入的图像完全一样，那么 twitter 指定的 javascript 的执行对用户来说基本上看起来就像一个无操作。这应该很容易做到（假设 Twitter 的图像在所有平台上都是相同的）。

因此，希望我唯一需要帮助的是弄清楚如何anchor_instance在 Twitter 的 javascript 执行后模拟点击。

我的目标是保留 javascript twitter 按钮提供的漂亮弹出窗口（和默认值）。

谢谢你。

我正在尝试为我的网站创建自定义社交共享按钮，但我遇到了当前页面标题和 url 没有被正确拉出以与社交网络共享的问题。

我的代码示例如下所示：

非常感谢任何帮助或正确方向的观点。

谢谢！

当我启用模糊和 adblock plus 时，twitter 按钮显示为超链接，更糟糕的是，它共享当前页面的 URL（这是我不想共享的内容）。无论如何，当它加载不正确时，我可以阻止这个推文按钮完全加载吗？什么可以是一个好的指标？

我有一个包含 Facebook 和 Twitter 共享按钮的网站。在 Chrome 中加载时，我看到两者，在 IE 和 Firefox 中加载时，我只看到 Facebook 共享。这些按钮使用直接从两个开发者网站生成的代码。具体来说，我生成的推特代码是：

在所有浏览器的控制台中，我得到：

从http://platform.twitter.com收到对象类型的消息，需要一个字符串

但是 chrome 和 safari 仍然可以加载 Twitter 按钮。（也许他们会自动将返回的对象转换为字符串）

更多细节：

• 这些按钮是通过 AJAX 加载的。我twttr.widgets.load();在每次 Ajax 调用结束时调用（除了FB.XFBML.parse();）。
• 我已经从浏览器中删除了所有插件/插件，并且没有看到任何变化。
• 使用 ASP.NET 4.5
• 检查 DOM 我看到了带有 display:hidden 的 twitter iframe

任何帮助是极大的赞赏。

我正在使用 SocialEngine4 并尝试在其中集成 Twitter 关注按钮。但它没有显示按钮，因此用户将在点击它时获得登录屏幕。

我检查了它的脚本代码，发现使用了 mootool。SocialEngine4 也使用 mootool。因此，由于某些冲突，twitter 按钮无法正确生成。

我在计划 php 中尝试了这个按钮的代码，它工作正常。

有人知道吗？我正在使用以下代码生成 twitter 按钮

我正在尝试将 Content-Security-Policy (CSP) 标头用于具有社交媒体按钮（youtube、twitter、facebook）的网站。但是，这些小部件在指定不明确的第 3 方站点列表上运行脚本。社交媒体网站并未指定其脚本将访问的所有网站，因此您需要运行您的页面并逐一查看并查看被阻止的域，然后将它们添加到 CSP 标头中。

这似乎非常脆弱。如果社交媒体网站更改其脚本并添加新域，则页面将中断，因为浏览器将阻止对新域的访问。

CSP 在阻止 XSS 方面非常有效，但似乎社交媒体网站不提供设计用于使用它的按钮/小部件。至少，他们应该只需要一个域，并且应该具体说明该域是什么。

我最终得到一个 CSP 标头，例如：

内容安全策略：default-src 'self' https://www.google.com http://csi.gstatic.com http://www.google-analytics.com https://apis.google.com https://accounts.google.com https://platform.twitter.com https://www.youtube。com http://platform.twitter.com；img-src“自我”数据：https ://www.google.com http://www.google-analytics.com http://ssl.gstatic.com https://ssl.gstatic.com数据：；style-src 'self' https://fonts.googleapis.com 'unsafe-inline'; font-src 'self' https://fonts.gstatic.com数据：

有一个更好的方法吗？

我构建了一个非常简单的随机报价生成器。一堆报价存储在一个数组中，并且根据保存当前报价的变量在任何给定时间显示一个报价。如果用户单击新报价的按钮，则该变量会更改并显示新报价。

我正在尝试向我的页面添加一个 Twitter 按钮，该按钮将使用当前报价填充推文。我使用 Twitter for Websites Twitter Button 说明并浏览了相关材料，但我仍然无法弄清楚发生了什么。目前，它适用于第一个报价，但当您单击“新报价”时，Twitter URL 中的报价不会改变。

主要逻辑在这里：

其他一切都在这里：https ://jsfiddle.net/37szaqpr/