Home »

Cách chèn tiện ích chia sẻ Addthis vào blog, website

14 tháng 1, 2014
Khi bạn đã có 1 website or blog nào đó và có những bài viết hay, muốn chia sẽ cho những người khác cùng biết đến thì Addthis là 1 tiện ích tuyệt vời dành cho bạn.

Nó có thể chia sẻ các link, bài viết,.like page.fb,google+,zingme,..v.v.thực hiện chỉ với 1 code đơn giản. rất tiện lơi. Hiện nay nó được rất nhiều website, blog sử dụng. Hôm nay mình sẽ giới thiệu cách sử dụng về tiện ích này.

Website: https://addthis.com/

1. Giới thiệu sơ về addthis.com 

Cách đây ít lâu trang Addthis.com vừa mới thay đổi giao diện mới đồng thời cũng bắt đầu mở rộng các tiện ích ngoài social sharing toolbox được hướng dẫn trong bài viết này còn có follow widget và welcome bar.
​
Addthis là một dịch vụ rất nổi tiếng tự nhận là nền tảng chia sẻ lớn nhất thế giới. Addthis cung cấp một bộ công cụ chia sẻ (social sharing tools), follow widget và welcome. Addthis giúp các tăng lượng truy cập các trang web bằng sự kết nối thông qua các dịch vụ xã hội như Facebook, Twitter, Pinterest, Google+…. Đối với các thành viên đăng ký Addthis cung cấp công cụ để theo dõi và phân tích nhằm giúp định hướng nội dung và phương thức chia sẻ.

2. Hướng dẫn cách chèn code mặc định: ( trọng tâm)

Cách chèn code rất cơ bản bạn vào phần trang Social Sharing Toolbox chỉ cần 3 bước là có thể lấy được code chèn vào bất kỳ trang blog/website nào.
Bước 1: Chọn nền tảng: bạn sử dụng platform nào thì chọn platform ấy, addthis hỗ trợ Blogger, Wordpress, Tumblr, TypePad, Posterous, Joomla, Drupal, Magento…
[​IMG]​

Bước 2: Chọn style, bạn có thể chọn button (một nút nhấn) hoặc toolbox tập hợp nhiều nút nhấn của các dịch vụ. Đây sẽ là phần chúng ta tùy chỉnh và tạo nên bản sắc của riêng mình. Ở đây ta lấy ví dụ là sử dụng tools box

[​IMG]​
Bước 3: Copy đoạn code và chèn code vào bất cứ vị trí nào bạn thích trong blog/website. Thông thường đoạn code có dạng như sau.
<!-- AddThis Button BEGIN --> <div class="addthis_toolbox addthis_default_style "> <a class="addthis_button_facebook_like" fb:like:layout="button_count"></a> <a class="addthis_button_tweet"></a> <a class="addthis_button_google_plusone" g:plusone:size="medium"></a> <a class="addthis_counter addthis_pill_style"></a> </div> <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4fbe76dc0e946530"></script> <!-- AddThis Button END –>
[​IMG]​
3. Tùy biến Addthis social sharing toolbox: ( nâng cao)

Trong trường hợp bạn muốn tùy chỉnh sâu hơn Addthis social sharing toolbox thì làm theo hướng dẫn dưới đây.
1. Tối ưu hóa tốc độ trang

Bạn chỉ cần đặt một đoạn code JS cho toàn bộ trang cho nên HHV đề nghị bạn nên cắt riêng đoạn code js bên dưới và chèn nó vào ngay bên trên thẻ </body>.
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4fbe76dc0e946530"></script>
2. Tùy chỉnh hình ảnh riêng cho button

Phần code bên dưới ưng với mỗi dịch vụ mạng xã hội hoặc chia sẻ được hiển trị trong toolbox.


<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
Trong đó
  • addthis_button_facebook_like chỉ định dịch vụ chia sẻ
  • fb:like:layout="button_count" chỉ định style của nút chia sẻ (có thể có hoặc không)
Để tìm hiểu thêm về code này bạn cần tìm hiểu API của Addthis. LINK vào đây
Nếu bạn muốn hiển thị những dịch vụ ưa thích của mình thì cần biết đoạn code chỉ định dịch vụ chia sẻ. Theo link sau để tham khảo các dịch vụ mà Addthis hỗ trợ. LInk vào đây. Điều thú vị là Addthis hỗ trợ cả ZingMe với mã chỉ định là zingme. Trong toolbox đoạn code sẽ như sau.
<a class="addthis_button_zingme"></a>
Tuy nhiên bạn còn muốn thay đổi ảnh mặc định của addthis thành một hình ảnh nào khác của riêng bạn. Cũng dễ thôi, đoạn code đó là:
<a class="addthis_button_zingme"><img alt='Share to ZingMe' border='0' src=”imglink”/></a>
Bạn thay imglink bằng đường link của bức ảnh.

Đối với một số dịch vụ mạng xã hội nổi tiếng như Facebook, Pinterest, Google+… Addthis có rất nhiều tùy chọn khác nhau. Đến link sau để tham khảo và chọn thứ bạn thích. link vào đây.
Chúc các bạn thành công với thủ thuật này
Tags: , ,

Comments[ 0 ]


Đăng nhận xét