2012-03-22 82 views
0
同一頁

我有一個情況我需要包括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),這樣我可以跟蹤按鈕的點擊。

+0

進一步挖掘和撞頭分辨率後,發現這裏: http://stackoverflow.com/a/6932354/745964 這並不能解決同時使用Twitter的阿比的原始問題要求在同一頁上,雖然。我不覺得這是一個合適的答案,更多的是工作的周圍。 – westlywright 2012-03-23 15:39:14

回答

0

得到它的工作。

<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 2012-03-22 21:27:36