Trong bài trước chúng ta đã biết cách chèn nút chia sẻ bài viết addthis, trực tiếp vào trong website. Tuy nhiên trong trường hợp web của bạn thiết kế dữ liệu động và các nút Addthis cần phải load sau khi dữ liệu của trang đã load xong, vậy thì phải làm sao? Trong bài viết này mình sẽ nói chi tiết cách tạo nút chia sẻ bài viết động sử dụng tính năng Addthis Dynamically.

Asynchronous Loading

Asynchronous Loading cho phép bạn nạp file addthiswidget.js theo cách trực tiếp hoặc động nhưng không render nút đến khi bạn gọi nó. Để làm điều này bạn cần thêm #async=1 vào cuối addthiswidget.js.

<script src="http://s7.addthis.com/js/300/addthis_widget.js#async=1" type="text/javascript"></script>

Vẫn chèn trực tiếp các thẻ nút của addthis vào trong trang. Ví dụ:

<a class="addthis_button_facebook_like" fb:like:layout="box_count"></a>
<a class="addthis_button_google_plusone" g:plusone:size="tall"></a>
<a class="addthis_button_tweet" tw:count="vertical"></a>

Nếu chỉ như thế này, khi chạy web nút sẽ chưa được hiển thị, để hiển thị bạn cần gọi chúng bằng cách gọi hàm addthis.init();. Bạn có thể render nút addthis sau khi page tải xong.

function loadAddThis() {
    addthis.init();
}
$(document).ready(loadAddThis);

Hoặc gán vào sự kiện javascript vào bất kỳ thành phần nào bạn muốn kích hoạt hiển thị nút.

Domready

Cách thức này cũng giống như trên, nhưng nút sẽ được tạo ngay sau khi page tải xong. Thêm thư viện addthis_widget.js động và nói với addthis thời điểm nút được render #domready=1. Tham số này đồng bộ addthis với sự kiện ready document.

var addthisScript = document.createElement('script');
addthisScript.setAttribute('src', 'http://s7.addthis.com/js/300/addthis_widget.js#domready=1')
document.body.appendChild(addthisScript);

Nút sẽ tự động hiển thị, bạn không cần gọi mọi hàm nào để render nút.

Chú ý, nếu trước đó đã tồn tại js addthis_widget.js trong web thì không được thêm động nữa. Bạn cần kiểm tra xem file addthis_widget.js đã nạp trước đó chưa, nếu chưa thì hãy thêm, cố tình thêm addthis sẽ không hoạt động:
if (!$("script[src='http://s7.addthis.com/js/300/addthis_widget.js']").length)
    $('<script src="http://s7.addthis.com/js/300/addthis_widget.js" >').appendTo("head");
Cách khác:
function loadCSSIfNotAlreadyLoadedForSomeReason () {
    var ss = document.styleSheets;
    for (var i = 0, max = ss.length; i < max; i++) {
        if (ss[i].href == "/path/to.css")
            return;
    }
    var link = document.createElement("link");
    link.rel = "stylesheet";
    link.href = "/path/to.css";

    document.getElementsByTagName("head")[0].appendChild(link);
}
loadCSSIfNotAlreadyLoadedForSomeReason();

Nếu bạn muốn sử dụng addthis api thì hãy chắc chắn sử lý code sau khi file thư viện addthis đã tải xong, bằng cách chèn code addthis vào trong hàm callback $.getScript

<script>
    var script = 'http://s7.addthis.com/js/300/addthis_widget.js#domready=1';
    if (window.addthis){
        window.addthis = null;
        window._adr = null;
        window._atc = null;
        window._atd = null;
        window._ate = null;
        window._atr = null;
        window._atw = null;
    }
    $.getScript( script , function() { addthis.init(); });
</script>

Lưu ý: có 2 phiên bản “250” (http://s7.addthis.com/js/250/addthis_widget.js) và “300” (http://s7.addthis.com/js/300/addthis_widget.js). Bản 300 được nâng cấp và fixed lỗi nhiều hơn, bạn nên sử dụng phiên bản mới này.

Tạo nút động

Rất nhiều sites có thiết kế dữ liệu động trên web sử dụng kỹ thuật ajax để hiển thị nội dung. Một ví dụ điển hình, như nạp nội dung khi người dùng cuộn đến hết trang nội dung mới sẽ hiển thị tiếp theo bạn không cần phải chuyển đến trang khác mới xem nội dung kế tiếp.

Tuy nhiên mã Addthis chúng trực tiếp và chạy ở thời điểm page load. Tạo mã nút động cùng lúc tải nội dung động sử lý trong web sẽ không bao giờ hiển thị.

Nhưng bạn cũng đừng lo lắng quá, addthis có một cách giúp bạn tạo mã nút động với hàm tiện ích addthis.toolbox(), gọi hàm này sau khi đã thêm mã nút sử dụng javascript.

<script>
function show_addthis(){
	var t='<a class="addthis_button_facebook_like" fb:like:layout="box_count"></a>';
	t+='<a class="addthis_button_google_plusone" g:plusone:size="tall"></a>';
	t+='<a class="addthis_button_tweet" tw:count="vertical"></a>';
	
	$('.toolbox').append(t);
	addthis.toolbox('.toolbox');
}
</script>
<button onclick="show_addthis()">Show addthis dynamic</button>

Với trường hợp này, bạn có thể nhúng addthis_widget.js trực tiếp vào trong thẻ head, hoặc lựa chọn nạp thư viện đồng bộ document “domready” mà mình có nói ở trên. Chèn thư viện này trước khi khai thác API của addthis. Mọi thời điểm bạn có thể thêm HTML chứa mã nút addthis vào document, và để bắt đầu hiển thị nút chúng ta gọi hàm addthis.toolbox.

addthis.toolbox(".toolbox");

Ví dụ trên, mình chèn nút vào thẻ div có class=”toolbox”.

<div class="toolbox">
</div>

Thêm một ví dụ về cách tạo nút sử dụng addthis.toolbox

<div id="toolbox"></div>

<script type="text/javascript">
var tbx = document.getElementById("toolbox"),
    svcs = {email: 'Email', print: 'Print', facebook: 'Facebook', expanded: 'More'};

for (var s in svcs) {
    tbx.innerHTML += '<a class="addthis_button_'+s+'">'+svcs[s]+'</a>';
}
addthis.toolbox("#toolbox");
</script>

Sử dụng cấu hình addthis html5, thiết lập cài đặt options thông qua sử dụng thuộc tính html5. Ví dụ sau chỉ định nội dung chia sẻ cho các nút chia sẻ addthis.

<div class="addthis_toolbox addthis_default_style addthis_32x32_style" addthis:url="{{url}}" addthis:title="{{title}}" addthis:description="{{description}}">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script>
$.getScript( script , function() { 
	addthis.toolbox(".addthis_toolbox");
 });
</script>

Thay mã nút với tên class của các nút facebook, google+,.. bạn sẽ dùng trên web.

addthis.button(..)

Hàm addthis.button giúp tạo nút addthis thông thường vào mọi thành phần HTML, thậm trí sử dụng cả img tag. Nếu không phải img tag thì addthis sử dụng ảnh nút mặc định, ngược lại nếu thành phần là img tag thì lấy luôn ảnh đó làm ảnh của nút. Cú pháp:

addthis.button(target(s), [configurationObject], [sharingObject]);

Ví dụ:

<a id="atbutton"></a>

<script type="text/javascript">
addthis.button("#atbutton");
</script>

Có thể render nút vào nhiều thành phần HTML có chung class.

<a class="sharing-button"></a>
.
.
.
<a class="sharing-button"></a>
.
.
.
<a class="sharing-button"></a>
<script type="text/javascript">
addthis.button('.sharing-button');
</script>

Mỗi thẻ a có class=”sharing-button” sẽ trở thành một nút addthis, như thế này.

Cũng có thể truyền đối tượng truy cập vào thẻ nút, giống như sau:

<a id="button-1"></a>
<script type="text/javascript">
addthis.button(document.getElementById('button-1'));
</script>

Cho phéo tạo nhiều nút bằng cách dùng mảng chứa.

<a id="button-1"></a>
<a id="button-2"></a>
<a id="button-3"></a>
<a id="button-4"></a>
<script type="text/javascript">
addthis.button([document.getElementById('button-1'),
                document.getElementById('button-2'),
                document.getElementById('button-3'),
                document.getElementById('button-4')]);
</script>

Chia sẻ nội dung bài viết

Bạn có thể chỉ định bài viết trong quá trình tạo tạo nút chia sẻ, sử dụng thêm tùy chọn tham số khai báo với addthis URL website muốn chia sẻ vào nút.

<a id="blog-post-24"></a>
<script type="text/javascript">
addthis.button('#blog-post-24', {}, {url: "http://example.com/blog/24", title: "The 24th post"});
</script>
.
.
.
<!-- blog content -->
.
.
.
<a id="blog-post-25"></a>
<script type="text/javascript">
addthis.button('#blog-post-25', {}, {url: "http://example.com/blog/25", title: "The 25th post"});
</script>

Counter

Tạo nút có đếm số lượng chia sẻ, cho nút addthis thông thường.

<a id="atcounter"></a>

<script type="text/javascript">
addthis.counter("#atcounter");
</script>

Kết quả

Cú pháp: addthis.counter(target(s), [configurationObject], [sharingObject]);
Xem thêm cách cài đặt tham số cấu hình tại đây.

Hẹn bạn ở các tutorial tiếp theo, nếu thấy bài viết có ích thì hãy ấn like ủng hộ mình nha.

Nếu bạn thấy bài viết này hữu ích, hãy chia sẻ với bạn bè bằng cách nhấn nút chia sẻ ở bên dưới. Theo dõi chúng tôi trên Twitter và Facebook

HOÀNG WEB

SẢN PHẨM

LIÊN KẾT