Biểu tượng xã hội không hoạt động với cuộn vô hạn trên Wordpress

Question

Chúng tôi đang tạo trang web cho khách hàng tại nơi làm việc, có thể tìm thấy ở đây: http://ethercreative.net/studio_social/ Đó là một chủ đề wordpress rất đơn giản, nhưng các biến chứng phát sinh với xung đột giữa plugin cuộn vô hạn và các biểu tượng xã hội.

Mỗi bài đăng có nghĩa là hiển thị một khối ở cuối với biểu tượng xã hội G +, FB và Twitter bên trong. Nó có nghĩa là để hiển thị ~ 4 bài viết hoặc như vậy lúc bắt đầu, và sau đó khi bạn di chuyển nó có nghĩa là để tải các thiết lập tiếp theo.

Mỗi thứ trong số này hoạt động nhưng không được kết hợp với nhau.

Khi cuộn vô hạn tải khối bài đăng tiếp theo, nó chỉ hiển thị nút như Facebook và cả hai biểu tượng xã hội khác.

Điều kỳ lạ là mặc dù, nó để lại đằng sau khối mã:

<span class="icons"> 
        <g:plusone size="medium" href="http://ethercreative.net/studio_social/?p=1"></g:plusone>    <iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fethercreative.net%2Fstudio_social%2F%3Fp%3D1&amp;locale=&amp;layout=button_count&amp;action=like&amp;width=92&amp;height=20&amp;colorscheme=light" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:92px; height:20px;" allowtransparency="true"></iframe>&nbsp;&nbsp;&nbsp; 
        <a href="http://twitter.com/share" class="twitter-share-button" data-url="http://ethercreative.net/studio_social/?p=1" data-count="horizontal" data-text="Hello world!" data-via="twitter_username"></a></span> 
</div> 

Tôi biết những gì vấn đề là gì và tại sao nó đang xảy ra, nhưng tôi thực sự không phải là rất tốt với javascript và không biết những gì các cuộc gọi để sử dụng để sửa chữa nó.

Tôi đang sử dụng Wordpress 3.3.1, với plugin cuộn vô hạn (http://wordpress.org/extend/plugins/infinite-scroll/) và digg digg cho biểu tượng xã hội (http://wordpress.org/extend/plugins/digg-digg /)

Plugin cuộn vô hạn không có khả năng thêm sự kiện onLoad để chạy sau khi nó đã nắm lấy tập hợp bài đăng mới. Vậy tôi nên thêm gì ở đây?

Cảm ơn mọi sự giúp đỡ trước! Chúc một ngày tốt đẹp.

---

Cập nhật: Sau một vài nghiên cứu nữa, tôi cũng đã cố định twitter. Bây giờ nó chỉ là Google Plus còn lại để sửa chữa. Mã cần thiết cho twitter là:

!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs"); 

Cập nhật lại: Tìm thấy mã Google Plus quá:

(function() {var po = document.createElement ('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName ('script') [0 ]; s.parentNode.insertBefore (po, s); })();

Tôi đã học được gì? Làm googling nhiều hơn trước khi yêu cầu trên Stack tràn. Ít nhất đó là câu trả lời cho những người có vấn đề này trong tương lai.

Answer 1

Giải pháp bạn trình bày về cơ bản là tải lại các tập lệnh, điều này khá không hiệu quả, vì bạn có thể tải chúng lên trang tải cho tập hợp các nút xã hội đầu tiên. Cả 3 dịch vụ đều có cách phân tích cú pháp một phần của hoặc toàn bộ tài liệu để hiển thị mọi tiện ích xã hội mới. Mã bạn muốn có dạng như sau:

var el = document.body; 

//Google Plus 
if (typeof gapi !== "undefined") { gapi.plusone.go(el); } 

//Facebook 
if (typeof FB !== "undefined") { FB.XFBML.parse(el); } 

//Twitter 
if (typeof twttr !== "undefined") { twttr.widgets.load(); } 

Trong các trường hợp trên, nên là thùng chứa vật dụng hoặc có thể chỉ là tài liệu.body (sẽ hiển thị lại tất cả tiện ích con). nếu bạn có thể thu hẹp ngữ cảnh với Twitter hiện tại, nhưng tôi tin rằng họ có kế hoạch thêm nó vào.

Answer 2

Giống như LocalPCGuy gợi ý, bạn đang làm nhiều công việc hơn cần thiết để đạt được điều này. Lý tưởng nhất là bạn có một phần của gọi lại không đồng bộ tải làm công việc để nhúng các nút này chỉ trong các phần tử yêu cầu chúng. Hoặc, thậm chí tốt hơn, thêm chúng vào phía máy chủ (nếu có thể) để khách hàng không phải làm việc để làm cho trang sẵn sàng. Ít nhất với giải pháp của bạn, các tập tin kịch bản sẽ được lưu trữ mà nên làm cho thời gian tải tốt hơn. Vấn đề là bạn vẫn làm cho trang hoạt động khó khăn hơn cần thiết. Khi trang cuộn vô hạn và ngày càng lớn hơn, công việc phụ này sẽ ngày càng quan trọng.

Dòng chảy lý tưởng sẽ là một cái gì đó như:

1. tải trang ban đầu
2. Execute JS yêu cầu. Trong bước này, hãy đảm bảo bạn có một hàm sẽ nhúng các tiện ích xã hội vào một nút DOM đã cho.
3. Cho phép trang cuộn, kích hoạt và yêu cầu không đồng bộ trang vô hạn
4. Trên tải không đồng bộ, có gọi lại không đồng bộ phân tích cú pháp phản hồi và sau đó lặp qua DOM nó tạo ra mỗi mục nhập vào chức năng tạo tiện ích của bạn.

Bằng cách đó, bạn đang thực hiện công việc ít nhất cần thiết để có được hiệu quả bạn muốn.

Answer 3

thêm mã trong các file JS ...

addthis.toolbox('.addthis_toolbox'); 
addthis.counter('.addthis_counter'); 

Nó hoạt động một cách hoàn hảo.