17 October 2019

Hướng dẫn tạo Facebook Reactions cho Blogspot nhanh đơn giản

Facebook Reactions là tính năng thú vị trên facebook được rất nhiều người yêu chuộng bởi tính thú vị và ưu việt của nó. Bây giờ nó được những dịch vụ phát triển để cung cấp trên các nền tảng website khác nhau, đặc biệt với nền tảng của Blogger. Nói một cách ngắn gọn Facebook Reactions là tiện ích thể hiện cảm xúc người đọc với nội dung bài viết, và là tiện ích chia sẻ lên các phương tiện truyền thông xã hội khá hoàn chỉnh.


ShareThis là nền tảng platform đơn giản, nhẹ nhàng, hoạt động tốt trên các nền tảng website khác nhau, không tốn thêm dung lượng nào để xử lý.

Cách để áp dụng Facebook Reactions vào trong blogspot

Trước khi để làm việc này bạn cần vào tạo tài khoản tại đây: Đăng ký Facebook Reactions. Sau khi đăng ký, hãy xác minh đại chỉ các bước cơ bản. Quá trình đăng ký và xác thực email thành công lúc này sẽ xuất hiện bảng điều khiển tùy chọn theo hình. Có rất nhiều tùy chọn để bạn áp dụng lên website/blog của mình.


Để tạo Facebook Reactions cho Blogspot nên chọn mục Reaction Share Buttons
Chúng ta nên bật xanh Button (1) lên sau đó Get the code

Để cài đặt được Reactions chúng ta cần cài đặt mã js lên website/blog của mình. Lúc này chúng ta có code sau, copy nó và dán nó lên phía sau <head>
<script type='text/javascript' src='https://platform-api.sharethis.com/js/sharethis.js#property=5da6f9e542ecd20012678398&product=inline-share-buttons' async='async'></script>

Và tiếp theo để thê các biểu tượng cảm xúc copy đoạn code sau và phía mã <data:post.body/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='sharethis-inline-reaction-buttons'/>
<div class='clear'/>
</b:if>

Và nó sẽ như thế này:
<data:post.body/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='sharethis-inline-reaction-buttons'/>
<div class='clear'/>
</b:if>

Bây giờ, để thay thế nút cảm xúc ShareThis mặc định bằng Facebook Emoji Animation. Thêm mã dưới đây trước </head>
<style type='text/css'>
/*<![CDATA[*/
/* ShareThis Custom Reaction */
#st-1 .st-btn .st-text{display:none!important}
#st-1 .st-btn:hover &gt; span.st-count{display:inline-block!important}
#st-1 .st-btn &gt; svg{opacity:0}[data-reaction]{background-size:80px;background-position:center}
#st-1 .st-btn &gt; span.st-count{font-size:10px!important;padding:4px 7px;color:#222;background:#f0f0f0;line-height:1!important;border-radius:5px;font-weight:bold!important;display:inline-block!important;bottom:5px;right:10px;position:absolute}
[data-reaction=slight_smile]{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZxeY0IjJtTyR4X5oFECetTGIPyAujIm_Qf49vwsmtBemiErSN_MrBsJXNp2KJT9iQHQPiVBwfWB5Zerd1gh9xAMeh5srVFr49kHTMBT9byPX4GT15OmqD1ckMjZnkcVLWjlUqhNyndB5o/s1600/like.gif)}
[data-reaction=heart_eyes]{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg70oCHcZlSmTykTqs1a_ndeABm5O35t8_u57jO2jUnYch4IwbjIwOPgY5_wxUuKDht2EWk2XTpva9fmWRIVAYmxOUpg1d0eWiZocSXZyxlS1nvk4QZ98GLf68ct5jlkQquDqu839gEvYMa/s1600/love.gif)}
[data-reaction=laughing]{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrt7bZehx0JWZAOD0a3uWGSR9qMPGsZBTL30MDtImFy09a2wqeNlhU1R6qlUKeuESuDGqrEm6xxXzS_jazYDrmzLCH72rInWqb0IEx8Ak-CvalE4enpy74RCo-3aqrS2W6Ox47NZYkyl3F/s1600/haha.gif)}
[data-reaction=astonished]{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrDLzKR0p0BTHq8XEUQTtVlpe8rl9Uk9g8HF11arS3eYLpeeGd7RcBCPNSFYmL8nJiM8paLMr6kb3olS7KYlkG_sWM3P_M5Vwi1O_56mI7VsOB16PezmAfSHhGqh5UnNI3ppu_ao1N/s1600/wow.gif)}
[data-reaction=sob]{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7Ddqtxg6Lj7z4OlYZXn0uAKZVnLiPQfO_YcO1XVN83Y78GUWAS9pHqUDc5wt8jGzZrLGCMUz_sRdvz-qp4hlNvgUMPfQ89NHtpwMbOZd0gYYi26XA7SsdVPniR-Pe4wkBY2VGF6K37nzT/s1600/sad.gif)}
[data-reaction=rage]{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUyPbOguO3psxjjgYhxcT6bkTIOh_0ubJ01ZRf72o1q8l233QbUBOYKBh2V9sq_qU5gsxlmOxz_FeG77VLdc-JcQ-_W8U0bTsWd6zEJ2msFZriWDHeE2_XxGtYVBf7OsLmuMxcH4s5cBrE/s1600/angry.gif)}
/*]]>*/
</style>

Lưu mẫu và xem kết quả của bạn, chúc bạn thành công, hy vọng chủ đề hướng dẫn tạo Facebook Reactions cho Blogspot sẽ giúp ích được điều gì đó, nó sẽ làm đẹp hơn ..


EmoticonEmoticon