Chèn nút Like và Share vào bài viết trong website

Từ khóa

Bạn có một bài viết hay và muốn được mọi người chia sẻ bài viết đó lên Facebook hoặc chỉ đơn giản là ấn nút Like để động viên tinh thần. Có thể bạn đã tìm thấy vài bài hướng dẫn tích hợp bộ code chia sẻ mạng xã hội trong những bài viết khác. Tuy nhiên, thông thường những bộ code đó có chứa mã javascript từ các trang khác như là addthis.com, sharethis.com,... Cũng chẳng sao, nhưng một vài bạn không thích vì nó làm website của bạn chậm đi 1 chút.
Bài viết này mình sẽ chia sẻ bộ code mà mình đang dùng cho blog hiepb.com. Với 2 style khác nhau để các bạn chọn lựa. Hoặc thích thì dùng cả 2 cũng được.

Chèn nút like share Facebook dọc theo sidebar (sticky)

Chèn nút Like và Share vào bài viết trong website
Chèn nút Like và Share vào bài viết trong website
Với style này thì nút like share sẽ cố định dọc bên trái của website, ưu điểm là nó luôn nổi bật và thu hút được sự chú ý của khách truy cập
Bạn sử dụng code sau
<div style='padding:10px 8px; position: fixed; top: 50%; left: 50%; margin-top: -150px; margin-left: -520px;border-radius: 0;border: 0px solid #d9d9d9;'>
<div class="fb-like" data-href="" data-layout="box_count" data-action="like" data-show-faces="true" data-share="true"></div>
</div>

Chèn nút like share Facebook cuối bài viết trong website

Chèn nút Like và Share vào bài viết trong website
Chèn nút Like và Share vào bài viết trong website
Còn đối với style này thì có ưu điểm là đơn giản và nhẹ nhàng. Bạn có thể chèn nó ở bất cứ vị trí nào mà bạn muốn, tuy nhiên phù hợp nhất vẫn là phía dưới tiêu đề hoặc cuối bài viết
Bạn sử dụng code sau
<div class='fb-like' data-action='like' data-href='' data-layout='button_count' data-share='true' data-show-faces='false' data-width='520'/>
Kết luận: Chỉ với vài đoạn code đơn giản là bạn có thể tích hợp được nút like và share cho website của bạn rồi. Nếu thấy bài viết có ích thì hãy like và share để động viên mình nhé. Đừng để cái nút like nó vô dụng :v

51 bình luận

ngon rồi :) cứ hỏi là có bài hướng dẫn thế này thì hay quá :)

nửa đêm vẫn phải phục vụ các thánh :v

A cho thêm cái like google+ giúp e với :)

mình là không chơi với G+ lâu rồi :v sang web kslzone.net có thêm cái G+ đấy, view code mà lấy về thôi, thánh view code mà tắt điện ạ :3

còn chèn trong blog thì sao anh?

code trên là chèn cho blog rồi đó bạn. Hay bạn muốn hỏi cách chèn Facebook like box cho web

Mình đã thử thay thế Code Cho Website của mình là: wWw.Nhà Đất Đồng Xoài.Vn nhưng không được. Còn cách nào nữa không bạn?
Bán Nhà Đất Đồng Xoài Bình Phước Giá Rẻ

nếu nó chưa hiển thị tức là bác thiếu code fb-root rồi, tất cả các social plugin của facebook đều cần cái code đó mới hoạt động nhé bác

code fb-root như nào vậy bạn

Bác cho e hỏi là chèn vào đâu vậy ?

cái code nút like và share mà dọc bên side bar thì gắn vào đâu cũng ok. Nếu là Blogspot thì cứ cho nguyên code vào một widget mới.
Còn kiểu thứ 2 thì chèn vào chỗ bạn muốn thôi, chèn đâu cũng được mà.

Bác Hiệp giúp mình với mình chèn y nguyên code của bác vào nhưng không hiện, còn phần share có sẵn dưới mỗi bài viết thì bị lỗi click vào là nhảy ra vài tab nhưng vẫn không thể share đc. Giúp mình nhé: Mail : [email protected]

Blog: http://www.snakething.net/

fb k cho chia se
thông bao co mot lien ket bi loi
giai thich giup minh voi

cái đấy là do link của bác thôi, chứ không liên quan đến code này

Hi mình đã làm theo hướng dẫn của bạn và xác nhận thành công trang Hình xăm nghệ thuật. Rất cảm ơn sự hướng dẫn nhiệt tình. Rảnh ghế blog mình chơi nha ;)

mình muốn chèn vào cuối bài viết cho blog thì làm sao bạn, thấy bạn nói chèn vào đâu cũng được nhưng cuối bài viết thì làm sao chèn ???

cái này hơi liên quan 1 chút đến code. Nếu bạn dùng Blogspot thì có thể vào phần chỉnh sửa HTML và thêm vào bên dưới dòng "Post-footer-line1"
Có thể bạn giao diện của bạn không có dòng này nên bạn ko tìm thấy. Bạn qua group về Blogspot để được hỗ trợ

cái này hơi liên quan 1 chút đến code. Nếu bạn dùng Blogspot thì có thể vào phần chỉnh sửa HTML và thêm vào bên dưới dòng "Post-footer-line1"
Có thể bạn giao diện của bạn không có dòng này nên bạn ko tìm thấy. Bạn qua group về Blogspot để được hỗ trợ

Chào bạn, cảm ơn bạn đã chia sẻ, mình đã làm theo và đã add thành công. Tuy nhiên có một lỗi nhỏ: khi click vào thích thì phải xác nhận và hiện lên bảng xác nhận thích. Còn mình click nút like bài viết của bạn thì không bị như thế. Bạn xem giúp mình với nhé! Cảm ơn bạn rất nhiều! Blog mình đây:
http://sachdaythanhcong2.blogspot.com/2014/12/link-tai-download-sach-ebook-hay-nhat-ve-thanh-cong-lam-giau.html

Mình cũng đang không rõ đoạn này, code thì giống nhau rồi. Như vậy vấn đề ở đây mình nghĩ nó nằm ở phía Facebook.
Mình đang nghĩ có phải do tên miền blogspot hay không, mình sẽ thử nghiệm lại cái này và update lại nhé

Dù sao cũng Cảm ơn bạn rất nhiều! :-) Chúc bạn luôn vui vẻ và thành công! :-)

Code này chèn vào đâu trên trang bạn, file index hay header hay gì đó í

Đầu tiên bạn phải đảm bảo răng trên website của bạn đã có code fb-root (đây là 1 đoạn code chung mà Facebook cung cấp để bạn có thể chèn các tiện ích khác như nút like, nút share, Fanpage box,...)
Còn về vấn đề chèn vào đâu thì như sau:
Đoạn code 1: Có thể chèn vào bất cứ đâu trong file index
Đoạn code 2: Chèn vào trong < Body > ở vị trí nào mà bạn muốn hiển thị.

p/s: có thể là bạn ko biết code nên thấy hơi khó hiểu. Nếu được thì nhờ 1 người biết sâu hơn để họ chèn giúp

Nhận xét này đã bị tác giả xóa.

Hay quá rồi

Mà lệnh trên thì sao nó biết phải like fb nào

like chính cái bài viết mà bạn đặt code chứ ko phải like fanpage nhé bạn

Trang tĩnh làm ko được phải ko bạn?

trang nào cũng làm được bạn ạ

Site chưa được chuẩn lắm nhưng mời các bác ghé qua và nhận xét nhé:D
Tai Google Play và ứng dụng Clean Master miễn phí trên CH Play

VỪA ÁP DỤNG THÀNH CÔNG , xem nè >> http://www.phim79.org/

Mình vừa làm rồi, nhưng mà Share sản phẩm X1 thì nó lại ra hình đại diện là sản phẩm Xi nào đó chứ không phải đúng hình sp hiện tại (link thì vẫn đúng)
Xử cái này như thế nào vậy bác?

cái này là do website của bạn chưa tối ưu code Graph Meta Tag, bạn báo lại kỹ thuật sửa code phần này cho chuẩn nhé

Hic, khổ nỗi là web mình tự code bang php nên không ai support, bạn có thể vi dụ giúp minh được không? Minh đang search về Graph tag mà bạn nói đây! thanks

Vậy thì khó rồi, mình lại không phải dân chuyên code. PHP thì mình lại không biết :(

bảo coder nó tối ưu lại cho, :D

Chào bạn, mình dùng đoạn code thứ 2 trong bài viết của bạn, mình gặp tình trạng là trang chủ thì không hiện ra nút like, còn lại tất cả các trang khác thì đều có hiện ra bình thường, không biết là tại sao nhỉ. web của mình là: www.giamsathinhanh.com , bạn xem dùm mình nhé, nút like mình đặt ở ngay trên phần "khuyến mãi hot" ở phía trên bên phải nhé

yeah..được rồi, thank you bác Hiệp nhiều nhá

ad ơi giúp mình với mình đã thử mà không thành công. blog cua mk http://thapdoanhnhan-hd.blogspot.com/

Nhận xét này đã bị tác giả xóa.

cho e hỏi là e mún chèn cái page vào blog, khi vừa mới vào trang blogspot sẽ hiện ra cái nút thích trang ý, ad pk thì giúp e với ạ :)

Tạo thêm G+ nữa cho website blog thì làm thế nào nhỉ?

Nhận xét này đã bị tác giả xóa.

Thế Giới Mũ site này của em muốn chèn vào cuối bài viết thì chèn file nào ạ

thanks bạn nhé..đẹp lắm

Hi
Theo cách này nếu xem trên giao diện mobile sẽ không hiển thị đúng lượt like của từng bài viết đó bạn. Bạn ngâm cứu lại nhé
Chúc vui

sao mình chèn mà không hiển thị vậy ad

sao mình chèn mà không hiển thị vậy ad

Anh Hiệp !
Mình có thể chèn zalo vào website như Skyper được ko Anh .
Tại em thấy zalo cũng là 1 phần mềm chát nhanh với khách hàng .


EmoticonEmoticon