Mô phỏng tính năng Facebook Reactions cho Blogger của bạn

Facebook Reactions for your Blogger

Reactions là một tính năng khá thú vị của Facebook giúp bạn bày tỏ được cảm xúc trên các bài viết, bình luận của bạn bè, người thân... Hôm nay Iris Tips sẽ giúp mang tính năng vào Blogger của bạn thông qua 4 style reactions bên dưới.

Cách thực hiện

Style 1

• DEMO

1Vào Chủ đề >> Chỉnh sửa HTML và dán đoạn CSS 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/AVvXsEjf7edKHJm40jwehpePMXQ-tLJJ0H1iy-9TLMsI0c_BPK9kJN2vogRXzspzSmy9fAXJ9KsK_-VQn4u_iItIPvKEx_sZ2StIbbnXPjEk_du6L7h0Gn1HD_RDe31aYZZDnnermTxgdP7ngu3H/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}

2Tìm đến thẻ </body> và dán đoạn JS bên dưới vào trước 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>

3Đặt đoạn code bên dưới vào vị trí bạn muốn hiển thị Facebook Reactions

<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

• DEMO

1Vào Chủ đề >> Chỉnh sửa HTML và dán đoạn CSS vào trước thẻ ]]></b:skin>

.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}

2Tìm đến thẻ </body> và dán đoạn JS bên dưới vào trước thẻ đó.

<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>

3Đặt đoạn code bên dưới vào vị trí bạn muốn hiển thị Facebook Reactions

<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>

Style 3

• DEMO

1Style này là sử dụng plugin của bên thứ 3 nên có ưu điểm hơn 2 style trước là có lưu lại số lượt nhấn vào các nút reactions và cách thực hiện cũng tương đối dễ dàng.

2Bạn chỉ cần vào trang Getreactionbuttons và làm theo hướng dẫn.

Style 4

• DEMO

1Bạn hãy làm theo hướng dẫn ở bài viết bên dưới nhé.

Xem thêm: Thêm Facebook Reactions vào bài viết và bình luận trên Blogger

Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!

Created by Carlos Medina/Chakachuk/Iris Tips

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest

Iris Tips

Có thể bạn quan tâm