Hot Post

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

3/07/2018 A+ a-
Chia sẻ Facebook Blog This! Chia sẻ Email
Bình luận
1

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



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://4.bp.blogspot.com/-UP5a7xzjilY/WpG0VS4adbI/AAAAAAAAFr0/inp6TNe2jkoRMcUjDNC8UQpoSFT_cIL0wCLcBGAs/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



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



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



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

Đăng ký nhận tin khuyến mãi, thủ thuật mới

Mẹo nhỏ khi bình luận
  • - Để viết chữ in đậm hãy sử dụng thẻ <b>chữ in đậm</b>
  • - Để viết chữ in nghiêng hãy sử dụng thẻ <i>chữ in nghiêng</i>
  • - Để viết code hãy sử dụng công cụ Conversion ở bên dưới để mã hóa và sau đó dán vào khung bình luận.
  • - Để chèn hình ảnh, video chỉ cần dán link trực tiếp của hình ảnh hoặc video vào khung bình luận (hỗ trợ: jpg, gif, png, bmp, Youtube).
  • - Bạn có thể upload hình ảnh, tập tin trực tiếp từ máy tính bằng cách sử dụng công cụ Up ảnh hoặc Up file ở bên dưới.
  • - Bạn có thể check vào ô Notify me ở khung nhận xét để nhận thông báo qua email khi ai đó trả lời bình luận của bạn.

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

Chúc mừng bạn đã bóc tem bài viết...!

Đăng nhập bằng Google


Cùng tham gia bình luận bài viết này nhé!

Đăng ký: Đăng Nhận xét (Atom)