2011-08-08 9 views
14

I現在、動的水平カウント機能でつぶやきボタンを作成しようとしています:私は動的にツイートボタンを作成できますか?

はJavaScript

var twitter = document.createElement('a'); 
twitter.setAttribute('href', 'http://twitter.com/share'); 
twitter.setAttribute('class', 'twitter-share-button twitter-tweet'); 
twitter.setAttribute('data-url','http://mindcloud.co.uk/idea/?idea=' + this.id); 
twitter.setAttribute('data-count', 'horizontal'); 
twitter.setAttribute('data-via', 'jtbrowncouk'); 
twitter.style.top = '20px'; 
twitter.style.left = '300px'; 
twitter.innerHTML = "Tweet"; 

私がいる問題は、ボタンはテキストリンクとして表示されていることです水平のカウントボックスを備えたボタンとしてではありません。

私はそれが私が次を使用し動作させるためにしかし、正常に動作するのと同じ方法でFacebookのボタンを作成しました

はJavaScript

var facebook = document.createElement('fb:like'); 
facebook.setAttribute('id', 'like'+this.id); 
facebook.setAttribute('href', 'http://mindcloud.co.uk/idea/?idea=' + this.id);  
facebook.setAttribute('layout', 'button_count'); 
facebook.setAttribute('send', 'false');   
facebook.setAttribute('width' , '300'); 
facebook.setAttribute('font', ''); 
facebook.setAttribute('show_faces', 'true'); 
facebook.style.top = '0px'; 
facebook.style.left = '300px'; 

次を使用して:

FB.XFBML.parse(); 

ボタンを解析して描画します。 FB.XFBML.parse()は、 http://connect.facebook.net/en_US/all.js

から来ます。私が.htmlファイルの中に静的にTweetボタンを作成すると、正しく動作します。私はつぶやきボタンを動的に作成する必要があり、私のインデックスページ内の次のスクリプトを含むです:あなたは私が間違ってやっているかを見ることができる場合

<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> 

はお知らせください!

次のスクリーンショットは、ツイートボタンがどうなっているのかを視覚的に説明しています。 Tweet button not displaying correctly.

ソリューション:

私は今、問題を解決するために管理してきました。私が想像している問題は、twitterスクリプトがロード時に実行され、要素の作成時に再実行されないということです。

次のjQueryを使用すると正しく動作します。

$ .getScript( "http://platform.twitter.com/widgets.js");

+1

解決策を回答として入れて質問を終了する必要があります。 – Chamilyan

答えて

32

それは最近のよう次のTwitterウィジェット機能を使用することができることは注目に値します。jsファイル:

<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> 

これにより、動的にツイートボタンが再作成されます。

+0

再ロードを強制するのではなく、スクリプトに(再)ボタンを作成させたい場合は、これは実際にはより良い解決策です。 –

2

あなたは間違ったコードを使用しています。 URLを指定するには、data-urlではなくurlを使用します。詳細については

var twitter = document.createElement('a'); 
twitter.setAttribute('href', 'http://twitter.com/share'); 
twitter.setAttribute('class', 'twitter-share-button twitter-tweet'); 
twitter.setAttribute('url','http://mindcloud.co.uk/idea/?idea=' + this.id); 
twitter.setAttribute('data-count', 'horizontal'); 
twitter.setAttribute('data-via', 'jtbrowncouk'); 
twitter.style.top = '20px'; 
twitter.style.left = '300px'; 
twitter.innerHTML = "Tweet"; 

を、https://dev.twitter.com/docs/tweet-button#properties

+0

URLの情報をありがとうが、主な問題はツイートボタンがテキストとして表示されていることです。私はスクリーンショットを撮って、あなたが何を意味するかを示します。 http://i.imgur.com/J1qoA.png – Jack

+0

どのブラウザを使用していますか?これは私のChromeで動作します 編集:Firefoxで試してみました。私はあなたが何を意味するかを見ます。私が助けることができるかどうかがわかります。 –

+0

@Jack Firefoxのコンソールを起動できますか?私はTwitterのtwimg.comドメインからいくつかのCSSスタイルシートエラーを取得しています。 編集:突然、私はもう警告は出ませんが、問題は残っています。 :/ –

6

でTwitterのドキュメントをチェックアウトし、私は今、問題を解決するために管理してきました:これは動作します。私が想像している問題は、twitterスクリプトがロード時に実行され、要素の作成時に再実行されないということです。

次のjQueryを使用すると正しく動作します。あなたがウィジェットをロードしたと仮定すると、

twttr.widgets.load(); 

$.getScript("http://platform.twitter.com/widgets.js"); 
関連する問題