صندوق دردشة ماسنجر وإعجاب فيسبوك على بلوجر

        من أجل ضمان إستمرار مدونتك أو موقعك, لابد من تركيب مجموعة من الوسائل التي تساعد على التواصل بينك بين زوار الموقع, مثل صفحة إتصل بنا  ومواقع التواصل الإجتماعي وصندوق الإشتراك الى غير ذلك, خلال هذه التدوينة أهم ما سنركز عليه هو هو إضافة أدات تسهل بشكل كبير جدا على التواصل معك وعلى منصة الأكثر إستعمالا وهي الفيسبوك.

        سأقدم لك عزيزي الزائر إضافة أيقونة أو صندوق الدردشة المسنجر الخاص بشركة فيسبوك, يمكن الزوار من التواصل معك مباشرة من مدونتك الخاصة, دون اللجوء الى صفحتك على الفيسبوك, بالإضافة الى انها تتوفر على زر الإعجاب بالصفحة.

معاينة إنقر هنا

      كيف ذلك؟

1. حمل الكود أسفل التدوينة
2. توجه نحو المظهر 
3. ثم حرر HTML
4. إبحث عن وسم الإغلاق body
5. فوقه مباشرة ألصق الكود التالي

<style> .fb-livechat { display: none; } .ctrlq.fb-button { z-index: 9; background: #0084ff; width: 60px; height: 60px; text-align: center; position: fixed; bottom: 24px; right: 24px; border: 0; outline: none; 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, 0.06), 0 2px 32px rgba(0, 0, 0, 0.16); -webkit-transition: box-shadow 200ms ease; transition: box-shadow 200ms ease; cursor: pointer; background-size: 80%; background-repeat: no-repeat; background-position: center; background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDEyOCAxMjgiIGhlaWdodD0iMTI4cHgiIGlkPSJMYXllcl8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxMjggMTI4IiB3aWR0aD0iMTI4cHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxnPjxyZWN0IGZpbGw9IiMwMDg0RkYiIGhlaWdodD0iMTI4IiB3aWR0aD0iMTI4Ii8+PC9nPjxwYXRoIGQ9Ik02NCwxNy41MzFjLTI1LjQwNSwwLTQ2LDE5LjI1OS00Niw0My4wMTVjMCwxMy41MTUsNi42NjUsMjUuNTc0LDE3LjA4OSwzMy40NnYxNi40NjIgIGwxNS42OTgtOC43MDdjNC4xODYsMS4xNzEsOC42MjEsMS44LDEzLjIxMywxLjhjMjUuNDA1LDAsNDYtMTkuMjU4LDQ2LTQzLjAxNUMxMTAsMzYuNzksODkuNDA1LDE3LjUzMSw2NCwxNy41MzF6IE02OC44NDUsNzUuMjE0ICBMNTYuOTQ3LDYyLjg1NUwzNC4wMzUsNzUuNTI0bDI1LjEyLTI2LjY1N2wxMS44OTgsMTIuMzU5bDIyLjkxLTEyLjY3TDY4Ljg0NSw3NS4yMTR6IiBmaWxsPSIjRkZGRkZGIiBpZD0iQnViYmxlX1NoYXBlIi8+PC9zdmc+"); 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, 0.09), 0 4px 40px rgba(0, 0, 0, 0.24); } .fb-widget { background: #fff; z-index: 9; position: fixed; width: 360px; height: 398px; overflow: hidden; display: none; 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, 0.16); -webkit-box-shadow: 0 5px 40px rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 5px 40px rgba(0, 0, 0, 0.16); -o-box-shadow: 0 5px 40px rgba(0, 0, 0, 0.16); } .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; reght: 0; background: rgba(0, 0, 0, 0.05); display: none; } .ctrlq.fb-close { position: absolute; reght: 10px; z-index: 4; padding: 0 6px; background: #365899; font-weight: bold; font-size: 11px; color: #fff; cursor: pointer; margin: 8px; border-radius: 3px; } .ctrlq.fb-close::after { content: 'X'; font-family: cursive; } h1 { font-weight: 300; } </style> <div class='fb-livechat'> <div class='ctrlq fb-overlay'/> <div class='fb-widget' > <div class='ctrlq fb-close'/> <div class='fb-page' data-height='400' data-hide-cover='true' data-href='https://www.facebook.com/alphatekania/' data-show-facepile='false' data-small-header='true' data-tabs='messages' data-width='360'> <blockquote cite='https://www.facebook.com/alphatekania/' class='fb-xfbml-parse-ignore'> </blockquote> </div> <div id='fb-root'/> </div> <a class='ctrlq fb-button' href='https://m.me/alphatekania' title='Send us a message on Facebook'/> </div> <script> $(document).ready(function() { var $fb = { delay: 125, overlay: $(".fb-overlay"), widget: $(".fb-widget"), button: $(".fb-button") }; setTimeout(function() { $("div.fb-livechat").fadeIn(); }, $fb.delay * 8); $(".ctrlq").on('click', function(e) { e.preventDefault(); if ($fb.overlay.is(":visible")) { $fb.overlay.fadeOut($fb.delay); $fb.widget.stop().animate({ bottom: 0, opacity: 0 }, $fb.delay * 2, function() { $(this).hide('slow'); $fb.button.show(); }); } else { $fb.button.fadeOut('medium', function() { $fb.widget.stop().show().animate({ bottom: "30px", opacity: 1 }, $fb.delay * 2); $fb.overlay.fadeIn($fb.delay); }); } }); }); </script>

      ملاحظة: غير معرف الخاص بصفحة ألفا التقنية بالمعرف الخاص بك (المشار إليه باللون الأحمر).

https://www.facebook.com/alphatekania

شاهد التطبيق على الفيديو

#صف

*

الدردشة على بلوجر

*

500KB

*

2018

*

غوغل دريف