Hoàng Web

Thiết kế web giá rẻ

  • Kho giao diện
  • Dịch Vụ
    • Viết bài SEO & quản trị web
    • Thiết kế website giá rẻ
    • Thiết kế website bán hàng
    • Thiết kế website WordPress
    • Viết Plugin WordPress
    • Tối ưu website WordPress
    • Sửa lỗi nâng cấp website
  • Bảng giá
  • Quy trình làm việc
  • Giới thiệu
  • Liên Lạc
Trang chủ » Web Development » Tùy biến nút addthis chia sẻ bài viết cho website

Tùy biến nút addthis chia sẻ bài viết cho website

Thứ Bảy, 09/08/2014 by Hoàng Quách Leave a Comment

Nội dung

    • 0.1 Compact Button
    • 0.2 Facebook Like Button
    • 0.3 Facebook Send Button
    • 0.4 Twitter Tweet Button
  • 1 Chống click tặc google adwords
    • 1.1 Twitter Follow Button
    • 1.2 Google +1 Button
    • 1.3 Cấu hình Google +1 Annotation
    • 1.4 Google+ Badge
    • 1.5 Google+ Badge Configurations
  • Facebook
  • Twitter
  • Google+

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:

Chống click tặc google adwords

Công Cụ Chặn Click Ảo Mới - Miễn Phí - Tốc Độ Chặn Nhanh Hơn - Chính Xác Hơn. Miễn Phí VIP 3 Tháng - Được Tin Tưởng Dùng Bởi Hơn 5.000 Khách Hàng. Tự Bạn Quản Lý. Đăng Ký Tự Động. Công Nghệ Mới. Hoạt Động 24/7.

<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.

Bài viết liên quan:

  1. Tự động lấy nút chia sẻ bài viết lên mạng xã hội với addthis
  2. Fix vị trí nút mạng xã hội bằng CSS hiển thị đẹp trên website
  3. Addthis Dynamic – Chèn nút chia sẻ bài viết addthis động cho website
  4. [Phần 2] Cấu hình cài đặt nâng cao nút chia sẻ addthis
  5. Thống kê chia sẻ addthis với Google Analytics
  6. Cấu hình cài đặt nâng cao nút chia sẻ addthis
  7. URL tạo chia sẻ bài viết lên mạng xã hội – Addthis share endpoint
  8. Tạo nút chia sẻ bài viết cho website với addthis
  9. Chèn thông tin tỷ giá và giá vàng vào Website
  10. Chèn hệ thống ứng dụng chat vào website với FireChat

Chuyên mục: Web Development Tìm kiếm: Social Share

Đăng ký nhận bài viết mới

Vui lòng điền chính xác email ở bên dưới để nhận thông báo bài viết mới.

Bạn đã đăng ký thành công!

Lỗi! hãy làm lại.

thông tin của bạn được 100% bảo mật...

Lưu ý:
> Không sử dụng từ khóa trong mục "Tên".
> Hãy sử dụng tên thật và địa chỉ email chính xác.
> Vui lòng bình luận bằng tiếng Việt có dấu.
Mọi bình luận trái quy định sẽ bị gỡ bỏ link hoặc xóa bỏ hoàn toàn.

Trả lời Hủy

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Tôi giúp gì cho bạn?

Nhận bài viết mới

Vui lòng điền chính xác email ở bên dưới để nhận thông báo bài viết mới.

Cám ơn bạn đã đăng ký.

Lỗi, hãy làm lại

thông tin của bạn được 100% bảo mật...

HOÀNG WEB

Địa chỉ: Tây Sơn, Phường Quang Trung, Quận Đống Đa, Hà Nội

Hotline: 0987 342 124 (8h:00 – 21h:00)

Email: [email protected]

Website: www.hoangweb.com

KẾT NỐI VỚI TÔI

  • Facebook
  • Snapchat

SẢN PHẨM

  • Auto-Sync WooCommerce & Google Shopping
  • Phần mềm chặn click ảo

LIÊN KẾT

  • Hướng dẫn thanh toán
  • Chính sách hoàn tiền
  • Trung tâm hỗ trợ

Copyright © 2019 | All rights reserved | HOANG WEB
Mọi hình thức sao chép nội dung trên website này mà chưa được sự đồng ý đều là trái phép.