Hướng dẫn chèn các nút Thích, Chia sẻ, Gửi email và In cuối bài viết

Chào các bạn! Theo yêu cầu của một số bạn muốn chèn các nút Thích của Facebook, nút Chia sẻ tích hợp nhiều mạng xã hội thêm copy liên kết bài viết, nút Gửi email và nút In cuối bài viết như Blog của mình, tiện đây mình cũng chia sẻ luôn cách chèn để các bạn tham khảo thêm vào Blog của mình.

Các bước thực hiện:

Bước 1: Đăng nhập vào Blogger, chọn Blog muốn chỉnh sửa chọn Chủ đề > Chỉnh sửa HTML > Chuyển đến tiện ích > Blog1

Bước 2: Mở rộng thẻ <b:includable id='post' var='post'> tìm thẻ <data:post.body/>, lưu ý có một hoặc nhiều hơn 1 thẻ <data:post.body/> trong này, các bạn thêm đoạn code sau ngay dưới thẻ <data:post.body/> và kiểm tra xem đã chính xác chưa

Copy

<b:if cond='data:view.isSingleItem'>

<div class='social-sharing-widgets'>

<div class='fb-like' data-action='like' data-layout='button_count' data-share='false' data-show-faces='false' data-size='small' expr:data-href='data:post.url.canonical'/>

  <div class='share-post'>

    <span class='share' title='Chia sẻ'>Chia sẻ</span>

    <ul class='share-menu hidden'>

      <li>

        <span class='copy'>

          <svg>

            <use xlink:href='/responsive/sprite_v1_6.css.svg#ic_24_link_dark' xmlns:xlink='http://www.w3.org/1999/xlink'/>

          </svg>

          Sao chép liên kết

        </span>

      </li>

      <li>

        <span class='social-wrapper' expr:data-href='&quot;https://www.facebook.com/sharer.php?u=&quot; + data:post.url.canonical'>

          <svg>

            <use xlink:href='/responsive/sprite_v1_6.css.svg#ic_24_facebook_dark' xmlns:xlink='http://www.w3.org/1999/xlink'/>

          </svg>

          Chia sẻ với Facebook

        </span>

      </li>

      <li>

        <span class='social-wrapper' expr:data-href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:post.url.canonical + &quot;&amp;text=&quot; + data:post.snippets.short'>

          <svg>

            <use xlink:href='/responsive/sprite_v1_6.css.svg#ic_24_twitter_dark' xmlns:xlink='http://www.w3.org/1999/xlink'/>

          </svg>

          Chia sẻ với Twitter

        </span>

      </li>

      <li>

        <span class='social-wrapper' expr:data-href='&quot;https://www.pinterest.com/pin/create/button/?url=&quot; + data:post.url.canonical + &quot;&amp;description=&quot; + data:post.title.escaped + &quot;&amp;media=&quot; + data:post.featuredImage'>

          <svg>

            <use xlink:href='/responsive/sprite_v1_6.css.svg#ic_24_pinterest_dark' xmlns:xlink='http://www.w3.org/1999/xlink'/>

          </svg>

          Chia sẻ với Pinterest

        </span>

      </li>

      <li>

        <span class='social-wrapper' expr:data-href='&quot;https://plus.google.com/share?url=&quot; + data:post.url.canonical'>

          <svg>

            <use xlink:href='/responsive/sprite_v1_6.css.svg#ic_24_googlePlus_dark' xmlns:xlink='http://www.w3.org/1999/xlink'/>

          </svg>

          Chia sẻ với Google+

        </span>

      </li>

      <li>

        <span class='social-wrapper' expr:data-href='&quot;https://www.linkedin.com/sharing/share-offsite/?url=&quot; + data:post.url.canonical'>

          <svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>

            <path d='M 20 2 L 4 2 C 2.898438 2 2 2.898438 2 4 L 2 20 C 2 21.101563 2.898438 22 4 22 L 20 22 C 21.101563 22 22 21.101563 22 20 L 22 4 C 22 2.898438 21.101563 2 20 2 Z M 8.101563 18 L 5 18 L 5 9.398438 L 8.101563 9.398438 Z M 6.5 8.398438 C 5.601563 8.398438 5 7.800781 5 7 C 5 6.199219 5.601563 5.601563 6.601563 5.601563 C 7.5 5.601563 8.101563 6.199219 8.101563 7 C 8.101563 7.800781 7.5 8.398438 6.5 8.398438 Z M 19 18 L 15.898438 18 L 15.898438 13.300781 C 15.898438 12 15.101563 11.699219 14.800781 11.699219 C 14.5 11.699219 13.5 11.898438 13.5 13.300781 C 13.5 13.5 13.5 18 13.5 18 L 10.398438 18 L 10.398438 9.398438 L 13.5 9.398438 L 13.5 10.601563 C 13.898438 9.898438 14.699219 9.398438 16.199219 9.398438 C 17.699219 9.398438 18.898438 10.601563 18.898438 13.300781 L 18.898438 18 Z '/>

          </svg>

          Chia sẻ với Linkedin

        </span>

      </li>

      <li>

        <span class='social-wrapper' expr:data-href='&quot;https://www.blogger.com/email-post.g?blogID=&quot; + data:blog.blogId + &quot;&amp;postID=&quot; + data:post.id'>

          <svg>

            <use xlink:href='/responsive/sprite_v1_6.css.svg#ic_24_email_dark' xmlns:xlink='http://www.w3.org/1999/xlink'/>

          </svg>

          Gửi bài qua Email

        </span>

      </li>

    </ul>

  </div>

  <div class='print-email'>

    <a href='mailto:conatct.vietblogdao@gmail.com' title='Gửi email'>

    <span class='ma-share'></span>

    </a>

    <span class='printBtn' onclick='javascript:window.print();' title='In bài viết này'></span>

  </div>

</div>

<div class='overlay-dialog hidden'></div>

<div class='modal'></div>

</b:if>

Trường hợp thẻ <data:post.body/> không nằm trong thẻ <b:includable id='post' var='post'> thì các bạn gõ tổ hợp phím Ctrl+F để tìm

Bước 3: Thêm đoạn script sau ngay trước thẻ đóng </body>

Copy

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>

<b:if cond='data:view.isSingleItem'>

<script>

var postUrl = "<data:blog.url.canonical/>",

  copy_link = "<data:messages.linkCopiedToClipboard/>";

//<![CDATA[

function copyLinkToClipboard(e) {

  var t = document.createElement('textarea');

  t.value = e, document.body.appendChild(t), t.select();

  try {

    document.execCommand("copy")

  } catch (o) {

    alert("!!!")

  }

  document.body.removeChild(t)

}

$('.copy').click(function() {

  copyLinkToClipboard(postUrl)

  $('.modal').append('<div class="modal-dialog"><div class="modal-dialog-content">' + copy_link + ' <svg class="modal-dialog-buttons"><use xlink:href="/responsive/sprite_v1_6.css.svg#ic_close_black_24dp" xmlns:xlink="http://www.w3.org/1999/xlink"/></svg></div></div>')

  setTimeout(function() {

    $('.modal').empty()

  }, 3000)

  $('.modal-dialog-buttons').click(function() {

    $('.modal').empty()

  })

})

$('.share-post .share').click(function(e) {

  e.stopPropagation()

  $('.share-post .share-menu').toggleClass('hidden')

  $('.overlay-dialog').removeClass('hidden')

})

$('.share-post .share-menu').click(function(e) {

  e.stopPropagation()

})

$('html,.copy,.social-wrapper').click(function() {

  $('.share-post .share-menu').addClass('hidden')

  $('.overlay-dialog').addClass('hidden')

})

var postEl = document.getElementsByClassName('social-wrapper')

var postCount = postEl.length;

for (i = 0; i < postCount; i++) {

  postEl[i].addEventListener("click", function(url, w, h) {

    var url = this.getAttribute("data-href"),

      h = 450,

      w = 400,

      l = (screen.width / 2) - (w / 2),

      t = (screen.height / 2) - (h / 2);

    window.open(url, 'popUpWindow', 'height=' + h + ',width=' + w + ',left=' + l + ',top=' + t + ',resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes')

  })

}

//]]></script>

</b:if>

<div id="fb-root"></div>

<script>//<![CDATA[

(function(d, s, id) {

  var js, fjs = d.getElementsByTagName(s)[0];

  if (d.getElementById(id)) return;

  js = d.createElement(s); js.id = id;

  js.src = 'https://connect.facebook.net/vi_VN/sdk.js#xfbml=1&version=v3.2&appId=2189240734425095&autoLogAppEvents=1';

  fjs.parentNode.insertBefore(js, fjs);

}(document, 'script', 'facebook-jssdk'));

//]]></script>

Kiểm tra nếu template đã có sẵn link jquery.min.js thì xóa link jquery.min.js trong đoạn script trên, tương tự với script của Facebook nếu đã chèn từ trước thì xóa còn nếu chưa có thì thay 2189240734425095 bằng ID ưng dụng Facebook của bạn.

Bước 4: Thêm css trong <b:skin></b:skin>

Copy

.overlay-dialog {

    background-color: rgba(0,0,0,.85);

    height: 100vh;

    left: 0;

    position: fixed;

    top: 0;

    width: 100%;

    z-index: 8;

}

.modal-dialog {

  box-shadow: 0 1px 3px 0 rgba(60, 64, 67, 0.302), 0 4px 8px 3px rgba(60, 64, 67, 0.149);

  font-family: Roboto,Arial,sans-serif;

  -webkit-font-smoothing: antialiased;

  letter-spacing: .2px;

  -webkit-align-items: center;

  align-items: center;

  background-color: #202124;

  border: none;

  -webkit-border-radius: 3px;

  border-radius: 3px;

  bottom: 0;

  -webkit-box-sizing: border-box;

  box-sizing: border-box;

  display: -webkit-box;

  display: -moz-box;

  display: -webkit-flex;

  display: -ms-flexbox;

  display: flex;

  -webkit-flex-wrap: wrap;

  flex-wrap: wrap;

  left: 0;

  margin: 20px;

  max-width: 640px;

  min-height: 50px;

  padding: 8px 15px;

  position: fixed;

  right: auto;

  text-align: left;

  top: auto;

  white-space: normal;

}

.modal-dialog-content {

  font-size: 15px;

  font-weight: 400;

  color: #ffffff;

}

.modal-dialog-buttons {

  height: 20px;

  width: 20px;

  min-height: 20px;

  min-width: 20px;

  fill: #ffffff;

  vertical-align: middle;

  margin-left: 15px;

  cursor: pointer;

}

.hidden {

  display: none;

}

.social-sharing-widgets {

    display: block;

    position: relative;

    line-height: 20px;

}

.fb-like {

    display: inline-block;

    position: relative;

    vertical-align: bottom;

}

.share-post {

    display: inline-block;

}

.share-post .share {

    display: inline-block;

    padding: 0 5px;

    background: #365899;

    color: #ffffff;

    font-family: Roboto,Arial,sans-serif;

    font-size: 11px;

    font-weight: bold;

    border-radius: 3px;

    cursor: pointer;

    height: 20px;

    line-height: 20px;

    vertical-align: bottom;

}

.share-post .share-menu {

    position: fixed;

    top: 50%;

    left: 50%;

    transform: translate(-50%,-50%);

    margin: 0;

    padding: 0;

    background: #ffffff;

    z-index: 10;

    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);

}

.share-post .share-menu li {

    list-style-type: none;

    display: block;

    padding: 10px 15px;

    cursor: pointer;

}

.share-post .share-menu li span {

    display: block;

    font-family: Roboto,Arial,sans-serif;

    font-size: 15px;

    color: #3c4043;

}

.share-post .share-menu li span svg {

    margin-right: 25px;

    height: 24px;

    width: 24px;

    min-width: 24px;

    vertical-align: middle;

    fill: hsl(0,0%,53.3%);

}

.print-email {

    float: right;

    display: inline-block;

}

.print-email .ma-share {

    cursor: pointer;

}

.print-email .ma-share:before {

    font-family: fontawesome;

    content: '\f0e0';

    background: #3c4043;

    margin-right: 5px;

    vertical-align: text-bottom;

    text-align: center;

    color: #ffffff;

    height: 20px;

    line-height: 20px;

    width: 27px;

    float: left;

    font-size: 14px;

    border-radius: 3px;

}

.print-email .printBtn {

    float: right;

    cursor: pointer;

}

.print-email .printBtn:before {

    font-family: fontawesome;

    content: '\f02f';

    float: left;

    background: #005A89;

    width: 27px;

    vertical-align: text-bottom;

    text-align: center;

    color: #ffffff;

    height: 20px;

    line-height: 20px;

    font-size: 14px;

    border-radius: 3px;

}

Kiểm tra nếu chưa có link font-awesome thì chèn link ngay trước <b:skin>

Copy

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>

Lưu ý: Khi thêm css, giao diện của các nút có thể không được như demo Blog mình vì có thể trùng với các class khác trong template của bạn, do đó bạn cần chỉnh lại cho phù hợp. Ngoài ra bạn cần viết css cho giao diện in như sau:

Copy

@media print {



}

Cần ẩn các thành phần khác, chỉnh sửa lại kích thước của trang,...để xem trước khi in.

Cuối cùng bạn cũng kiểm tra lại thẻ meta chia sẻ cho mỗi mạng xã hội.

Nội dung chính