របៀបដាក់ Facebook Live Chat ទៅក្នុង Blogger ភាគ២

បាទថ្ងៃនេះខ្ញុំបាទ សូមណែនាំពីរបៀបដាក់ Facebook chat ទៅកាន់ Messenger របស់អ្នកទាំងអស់គ្នា។ ពីមុនខ្ញុំធ្លាប់ដាក់បង្ហាញ អត្ថបទមួយទាក់ទងទៅនឹង ប្រធាននេះដែរ តែនោះជាវិធីចាស់ តែនេះគឺជា វិធីថ្មី ២០១៨។ ដូចនេះ អ្នកទាំងអស់គ្នាដែរ ប្រើ Widget នេះ សូមកុំប្រើ Adblocker អី ពីព្រោះថាវាមិនដំណើរការទេ។ តែបើអ្នកចង់ Chat ទៅកាន់ Admin សូមបិទ Adblocker ភ្លាម ហើយសូម Refresh ម្ដងទៀត នោះអ្នកនឹងអាច Chat បានហើយ។ ជាអកុសល វាមិនអាចដូចទៅ នឹង Plugin របស់ Wordpress Facebook live chat បានទេ។ សង្ឃឹមថាថ្មីមួយ នឹងមាន Plugin សម្រាប់ Blogger ដែរ។

ទី១-សូមចូលទៅកាន់គណនី Blogger របស់អ្នក

ទី២-សូមចុចលើពាក្យ Layout បន្ទាប់មកចុចលើ Add a Gadget ហើយជ្រើសយក HTML/javascript

 ទី៣-សូមចម្លងកូដខាងក្រោមទៅដាក់នៅក្នុង Widget នោះ រួចហើយ​ Save

<style>.fb-livechat,.fb-widget{display:none}.ctrlq.fb-button,.ctrlq.fb-close{position:fixed;right:24px;cursor:pointer}.ctrlq.fb-button{z-index:9999999;background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDEyOCAxMjgiIGhlaWdodD0iMTI4cHgiIGlkPSJMYXllcl8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxMjggMTI4IiB3aWR0aD0iMTI4cHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxnPjxyZWN0IGZpbGw9IiMwMDg0RkYiIGhlaWdodD0iMTI4IiB3aWR0aD0iMTI4Ii8+PC9nPjxwYXRoIGQ9Ik02NCwxNy41MzFjLTI1LjQwNSwwLTQ2LDE5LjI1OS00Niw0My4wMTVjMCwxMy41MTUsNi42NjUsMjUuNTc0LDE3LjA4OSwzMy40NnYxNi40NjIgIGwxNS42OTgtOC43MDdjNC4xODYsMS4xNzEsOC42MjEsMS44LDEzLjIxMywxLjhjMjUuNDA1LDAsNDYtMTkuMjU4LDQ2LTQzLjAxNUMxMTAsMzYuNzksODkuNDA1LDE3LjUzMSw2NCwxNy41MzF6IE02OC44NDUsNzUuMjE0ICBMNTYuOTQ3LDYyLjg1NUwzNC4wMzUsNzUuNTI0bDI1LjEyLTI2LjY1N2wxMS44OTgsMTIuMzU5bDIyLjkxLTEyLjY3TDY4Ljg0NSw3NS4yMTR6IiBmaWxsPSIjRkZGRkZGIiBpZD0iQnViYmxlX1NoYXBlIi8+PC9zdmc+) center no-repeat #0084ff;width:60px;height:60px;text-align:center;bottom:24px;border:0;outline:0;border-radius:60px;-webkit-border-radius:60px;-moz-border-radius:60px;-ms-border-radius:60px;-o-border-radius:60px;box-shadow:0 1px 6px rgba(0,0,0,.06),0 2px 32px rgba(0,0,0,.16);-webkit-transition:box-shadow .2s ease;background-size:80%;transition:all .2s ease-in-out}.ctrlq.fb-button:focus,.ctrlq.fb-button:hover{transform:scale(1.1);box-shadow:0 2px 8px rgba(0,0,0,.09),0 4px 40px rgba(0,0,0,.24)}.fb-widget{background:#fff;z-index:999999;position:fixed;width:360px;height:435px;overflow:hidden;opacity:0;bottom:0;right:24px;border-radius:6px;-o-border-radius:6px;-webkit-border-radius:6px;box-shadow:0 5px 40px rgba(0,0,0,.16);-webkit-box-shadow:0 5px 40px rgba(0,0,0,.16);-moz-box-shadow:0 5px 40px rgba(0,0,0,.16);-o-box-shadow:0 5px 40px rgba(0,0,0,.16)}.fb-credit{text-align:center;margin-top:8px}.fb-credit a{transition:none;color:#bec2c9;font-family:Helvetica,Arial,sans-serif;font-size:12px;text-decoration:none;border:0;font-weight:400}.ctrlq.fb-overlay{z-index:0;position:fixed;height:100vh;width:100vw;-webkit-transition:opacity .4s,visibility .4s;transition:opacity .4s,visibility .4s;top:0;left:0;background:rgba(0,0,0,.05);display:none}.ctrlq.fb-close{z-index:9999999;padding:0 6px;background:#365899;font-weight:700;font-size:11px;color:#fff;margin:8px;border-radius:3px}.ctrlq.fb-close::after{content:'x';font-family:sans-serif}</style>

<div class="fb-livechat">
  <div class="ctrlq fb-overlay"></div>
  <div class="fb-widget">
    <div class="ctrlq fb-close"></div>
    <div class="fb-page" data-href="https://www.facebook.com/asvadekdaily/" data-tabs="messages" data-width="360" data-height="400" data-small-header="true" data-hide-cover="true" data-show-facepile="false">
      <blockquote cite="https://www.facebook.com/asvadekdaily/" style="font-size: 15px;" class="fb-xfbml-parse-ignore"> </blockquote>
    </div>
    <div class="fb-credit">
      <a href="https://asvadekdaily.blogspot.com/2018/06/facebook-live-chat-blogger.html" target="_blank">Facebook Chat Widget by Asvadek Daily</a>
    </div>
    <div id="fb-root"></div>
  </div>
  <a href="https://m.me/asvadekdaily" title="Send us a message on Facebook" class="ctrlq fb-button"></a>
</div>
  
<script src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.9"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>$(document).ready(function(){var t={delay:125,overlay:$(".fb-overlay"),widget:$(".fb-widget"),button:$(".fb-button")};setTimeout(function(){$("div.fb-livechat").fadeIn()},8*t.delay),$(".ctrlq").on("click",function(e){e.preventDefault(),t.overlay.is(":visible")?(t.overlay.fadeOut(t.delay),t.widget.stop().animate({bottom:0,opacity:0},2*t.delay,function(){$(this).hide("slow"),t.button.show()})):t.button.fadeOut("medium",function(){t.widget.stop().show().animate({bottom:"30px",opacity:1},2*t.delay),t.overlay.fadeIn(t.delay)})})});</script>

ចំណាំ៖ សូមកុំភ្លេចដូរ Link Page Facebook របស់អ្នកត្រង់កន្លែង​ Highlighter ពណ៌ក្រហម ហើយបើអ្នកចង់ឲ្យវា នៅខាងមុខគេបង្អស់គឺត្រូវ ដូរ Z-index: 4 ទៅ ខ្ពស់ ដូចក្នុងនេះស្រាប់ z-index:999999999;

សូមអរគុណដែលបានអត្ថបទនេះបើមានចម្ងល់អ្វីអាច comment បាន។


អត្ថបទដោយ អាស្វាដែក