اضافة زر الماسنجر عائم علي مدونة بلوجر

اضافة زر الماسنجر عائم علي مدونة بلوجر

هذا الكود يُستخدم لإضافة دردشة مباشرة عبر فيسبوك (Facebook Live Chat) إلى مدونة أو موقع ويب. يتيح هذا الكود للزوار التواصل معك مباشرةً عبر صفحة الفيسبوك الخاصة بك دون مغادرة الموقع. هذا مفيد جدًا لتحسين تجربة المستخدم وزيادة التفاعل مع الزوار.

شرح الكود بالتفصيل:

الجزء الخاص بـ CSS:

<style>
  .fb-livechat, .fb-widget { display: none; }
  .ctrlq.fb-button, .ctrlq.fb-close { position: fixed; left: 24px; cursor: pointer; }
  .ctrlq.fb-button {
    z-index: 1;
    background: url(data:image/svg+xml;base64,...) center no-repeat #0084ff;
    width: 60px;
    height: 60px;
    text-align: center;
    bottom: 24px;
    border: 0;
    outline: 0;
    border-radius: 60px;
    box-shadow: 0 1px 6px rgba(0,0,0,.06), 0 2px 32px rgba(0,0,0,.16);
    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: 2;
    position: fixed;
    width: 360px;
    height: 435px;
    overflow: hidden;
    opacity: 0;
    bottom: 0;
    left: 24px;
    border-radius: 6px;
    box-shadow: 0 5px 40px rgba(0,0,0,.16);
  }
  .fb-credit {
    text-align: center;
    margin-top: 8px;
  }
  .fb-credit a {
    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;
    transition: opacity .4s, visibility .4s;
    top: 0;
    left: 0;
    background: rgba(0,0,0,.05);
    display: none;
  }
  .ctrlq.fb-close {
    z-index: 4;
    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>
    

• .fb-livechat و .fb-widget: يتم إخفاء هذه العناصر في البداية حتى لا تظهر إلا عند النقر على زر الدردشة.
• .ctrlq.fb-button: زر الدردشة الثابت في أسفل الصفحة. يتميز بتصميم دائري مع أيقونة فيسبوك.
• .fb-widget: نافذة الدردشة التي تظهر عند النقر على الزر. تحتوي على واجهة فيسبوك مخصصة للدردشة.
• .fb-credit: رابط تذييل يشير إلى أن الدردشة تتم عبر فيسبوك.
• .ctrlq.fb-overlay: طبقة شفافة تظهر خلف نافذة الدردشة لإبرازها.
• .ctrlq.fb-close: زر إغلاق نافذة الدردشة.

الجزء الخاص بـ HTML:

<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="###" data-tabs="messages" data-width="360" data-height="400" data-small-header="true" data-hide-cover="true" data-show-facepile="false">
      <blockquote cite="###" class="fb-xfbml-parse-ignore"></blockquote>
    </div>
    <div class="fb-credit">
      <a href="###" target="_blank">تحتاج الي مساعدة ؟! راسلنا علي فيسبوك</a>
    </div>
    <div id="fb-root"></div>
  </div>
  <a href="https://m.me/digital.inspiration" title="Send us a message on Facebook" class="ctrlq fb-button"></a>
</div>
    

• fb-page: عنصر فيسبوك يعرض واجهة الدردشة. يجب استبدال ### برابط صفحة الفيسبوك الخاصة بك.
• fb-credit: رابط يشير إلى أن الدردشة تتم عبر فيسبوك.
• fb-button: زر الدردشة الذي يظهر في أسفل الصفحة.

الجزء الخاص بـ JavaScript:

<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();
      if (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();
        });
      } else {
        t.button.fadeOut("medium", function() {
          t.widget.stop().show().animate({ bottom: "30px", opacity: 1 }, 2 * t.delay);
          t.overlay.fadeIn(t.delay);
        });
      }
    });
  });
</script>
    

• Facebook SDK: يتم تحميل مكتبة فيسبوك لتشغيل واجهة الدردشة.
• jQuery: يتم استخدام jQuery لإدارة التفاعلات مثل إظهار وإخفاء نافذة الدردشة.
• setTimeout: يتم إظهار زر الدردشة بعد تأخير بسيط لتحسين تجربة المستخدم.
• click event: يتم التحكم في إظهار وإخفاء نافذة الدردشة عند النقر على الزر أو زر الإغلاق.

أهمية الكود في المدونة:

• تحسين تجربة المستخدم:
  • يتيح للزوار التواصل معك مباشرةً دون مغادرة الموقع، مما يزيد من تفاعلهم مع المحتوى.
• زيادة التفاعل:
  • يوفر طريقة سهلة وسريعة للزوار لطرح الأسئلة أو طلب المساعدة.
• تحسين خدمة العملاء:
  • يمكنك الرد على استفسارات الزوار بشكل فوري عبر فيسبوك.
• تحسين معدل التحويل:
  • إذا كنت تبيع منتجات أو خدمات، يمكن للزوار التواصل معك مباشرةً لطلب المزيد من المعلومات أو إتمام عملية الشراء.
• سهولة التخصيص:
  • يمكن تعديل الكود ليناسب تصميم مدونتك أو موقعك.

كيفية استخدام الكود:

1. استبدال رابط الفيسبوك:
   • استبدل ### في data-href و cite برابط صفحة الفيسبوك الخاصة بك.
2. إضافة الكود إلى المدونة:
   • قم بنسخ الكود ولصقه في قسم HTML/JavaScript في قالب بلوجر.
3. تأكد من تحميل المكتبات:
   • تأكد من أن مكتبة jQuery و Facebook SDK تعمل بشكل صحيح.

ملاحظات مهمة:

• تأكد من أن صفحة الفيسبوك الخاصة بك تدعم خاصية الدردشة المباشرة.
• يمكن تخصيص الألوان والأحجام في CSS لتناسب تصميم مدونتك.
• الكود متوافق مع جميع الأجهزة (حاسوب، هاتف، جهاز لوحي).

باختصار، هذا الكود يُعد أداة قوية لتحسين تفاعل الزوار مع مدونتك وزيادة فرص التواصل المباشر معهم عبر فيسبوك.