Tùy biến nút addthis – Tổng hợp các nút chia sẻ social button của addthis. Addthis có 2 cách triển khai, bạn có thể trực tiếp thiết lập cài đặt trên addthis toolbox và chỉ cần đoạn mã nhúng addthis hoặc chèn trực tiếp mã code nút với HTML.

Trước hết bạn chèn đoạn js sau vào trong thẻ head để cấu hình cho addthis.

<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js"></script>
<script type="text/javascript">
var addthis_config = {
     pubid: "YOUR-PROFILE-ID"
}
</script>

Nhớ đổi pubid thành mã publisher ID của bạn. Mình xin trình bầy chi tiết cài đặt các loại nút cho các dịch vụ chia sẻ, bạn xem ở dưới đây.

Compact Button

Bạn có thể dễ dàng thay thế ảnh nút addthis với thẻ img. Ví dụ sau sử dụng nút dạng compact.

<a class="addthis_button_compact">
         <img src="http://s7.addthis.com/static/btn/sm-plus.gif"
  	 width="16" height="16" border="0" alt="Share" /></a>

Thay thế đường dẫn ảnh thành nút riêng của bạn. Ví dụ sau sử dụng hình mặc định:

<a class="addthis_button_compact"></a>

Nút có ảnh và text
Viết thêm text cạnh thẻ img bạn sẽ có kết quả.

<a href="http://www.addthis.com/bookmark.php"
  	class="addthis_button"
 	style="text-decoration:none;">
        <img src="http://s7.addthis.com/static/btn/sm-plus.gif"
  	width="16" height="16" border="0" alt="Share" /> Share</a>

Nút văn bản
Nếu bạn chỉ sử dụng văn bản cho nút thì kèm thêm thẻ html như span.

<a class="addthis_button_compact"><span>Bookmark or Share</span></a>

Học cách sử dụng addthis api, bạn truy cập vào trang hỗ trợ của nó tại http://support.addthis.com/customer/portal/articles/1337989-overview

Facebook Like Button

Bạn có thể kích hoạt nút facebook like cho đoạn mã nhúng addthis trong website của bạn tại đây:
http://www.addthis.com/social-plugins/facebook-like-button. Cũng giống như cách chọn và kích hoạt addthis share tools, nhấn vào Active để kích hoạt. Bạn được đưa đến trang kích hoạt một lần nữa, nhấn vào Activate để lưu lại.

Nếu không muốn kích hoạt chung trên tài khoản addthis mà chỉ lấy mã nút facebook like thì sử dụng code sau:

<div class="addthis_toolbox addthis_default_style">
     <a class="addthis_button_facebook_like" fb:like:layout="button_count"></a> 
</div>

Nếu muốn addthis đếm số like facebook thì khai báo thêm thuộc tính namespace vào thẻ html như thế này:

<html xmlns:fb="http://ogp.me/ns/fb#">

Addthis có hỗ trợ hầu hết các thuộc tính cấu hình để tạo kiểu dáng cho nút Facebook like.
Recommend Button

<a class="addthis_button_facebook_like" fb:like:layout="button_count" fb:like:action="recommend"></a>

Vertical Counter

<a class="addthis_button_facebook_like" fb:like:layout="box_count"></a>

Standard with Friends List

<a class="addthis_button_facebook_like" fb:like:layout="standard"></a>

Facebook Send Button

Để thêm Facebook send button vào addthis sharing tool, sử dụng đoạn html sau:

<div class="addthis_toolbox addthis_default_style">
     <a class="addthis_button_facebook_send"></a> 
</div>

Nếu muốn quản lý số lượng clicks trên nút thì cũng thêm Facebook’s XML namespace vào thẻ html như sau:

<html xmlns:fb="http://www.facebook.com/2008/fbml">

Lưu ý bạn không thể đếm lượt clicks vào nút facebook nếu nút tạo bởi iframe. Mà bạn có thể tạo nút với đoạn mã trên của addthis hoặc sử dụng < fb:like > của Facebook’s JavaScript SDK.

Twitter Tweet Button

Cung tương tự như cách tạo nút facebook, để thêm Tweet Button vào addthis toolbox bạn kích hoạt trên toolbox theo URL: http://www.addthis.com/social-plugins/tweet-button. Hoặc sử dụng code sau:

<div class="addthis_toolbox addthis_default_style">
     <a class="addthis_button_tweet"></a> 
</div>

Chú ý: Tweet button không hỗ trợ SSL (https)

Cấu hình tùy chọn Tweet
Vertical Counter

<a class="addthis_button_tweet" tw:count="vertical"></a>

Standard with Customized Via

<a class="addthis_button_tweet" tw:via="YOUR TWITTER USERNAME"></a>

Standard with Customized Tweet Text

<a class="addthis_button_tweet" tw:text="I LOVE AddThis!"></a>

Standard with Customized Related

<a class="addthis_button_tweet" tw:related="addthis"></a>

Twitter Follow Button

Cách 1: thêm nút Twitter Follow vào addthis toolbox, kích hoạt với link này: http://www.addthis.com/social-plugins/twitter-follow
Cách 2: Sử dụng code sau.

<div class="addthis_toolbox addthis_default_style">
     <a class="addthis_button_twitter_follow_native"></a> 
</div>

Google +1 Button

Nếu bạn sử dụng addthis toolbox thì hãy kích hoạt Google +1 Button, còn không lấy mã này:

<div class="addthis_toolbox addthis_default_style">
     <a class="addthis_button_google_plusone"></a> 
</div>

Bạn cũng có cấu hình cho Google+1 với nhiều kiểu lựa chọn
Larger Standard

<a class="addthis_button_google_plusone" g:plusone:size="medium"></a>

Vertical Counter

<a class="addthis_button_google_plusone" g:plusone:size="tall"></a>

Standard with No Count

<a class="addthis_button_google_plusone" g:plusone:count="false"></a>

Cấu hình Google +1 Annotation

Bubble(mặc định)

<a class="addthis_button_google_plusone" g:plusone:annotation="bubble"></a>

inline

<a class="addthis_button_google_plusone" g:plusone:annotation="inline"></a>

None

<a class="addthis_button_google_plusone" g:plusone:annotation="none"></a>

Google+ Badge

Bạn cũng có thể thêm google+ Badge vào addthis toolbox, hoặc sử dụng code google+ badge cung cấp bởi addthis.

<div class="addthis_toolbox addthis_default_style">
     <a class="addthis_button_google_plusone_badge" g:plusone:href="https://plus.google.com/102383601500147943541/"></a>
</div>

Google+ Badge Configurations

Badge

<a class="addthis_button_google_plusone_badge" g:plusone:size="badge" g:plusone:href="https://plus.google.com/102383601500147943541/"></a>

Small Badge

<a class="addthis_button_google_plusone_badge" g:plusone:size="smallbadge" g:plusone:href="https://plus.google.com/102383601500147943541/"></a>

Large

<a class="addthis_button_google_plusone_badge" g:plusone:size="large" g:plusone:name="AddThis" g:plusone:href="https://plus.google.com/102383601500147943541/"></a>

Medium

<a class="addthis_button_google_plusone_badge" g:plusone:size="medium" g:plusone:name="AddThis" g:plusone:href="https://plus.google.com/102383601500147943541/"></a>

Small

<a class="addthis_button_google_plusone_badge" g:plusone:size="small" g:plusone:name="AddThis" g:plusone:href="https://plus.google.com/102383601500147943541/"></a>

Trên đây là một số nút cơ bản, mà mình sưu tầm được hi vọng sẽ giúp được bạn.

Nếu bạn thích bài viết này, hãy ủng hộ chúng tôi bằng cách đăng ký nhận bài viết mới ở bên dưới và đừng quên chia sẻ kiến thức này với bạn bè của bạn nhé. Bạn cũng có thể theo dõi blog này trên Twitter và Facebook

HOÀNG WEB

SẢN PHẨM

LIÊN KẾT