Question

我有一种情况需要在同一页面上包含Twitter个人资料小部件和推文按钮。采取以下测试示例：

<head>
    <title></title>
</head>
<body>
    <div class="jb-twitter">
        <script src="http://widgets.twimg.com/j/2/widget.js" type="text/javascript"></script>
        <script type="text/javascript">
        new TWTR.Widget({
            version: 2,
            type: 'profile',
            rpp: 4,
            interval: 4000,
            width: 285,
            height: 260,
            theme: {
                shell: {
                    background: '#ccc',
                    color: '#333333'
                },
                tweets: {
                    background: '#ffffff',
                    color: '#3d3d3d',
                    links: '#0066CC'
                }
            },
            features: {
                scrollbar: true,
                loop: true,
                live: true,
                hashtags: true,
                timestamp: true,
                avatars: false,
                behavior: 'default'
            }
        }).render().setUser('westlywright').start();


        //Twitter JS Func for sharing
        window.twttr = (function (d, s, id) {
            var t, js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) return;
            js = d.createElement(s);
            js.id = id;
            js.src = "https://platform.twitter.com/widgets.js";
            fjs.parentNode.insertBefore(js, fjs);
            return window.twttr || (t = {
                _e: [],
                ready: function (f) {
                    t._e.push(f)
                }
            });
        }(document, "script", "twitter-wjs"));

        twttr.ready(function (twttr) {
            twttr.events.bind('click', function () {
                //some jquery here
            });
        });
        </script>
        <a href="https://twitter.com/share" class="twitter-share-button" data-lang="en">Tweet</a>
    </div>
</body>

我猜错了以下错误，因为两个widget.js文件存在冲突：

Uncaught TypeError: Object # has no method 'ready'

有谁知道如何解决这个问题？

编辑：部分目的是使用Twitter按钮回调功能（twttr.events.bind），以便我可以跟踪按钮的点击次数。

Answer 1

搞定了。

<head>
<title></title>
</head>
<body>
<div class="jb-twitter">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    <script src="http://widgets.twimg.com/j/2/widget.js" type="text/javascript"></script>
    <script type="text/javascript">
    new TWTR.Widget({
        version: 2,
        type: 'profile',
        rpp: 4,
        interval: 4000,
        width: 285,
        height: 260,
        theme: {
            shell: {
                background: '#ccc',
                color: '#333333'
            },
            tweets: {
                background: '#ffffff',
                color: '#3d3d3d',
                links: '#0066CC'
            }
        },
        features: {
            scrollbar: true,
            loop: true,
            live: true,
            hashtags: true,
            timestamp: true,
            avatars: false,
            behavior: 'default'
        }
    }).render().setUser('westlywright').start();


    //Twitter JS Func for sharing
    window.twttr = (function (d, s, id) {
        var t, js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s);
        js.id = id;
        js.src = "https://platform.twitter.com/widgets.js";
        fjs.parentNode.insertBefore(js, fjs);
        return window.twttr || (t = {
            _e: [],
            ready: function (f) {
                t._e.push(f)
            }
        });
    }(document, "script", "twitter-wjs"));

    $(twttr).ready(function (twttr) {
        $(twttr.events).bind('click', function () {
            //some jquery here
        });
    });
    </script>
    <a href="https://twitter.com/share" class="twitter-share-button" data-lang="en">Tweet</a>
</div>

问题是您需要引用JQuery并使用JQuery语法来绑定事件。

在同一页面上包括Tweet Button和Profile Widget

1 个答案: