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/AVvXsEjp_lAkSltj20UUT-kFoXVSZr9k-M5OcFWJsF9jLZNvOCjOkCDQV7y9fcQPPvo79XC9v-_YsAk-euWITG5pjOpjwh0MORnFMeTZqPv7ioNDMegqznHUIGDVnPQsEs1EsaqYQvRZmVWqJfVu/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

N

2

Chia sẻ

• Nhận liên kết

Nguyễn Phú Cường

Cuộc sống đôi lúc không như chúng ta mong muốn nhưng đừng buồn, đừng suy nghĩ nhiều quá mà hãy tiếp tục đứng lên và chiến đấu tiếp vì tương lai của chính mình nhé!