2011-08-08 39 views
14

tôi đang cố gắng để tạo ra một nút tweet với tính năng đếm ngang tự động:Tôi có thể tạo nút tweet bằng cách nào?

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"; 

Vấn đề tôi đang gặp là nút đang được hiển thị như một liên kết văn bản , không phải là một nút có hộp đếm ngang.

tôi đã tạo ra một nút facebook trong cùng một cách, mà làm việc một cách chính xác, tuy nhiên để làm cho nó hoạt tôi sử dụng như sau:

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

sử dụng như sau:

FB.XFBML.parse(); 

để phân tích cú pháp và vẽ nút. FB.XFBML.parse() đến từ http://connect.facebook.net/en_US/all.js

Khi tôi tạo nút Tweet tĩnh bên trong tệp .html hoạt động chính xác. Tôi bao gồm tập lệnh sau trong trang chỉ mục của mình nơi nút tweet phải được tạo động:

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

Nếu bạn có thể thấy những gì tôi đang làm không chính xác, vui lòng thông báo cho tôi!

Ảnh chụp màn hình sau đây đưa ra lời giải thích trực quan về những gì đang xảy ra với nút tweet! Tweet button not displaying correctly.

Giải pháp:

bây giờ tôi đã quản lý để giải quyết vấn đề. Vấn đề tôi tưởng tượng là tập lệnh twitter đang chạy khi tải và không được chạy lại khi tạo phần tử.

sử dụng jQuery sau hoạt động chính xác!

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

+1

bạn nên đặt giải pháp làm câu trả lời và đóng câu hỏi – Chamilyan

Trả lời

32

Nó đáng chú ý là tính đến thời gian gần đây, bạn có thể sử dụng chức năng twitter phụ tùng sau:

twttr.widgets.load(); 

Giả sử bạn đã tải các widget.js file:

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

Thao tác này sẽ tự động tạo lại nút tweet cho bạn.

+0

Đây thực sự là một giải pháp tốt hơn, nếu bạn chỉ muốn tập lệnh (lại) tạo nút, thay vì buộc tải lại. –

2

Bạn chỉ đang sử dụng mã sai. Để chỉ định URL, bạn sử dụng url, không phải url dữ liệu. Đây hoạt động:

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"; 

Để biết thêm chi tiết, hãy kiểm tra tài liệu của Twitter tại https://dev.twitter.com/docs/tweet-button#properties

+0

Cảm ơn thông tin về url, nhưng vấn đề chính tôi gặp phải là với nút tweet xuất hiện dưới dạng văn bản. Tôi đã chụp ảnh màn hình để cho bạn biết ý tôi là gì. http://i.imgur.com/J1qoA.png – Jack

+0

Bạn đang sử dụng trình duyệt nào? Điều này phù hợp với tôi trong Chrome CHỈNH SỬA: Chỉ cần thử trong Firefox. Tôi hiểu ý bạn là gì. Tôi sẽ xem tôi có thể giúp gì không. –

+0

@Bạn có thể thử khởi động bàn điều khiển Firefox không? Tôi nhận được một số lỗi CSS stylesheet từ tên miền twimg.com của Twitter. EDIT: Đột nhiên, tôi không nhận được cảnh báo nữa, nhưng vấn đề vẫn còn. :/ –

6

bây giờ tôi đã quản lý để giải quyết vấn đề. Vấn đề tôi tưởng tượng là tập lệnh twitter đang chạy khi tải và không được chạy lại khi tạo phần tử.

sử dụng jQuery sau hoạt động chính xác!

$.getScript("http://platform.twitter.com/widgets.js"); 
Các vấn đề liên quan