Включение кнопки Tweet и виджета профиля на одной странице - PullRequest
Новая
       27

Включение кнопки Tweet и виджета профиля на одной странице

0 голосов
/ 23 марта 2012

У меня есть ситуация, когда мне нужно включить виджет профиля Twitter и кнопку Tweet на той же странице. Возьмите следующий пример тестирования: 

<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), чтобы я мог отслеживать нажатия кнопки.

1 Ответ

0 голосов
/ 23 марта 2012

Работает. 

<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 для привязки событий.

...