2012-03-22 2 views
0

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

<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' 

Кто-нибудь знает, как решить эту проблему?

EDIT: часть намерения заключается в использовании функции обратного вызова кнопки Twitter (twttr.events.bind), чтобы я мог отслеживать клики на кнопке.

+0

После дальнейшего копания и голову стукнет разрешение было найдено здесь: http://stackoverflow.com/a/6932354/745964 Это не решает исходную задачу использования обоих щебечет Апи вызовов на той же странице, хотя , Я не считаю, что это подходящий ответ, больше работы. – westlywright

ответ

0

Got it working.

<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, чтобы связать события.

+0

Хотя это устраняет ошибку, я теряю доступ к функции обратного вызова twitter (привязка привязки), и событие клика никогда не запускается. Я должен был упомянуть, что это часть намерения в моем первоначальном посте, я вернусь и отредактирую. – westlywright

 Смежные вопросы

  • Нет связанных вопросов^_^