【问题标题】:Showing multiple twitter share buttons?显示多个推特分享按钮?
【发布时间】:2012-08-10 00:55:52
【问题描述】:

在我网站的某个页面上,用户有一个项目列表,如下所示:

<div id="item1">.....</div>
<div id="item2">.....</div>
<div id="item3">.....</div>

每个 div 在我的网站上都有自己的特殊链接,例如:

example.com/items/1
example.com/items/2
example.com/items/3

我想在每个单独的 div 中显示一个 twitter 分享按钮,点击该按钮后,用户可以将特定项目的 url 推特到他们的 twitter。

有这样的插件吗?

【问题讨论】:

    标签: javascript facebook twitter


    【解决方案1】:

    不需要第三方插件。使用Twitter plugin

    <!DOCTYPE html>
    <html lang="de">
        <head>
    
            <!-- meta -->
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <meta name="robots" content="noindex, nofollow">
    
            <title>Twitter Share Buttons</title>
    
        </head>
        <body>
            <div id="item1"><a href="https://twitter.com/share" class="twitter-share-button" data-url="http://example.com/items/1" data-text="Text to share 1">Tweet</a></div>
            <div id="item2"><a href="https://twitter.com/share" class="twitter-share-button" data-url="http://example.com/items/2" data-text="Text to share 2">Tweet</a></div>
            <div id="item3"><a href="https://twitter.com/share" class="twitter-share-button" data-url="http://example.com/items/3" data-text="Text to share 3">Tweet</a></div>
            <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>
        </body>
    </html>
    

    【讨论】:

    • 最后一个&lt;script&gt; 是否需要放在 div 的末尾或者我可以放在页面的任何位置?
    • 如果你喜欢,如果你使用 jQuery,你可以把它放在 html 头部到$(document).ready(function() { /* here goes the script */ });。该脚本应该在浏览器解释html标签之后执行。
    • 有没有办法快速做到这一点,比如 100 个 Twitter 按钮?我的页面需要大约 30 秒才能加载所有 Twitter 按钮。
    • @JohnAllen 我不知道。我会将此作为一个新问题发布:]
    猜你喜欢
    • 2018-05-22
    • 2012-06-03
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-04-01
    • 2013-11-10
    • 1970-01-01
    相关资源
    最近更新 更多