Code Nút Social share cho blogspot Blogger



Button chia sẻ bài viết lên các trang mạng xã hội là 1 thành phần không thể thiếu với mỗi template blogger. Việc bố trí bày biện nó trên website cũng phản ánh rất nhiều con mắt thẩm mĩ của mỗi webmaster. Nhưng trước khi làm điều đó bạn cần có code HTML tự động tạo liên kết valid với từng mạng xã hội



Bài viết này sẽ chia sẻ tới bạn đọc button share tới các mạng xã hội thông dụng hiện nay gồm
  • Facebook
  • Twitter
  • Google Plus
  • Pinterest
  • Linkedin
  • VK
  • Yummly
  • Tumblr
  • Buffer
  • Reddit
  • Stumble

Nếu bạn có code các mạng xã hội khác, hãy đóng góp ở mục comment để bài viết được hoàn thiện hơn.

1. Facebook

<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=200, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'>Facebook</a>

2. Twitter

<a expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=200, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'>Twitter</a>

3. Google +

<a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=400, height=500, left=200, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'>Google +</a>

4. Pinterest

<a expr:href="&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.firstImageUrl + &quot;&amp;description=&quot; + data:post.snippet" href="https://www.blogger.com/null" onclick="window.open(this.href, 'windowName', 'width=800, height=600, left=200, top=24, scrollbars, resizable'); return false;" rel="nofollow" target="_blank" title="Share to Pinterest">Pinterest</a>

5. Linkedin

<a expr:href='&quot;http://www.linkedin.com/shareArticle?url=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=1000, height=700, left=200, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'>Linkedin</a>

6. VK

<a expr:href='&quot;http://vkontakte.ru/share.php?url=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=1000, height=700, left=200, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank' title='Share to VK'>VK</a>

7. Yummly

<a expr:href='&quot;http://www.yummly.com/urb/verify?url=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=1000, height=700, left=200, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank' title='Share to Yummly'>Yummly</a>

8. Tumblr

<a expr:href='&quot;http://www.tumblr.com/share/link?url=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=700, left=200, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank' title='Share to Tumblr'>Tumblr</a>

9. Buffer

<a expr:href='&quot;https://bufferapp.com/add?url=&quot; + data:post.url + &quot;&amp;text=&quot;+ data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=1000, height=700, left=200, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank' title='Share to Buffer'>Buffer</a>

10. Reddit

<a expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=1000, height=700, left=200, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank' title='Share to Reddit'>Reddit</a>

11. Stumble

<a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=1000, height=700, left=200, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank' title='Share to StumbleUpon'>Stumble</a>

Trên đây là code tạo nút chia sẻ bài viết lên mạng xã hội, hoàn toàn bằng HTML, còn việc bố trí, css như nào là do bạn hoàn toàn kiểm soát. Mạng xã hội là 1 thành phần rất quan trọng trong việc SEO website vì vậy bạn nên tạo càng nhiều tương tác với nhiều mạng xã hội càng tốt nhé !

Good Luck !
CÓ THỂ BẠN ĐANG TÌM
  • Code CSS3 Checkbox & Radio Input Animations
    Code CSS3 Checkbox & Radio Input Animations
    04/05/2018 - 0 bình luận
    Demo/* * checked.css * v1.0.0 * * Tiny set of :checked pure CSS animations. * https://…
  • Thẻ điều kiện blogger 2018
    Thẻ điều kiện blogger 2018
    18/05/2018 - 0 bình luận
    Dưới đây là danh sách thẻ cũ và thẻ mới được cập nhật và cách sử dụngPhần I. Các thẻ điều kiện1. Trang chủ (Hom…
  • Thay đổi tiêu đề trang tìm kiếm label Blogspot
    Thay đổi tiêu đề trang tìm kiếm label Blogspot
    19/05/2018 - 0 bình luận
    Sử dụng nền tảng blogger thì chắc chắn phải biết đến label (nhãn). Nhãn giúp ta phân loại, quản lý bài viết và …
  • Code Hiệu Ứng Hộp Search Tìm Kiếm Đẹp Cho Blogspot
    Code Hiệu Ứng Hộp Search Tìm Kiếm Đẹp Cho Blogspot
    15/05/2018 - 0 bình luận
    DemoĐầu tiền Chèn đoạn code hiển thị khung search dưới đây: <label class="input-container closed"> &…
  • Code Trang 404 Hiệu Ứng Đẹp
    Code Trang 404 Hiệu Ứng Đẹp
    04/08/2018 - 0 bình luận
    DemoCSS:@import url("https://fonts.googleapis.com/css?family=Lato|Russo+One");.container { position: absolute;…
  • Hiệu ứng Canvas
    Hiệu ứng Canvas
    30/11/2018 - 0 bình luận
    DemoĐầu tiên chèn CSS:canvas { position: absolute; top: 0; left: 0; }Tiếp đến là đoạn code dán vào nơi hiển thị…
  • Nâng cấp Blogger Layout, Default Widget và Skin lên phiên bản mới
    Nâng cấp Blogger Layout, Default Widget và Skin lên phiên bản mới
    25/05/2018 - 0 bình luận
    Vừa qua Google có tung ra gói theme blogger mới khá đẹp mắt với chức năng tùy chỉnh cao hơn. Tuy nhiên với hầu …
  • Menu ẩn hiện dạng Material Design cho blogspot
    Menu ẩn hiện dạng Material Design cho blogspot
    21/05/2018 - 0 bình luận
    Menu là thành phần không thể thiếu đối với mỗi website, 1 thanh menu chưa đủ với bạn ? bạn cần 1 thanh menu ẩn …
  • Tổng hợp 8 CSS Hiệu ứng Loading
    Tổng hợp 8 CSS Hiệu ứng Loading
    30/06/2018 - 0 bình luận
    DemoĐầu tiên chèn đoạn mã dưới vào nơi hiển thị hiệu ứng loading:<div class="cell"> <div class="wrapp…
  • Template Blogspot Giống Zing Mp3 2018
    Template Blogspot Giống Zing Mp3 2018
    29/10/2018 - 0 bình luận
    Demo   Liên hệ#Giao diện nghe nhạc, #Template blogspot nhạc, Template nhạc.
  • CSS Hiệu Ứng Thầy Trò Tây Du Ký Thỉnh Kinh
    CSS Hiệu Ứng Thầy Trò Tây Du Ký Thỉnh Kinh
    08/07/2018 - 0 bình luận
    DemoChèn CSS dưới vào:* { padding: 0; margin: 0; list-style: none; } html,body { height: 100%; } .main { h…
  • Tạo khung chứa code có nút copy to clipboard cho blogspot
    Tạo khung chứa code có nút copy to clipboard cho blogspot
    24/05/2018 - 0 bình luận
    Để làm được điều đó thì bạn cần các công cụ sauFontawesome để cho nút copy thêm sinh độngJQuery: cái này thì hầ…