Chèn nút Like, Tweet, +1, Các mạng xã hội vào Blog, Website



Thực tế, có khá nhiều cách để gán chức năng Share trên blogspot, bao gồm công cụ Thêm nút Like Facebook và dịch vụ hỗ trợ, hoặc trực tiếp trên Facebook và Twitter, tuy nhiên cách đơn giản nhất là sử dụng AddThis - đơn giản, dễ cấu hình và dễ sử dụng.


Sau khi tiến hành đăng ký thành công tài khoản, nhấn vào đường dẫn Get AddThis trên trang điều khiển chính để bắt đầu:


Lựa chọn hiển thị nút chia sẻ mà bạn mong muốn tại đây:


Hệ thống sẽ hiển thị 1 đoạn mã HTML phù hợp để bạn nhúng vào blog của mình. 


Tiếp theo, các bạn lần lượt làm theo các bước sau:

Bước 1: Đăng nhập vào Blogger >> Vào Mẫu >> Chỉnh sửa HTML

Bước 2: Tùy thuộc vào vị trí người sử dụng muốn hiển thị nút chức năng này trên blog, chúng ta sẽ chèn code vị trí code HTML khác nhau.

Như ví dụ tại đây, mình sẽ hiển thị phần này trong nội dung bài viết, do vậy thay thế mã AddThis vào trên hoặc dưới thẻ <div class='post-footer'> Cách tìm nhanh các thẻ trong HTML  Xem Tại Đây )


Lưu mẫu và xem kết quả . AddThis còn có nhiều tác dụng khác bạn tìm hiểu thêm nha


Chú ý phần này :

<div class='addthis_toolbox addthis_default_style '>
<a class='addthis_button_preferred_1'/>
<a class='addthis_button_preferred_2'/>
<a class='addthis_button_compact'/>

Thường thì tên một nút chia sẻ thường có dạng:

"addthis_button_" + "Tên mạng xã hội"

Mỗi một link là tương ứng với một nút chia sẻ, chúng ta chỉ cần thay đổi thuộc tính class lại là sẽ có ngay một nút mới. Nếu muốn nhiều nút hơn bạn có thể copy nó ra thành nhiều link. Ví dụ như bạn muốn có nút chia sẻ lên Facebook. Bạn sẽ thêm link:

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

Ngoài ra còn có thêm nút bộ đếm:

<a class="addthis_counter addthis_bubble_style"></a>

Nút chữ thập, ấn vào sẽ hiện ra danh sách đầy đủ các trang mạng chia sẻ.


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



Cách 2 :

Nếu các bạn chỉ muốn chèn một số mạng xã hội mà bạn thích và tùy chỉnh icon riêng của mình, chỉ cần chèn đoạn code sau:

<a class='addthis_button_zingme'><img alt='Zingme' height='32' src='http://1.bp.blogspot.com/-JSIW6kOthKk/TlW1jLMQLAI/AAAAAAAAAgY/BKT_U2R5s_k/s1600/zingme.png' width='32'/></a>
<a class='addthis_button_twitter'><img alt='Twitter' height='32' src='http://4.bp.blogspot.com/-PB0_B7GA1-Y/TlW0lbSibAI/AAAAAAAAAgQ/5NAlb9KCM-0/s1600/twitter.png' width='32'/></a>
<a class='addthis_button_facebook'><img alt='Facebook' height='32' src='http://4.bp.blogspot.com/-Dah1A5gzw8s/TlW0EsjygQI/AAAAAAAAAgE/xmQQrv3GJ1k/s1600/facebook%25281%2529.png' width='32'/></a>
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>

Chú ý: Những chữ tô màu đỏ các bạn thay thế bằng tên Mạng xã hội, còn đường link màu xanh các bạn thay thế bằng link icon ảnh và phải chỉ đúng độ phân giải của ảnh (code trên là 32x32px).

Còn đối với nút Like, Tweet, +1,

Các bạn có thể chèn đoạn code sau nếu không muốn vào Addthis:

<a class='addthis_button_google_plusone' g:plusone:size='medium'/>
<a class='addthis_button_tweet'/>
<a class='addthis_button_facebook_like' fb:like:layout='button_count'/>

 Chúc các bạn thành công!






Đánh giá bài viết

Cảm ơn bạn đã đọc bài viết!

  • Mọi thắc mắc, gợi ý hoặc Báo link hỏng xin chia sẻ bên dưới hoặc Gửi Tin Nhắn
  • Không chèn liên kết quảng cáo, spam khi đăng nhận xét.
  • Không sử dụng những từ ngữ thô tục, vi phạm thuần phong mỹ tục.

Bình luận bài viết này!