Cách thêm reaction facebook vào blogger thật dễ dàng

Xin chào các bạn, đã đến với blog của mình hôm nay ở bài viết này mình xin chia sẻ cách thêm tính năng facebook reaction vào blogger đơn giản.

Cách Thực Hiện

Bước 1: Dán đoạn CSS bên dưới vào trước thẻ ]]></b:skin>

.options{background:white;width:70px;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,0.08),0 2px 2px rgba(0,0,0,0.15);box-shadow:0 0 0 1px rgba(0,0,0,0.08),0 2px 2px rgba(0,0,0,0.15);border-radius:20px;padding:10px 13px;font-size:0;font-family:Helvetica;font-weight:bold;color:#7f7f7f;position:relative;cursor:pointer;text-align:center;left:100px}
.options .button{font-size:12px;vertical-align:middle;float:none}
.options::before{content:"";display:inline-block;vertical-align:middle;height:24px;width:26px;margin-right:4px;background-image:url(https://i.imgur.com/wFbNEKl.png);background-size:156px 24px}
.options::before .reactions{opacity:1;-webkit-transition:0.1s 0.5s;transition:0.1s 0.5s}
.options .reactions .icon-container:hover{-webkit-transform:scale(1.3,1.3) translateY(-5px);transform:scale(1.3,1.3) translateY(-5px)}
.options:hover .reactions{opacity:1}
.options.default{color:#7f7f7f!important}
.options.default::before{background-position:156px 0}
.options.Like{color:#5890ff}
.options.Like::before{background-position:0 24px}
.options.Love::before{background-position:-26px -24px}
.options.Haha::before{background-position:-52px -24px}
.options.Wow::before{background-position:-78px -24px}
.options.Sad::before{background-position:-104px -24px}
.options.Angry::before{background-position:-130px -24px}
.options .reactions{position:absolute;bottom:130%;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);border-radius:50px;background:white;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,0.08),0 2px 2px rgba(0,0,0,0.15);box-shadow:0 0 0 1px rgba(0,0,0,0.08),0 2px 2px rgba(0,0,0,0.15);line-height:0;white-space:nowrap;opacity:0;padding:3px;pointer-events:none;-webkit-transition:0.2s 0.5s;transition:0.2s 0.5s;float:left}
.options .reactions .icon-container{display:inline-block;-webkit-transition:-webkit-transform 0.2s ease;transition:-webkit-transform 0.2s ease;transition:transform 0.2s ease;transition:transform 0.2s ease,-webkit-transform 0.2s ease}
.options .reactions .reaction{display:inline-block;height:50px;width:50px;-webkit-transform:perspective(1px) scale(0.8,0.8) translate(0,0);transform:perspective(1px) scale(0.8,0.8) translate(0,0);-webkit-transition:opacity 0s 0.7s ease,-webkit-transform 0s 0.7s ease;transition:opacity 0s 0.7s ease,-webkit-transform 0s 0.7s ease;transition:transform 0s 0.7s ease,opacity 0s 0.7s ease;transition:transform 0s 0.7s ease,opacity 0s 0.7s ease,-webkit-transform 0s 0.7s ease;line-height:initial;opacity:0;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_0IGhwbluk3opPC880O62d4N_EeGhj4wCwWG6IjPZcrbGFA10DhT64kRU_ZuMVjVvPvsl7tUw7wXIyR7Ny_ll5eVLrHft3WBcmb3sRN6IbehLHRMOPJ6NnmEJ2sA5ZBOryVcJxMnBromD/s400/iris-tips-fb-reactions.gif);background-repeat:no-repeat;background-size:400px 80px}
.options .reactions .reaction.is-visible{-webkit-transition:opacity 0.3s ease;transition:opacity 0.3s ease;opacity:1;pointer-events:all;-webkit-animation:testes 0.6s ease forwards;animation:testes 0.6s ease forwards}
@-webkit-keyframes testes{0%{-webkit-transform:perspective(1px) scale(0.8,0.8) translate(0,70px);transform:perspective(1px) scale(0.8,0.8) translate(0,70px)}30%{-webkit-transform:perspective(1px) scale(0.87,0.87) translate(0,-4px);transform:perspective(1px) scale(0.87,0.87) translate(0,-4px)}70%{-webkit-transform:perspective(1px) scale(0.8,0.8) translate(0,1px);transform:perspective(1px) scale(0.8,0.8) translate(0,1px)}100%{-webkit-transform:perspective(1px) scale(0.8,0.8) translate(0,0);transform:perspective(1px) scale(0.8,0.8) translate(0,0)}}
@keyframes testes{0%{-webkit-transform:perspective(1px) scale(0.8,0.8) translate(0,70px);transform:perspective(1px) scale(0.8,0.8) translate(0,70px)}30%{-webkit-transform:perspective(1px) scale(0.87,0.87) translate(0,-4px);transform:perspective(1px) scale(0.87,0.87) translate(0,-4px)}70%{-webkit-transform:perspective(1px) scale(0.8,0.8) translate(0,1px);transform:perspective(1px) scale(0.8,0.8) translate(0,1px)}100%{-webkit-transform:perspective(1px) scale(0.8,0.8) translate(0,0);transform:perspective(1px) scale(0.8,0.8) translate(0,0)}}
.options .reactions .reaction.is-visible:hover{-webkit-transform:perspective(1px) scale(1,1) translate(0,-5px);transform:perspective(1px) scale(1,1) translate(0,-5px)}
.options .reactions .reaction.is-visible:hover::after{opacity:1}
.options .reactions .reaction::after{content:attr(data-popup);position:absolute;background:rgba(0,0,0,0.7);border-radius:15px;color:white;font-family:helvetica;font-weight:bold;font-size:13px;padding:2px 7px;top:-25px;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);white-space:nowrap;opacity:0;-webkit-transition:opacity 0.07s ease;transition:opacity 0.07s ease}
.options .reactions .reaction.like{background-position:-40px -18px}
.options .reactions .reaction.love{background-position:-94px -18px}
.options .reactions .reaction.haha{background-position:-148px -18px}
.options .reactions .reaction.wow{background-position:-204px -18px}
.options .reactions .reaction.sad{background-position:-258px -18px}
.options .reactions .reaction.angry{background-position:-312px -18px}

Bước 2: Dán đoạn Javscript bên dưới vào trên thẻ

<script type='text/javascript'>
var animateReactionsOn,animateReactionsOut;$(function(){$(".options").mouseenter(function(){var t=$(this);animateReactionsOn=setTimeout(function(){t.find(".reaction").each(function(t){var o=$(this);setTimeout(function(){o.addClass("is-visible")},60*t)})},500),clearTimeout(animateReactionsOut)}),$(".options").mouseleave(function(){var t=$(this);animateReactionsOut=setTimeout(function(){t.removeClass("active"),t.find(".reaction").removeClass("is-visible")},500),clearTimeout(animateReactionsOn)});var t=null,o=null;$(".options .button").click(function(){var t=($(this),$(this).parent());$(this).parent().is(".Like, .Love, .Thankful, .Haha, .Wow, .Sad, .Angry")?(t.removeClass("Like Love Thankful Haha Wow Sad Angry"),t.addClass("default"),t.find(".button").text("Like")):t.addClass("Like"),$(this).parent().hasClass("default")&&$(this).addClass("Like")}),$(".reaction").click(function(){o=$(this).attr("data-popup"),$(".options").removeClass("default"),$(".options .button").text(o),$(".options:contains(Like)").css("color","rgb(88, 144, 255)"),$(".options:contains(Love)").css("color","rgb(242, 82, 104)"),$(".options:contains(Thankful)").css("color","rgb(157, 135, 210)"),$(".options:contains(Haha), .options:contains(Wow), .options:contains(Sad)").css("color","rgb(240, 186, 21)"),$(".options:contains(Angry)").css("color","rgb(247, 113, 75)"),$(".options").removeClass(t),$(".options").addClass(o),t=o})});
jQuery(".share-btn-fb").click(function(){window.open("https://www.facebook.com/sharer/sharer.php?u="+location.href,"_blank","width=626, height=436")});
</script>

Bước 3: Thêm đoạn code bên dưới vào chỗ bạn muốn nó hiển thị

<div class="options">
  <span class="reactions">
    <div class="icon-container share-btn-fb">
      <span data-popup="Like" class="like reaction"></span>
    </div>
    <div class="icon-container share-btn-fb">
      <span data-popup="Love"class="love reaction"></span>
    </div>
    <div class="icon-container share-btn-fb">
      <span data-popup="Haha"class="haha reaction"></span>
    </div>
    <div class="icon-container share-btn-fb">
      <span data-popup="Wow"class="wow reaction"></span>
    </div>
    <div class="icon-container share-btn-fb">
      <span data-popup="Sad"class="sad reaction"></span>
    </div>
    <div class="icon-container share-btn-fb">
      <span data-popup="Angry"class="angry reaction"></span>
    </div>
  </span>
   
  <span class="button share-btn-fb">Like
  </span>
</div>

Style 2:

Javscript

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script>
jQuery('.reaction').click(function() {
  jQuery('.reaction').removeClass("active");
  jQuery(this).addClass("active");  
  jQuery('.reaction').attr("data-count", '');
  jQuery(this).attr("data-count", + 1);   
  jQuery('.expandshare').stop(true, true).slideDown(200);  
  jQuery(".reactionstitle").text('Cảm ơn! Hãy chia sẻ cảm xúc của bạn nhé.').css('margin-top', '-70px'); 
});
jQuery('.share-btn-fb').click(function() {
  window.open('https://www.facebook.com/sharer/sharer.php?u=' + location.href, '_blank', 'width=626, height=436');
});
jQuery('.share-btn-facebook').click(function() {
  window.open('https://www.facebook.com/sharer/sharer.php?u=' + location.href, '_blank', 'width=626, height=436');
});
jQuery('.share-btn-twitter').click(function() {
  window.open('https://twitter.com/intent/tweet?text=' + location.href, '_blank', 'width=626, height=436');
});
jQuery('.share-btn-googleplus').click(function() {
  window.open('https://plus.google.com/share?url=' + location.href, '_blank', 'width=626, height=436');
});
</script>

HTML:

<div class="page">
   <span class="reactionstitle">Bày tỏ cảm xúc của bạn</span>
    <div class="reactions">
        <div class="like reaction share-btn-fb" data-label="Like" data-count=""><img src="https://s13.postimg.org/qhtgn5z7r/like.gif" alt="Like"/></div>
        <div class="love reaction share-btn-fb" data-label="Love" data-count=""><img src="https://s13.postimg.org/bzw9fcndz/love.gif" alt="Love"/></div>
        <div class="haha reaction share-btn-fb" data-label="Haha" data-count=""><img src="https://s13.postimg.org/vhqwvas1j/haha.gif" alt="Haha"/></div>
        <div class="wow reaction share-btn-fb" data-label="Wow" data-count=""><img src="https://s13.postimg.org/kyvijfc1z/wow.gif" alt="Wow"/></div>
        <div class="sad reaction share-btn-fb" data-label="Sad" data-count=""><img src="https://s13.postimg.org/tfv0uxomv/sad.gif" alt="Sad"/></div>
        <div class="angry reaction share-btn-fb" data-label="Angry" data-count=""><img src="https://s13.postimg.org/3ue7h6jpj/angry.gif" alt="Angry"/></div>
</div>
<div class="expandshare">
<a class="share-btn share-btn-facebook">
<i class="fa fa-facebook"></i>
Share
</a>
<a class="share-btn share-btn-twitter">
<i class="fa fa-twitter"></i>
Tweet
</a>  
<a class="share-btn share-btn-googleplus">
<i class="fa fa-google-plus"></i>
Post
</a>
</div>
</div>

CSS:

.page{min-height:120px;height:100%;width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}
.reactionstitle{font-family:'Open Sans',sans-serif;font-size:18px;color:#000;display:inline-block;font-weight:bold;position:absolute;line-height:20px;max-width:100%;margin-top:-60px;text-decoration:none;-webkit-user-select:none}
.reactions{background:#ffffff;display:-webkit-box;display:-ms-flexbox;display:flex;border:1px solid rgba(0,0,0,0.1);border-radius:50px;box-shadow: 0 3px 5px rgba(0,0,0,0.1);}
.reaction{width:70px;height:70px;margin:-9px;cursor:pointer;position:relative;-webkit-transition:200ms;transition:200ms}
.reaction.active{-webkit-transform:scale( 1.13077) translate(0,-4px);transform:scale( 1.13077) translate(0,-4px)}
.reaction.active:before{opacity:1}
.reaction img{width:100%;background:none}
.reaction::before{content:attr(data-label);font-family:Arial,Helvetica,sans-serif;font-size:11px;color:#fff;background:rgba(0,0,0,.75);display:inline-block;font-weight:bold;padding:0 6px;border-radius:10px;box-sizing:border-box;position:absolute;line-height:18px;max-width:100%;overflow:hidden;top:-10px;left:50%;opacity:0;-webkit-transform:translateX(-50%);transform:translateX(-50%);-webkit-transition:opacity 50ms ease;transition:opacity 50ms ease;text-decoration:none;text-overflow:ellipsis;-webkit-user-select:none}
.reaction::after{content:attr(data-count);font-size:8px;font-family:Arial,Helvetica,sans-serif;color:#fff;background:#d81111;display:inline-block;font-weight:bold;padding:0 4.3px;border-radius:50px;box-sizing:border-box;position:absolute;line-height:13px;max-width:100%;overflow:hidden;top:15px;right:11.3px;text-decoration:none;text-overflow:ellipsis;-webkit-user-select:none}
.reaction:hover{-webkit-transform:scale( 1.23077) translate(0,-4px);transform:scale( 1.23077) translate(0,-4px)}
.reaction:active{-webkit-transform:scale( 1.33) translate(0,-4px);transform:scale( 1.33) translate(0,-4px)}
.reaction:hover::before{opacity:1}
.like.active::before{background:#4080ff}
.love.active::before{background:#f25268}
.haha.active::before{background:#f0ba15}
.wow.active::before{background:#f0ba15}
.sad.active::before{background:#f0ba15}
.angry.active::before{background:#f7714b}
.expandshare{position:absolute;left:0;right:0;background:rgba(0,0,0,0);color:#365899;-webkit-transition:all .15s;transition:all .15s;margin-top:60px;display:none;vertical-align:middle;text-align:center}
.share-btn{font-family:Arial,Helvetica,sans-serif;margin:0 5px;padding:8px 10px;border-radius:30px;color:#fff;cursor:pointer;font-weight:bold;font-size:14px;line-height:10px;text-decoration:none;vertical-align:middle;-moz-transition:background 0.2s ease-in-out;-o-transition:background 0.2s ease-in-out;-webkit-transition:background 0.2s ease-in-out;transition:background 0.2s ease-in-out}
.share-btn i{margin-right:4px;display:inline-block;font-size:14px}
.share-btn-facebook{background-color:#3b5998}
.share-btn-facebook:hover{background-color:#2d4373}
.share-btn-twitter{background-color:#00aced}
.share-btn-twitter:hover{background-color:#0087ba}
.share-btn-googleplus{background-color:#e93f2e}
.share-btn-googleplus:hover{background-color:#ce2616}

Nguồn: iris-tips.blogspot.com