تحويل كود أيقونة الي زر أو ظهوره في منتصف الصفحة

لتعديل الأيقونة لتفتح في منتصف الصفحة أو لتحويلها إلى زر يظهر أسفل المقال، يمكن تعديل الأكواد التالية:

لتظهر الأيقونة في منتصف الصفحة:

يمكن تعديل CSS للأيقونة بحيث تظهر في منتصف الشاشة بدلاً من أسفلها. 

<style>
.fb-livechat,.fb-widget{display:none}
.ctrlq.fb-button,.ctrlq.fb-close{position:fixed;cursor:pointer}
.ctrlq.fb-button{
  z-index:1;
  background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDEyOCAxMjgiIGhlaWdodD0iMTI4cHgiIGlkPSJMYXllcl8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxMjggMTI4IiB3aWR0aD0iMTI4cHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxnPjxyZWN0IGZpbGw9IiMwMDg0RkYiIGhlaWdodD0iMTI4IiB3aWR0aD0iMTI4Ii8+PC9nPjxwYXRoIGQ9Ik02NCwxNy41MzFjLTI1LjQwNSwwLTQ2LDE5LjI1OS00Niw0My4wMTVjMCwxMy41MTUsNi42NjUsMjUuNTc0LDE3LjA4OSwzMy40NnYxNi40NjIgIGwxNS42OTgtOC43MDdjNC4xODYsMS4xNzEsOC42MjEsMS44LDEzLjIxMywxLjhjMjUuNDA1LDAsNDYtMTkuMjU4LDQ2LTQzLjAxNUMxMTAsMzYuNzksODkuNDA1LDE3LjUzMSw2NCwxNy41MzF6IE02OC44NDUsNzUuMjE0ICBMNTYuOTQ3LDYyLjg1NUwzNC4wMzUsNzUuNTI0bDI1LjEyLTI2LjY1N2wxMS44OTgsMTIuMzU5bDIyLjkxLTEyLjY3TDY4Ljg0NSw3NS4yMTR6IiBmaWxsPSIjRkZGRkZGIiBpZD0iQnViYmxlX1NoYXBlIi8+PC9zdmc+) center no-repeat #0084ff;
  width:60px;
  height:60px;
  text-align:center;
  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;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
}
.ctrlq.fb-button:focus,.ctrlq.fb-button:hover{
  transform:translate(-50%, -50%) 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;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  border-radius:6px;
  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;
  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>

<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/frienditech" 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/frienditech" class="fb-xfbml-parse-ignore"></blockquote>
    </div>
    <div class="fb-credit">
      <a href="https://www.facebook.com/frienditech" 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>

<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({opacity:0},2*t.delay,function(){$(this).hide("slow"),t.button.show()}))
      :t.button.fadeOut("medium",function(){
        t.widget.stop().show().animate({opacity:1},2*t.delay),
        t.overlay.fadeIn(t.delay)
      })
    })
  });
</script>

لتحويل الأيقونة إلى زر يظهر أسفل المقال:

إذا كنت ترغب في تحويل الأيقونة إلى زر يظهر أسفل المقال، يمكنك إضافة زر HTML وتعديل CSS وجافا سكريبت بحيث يظهر الزر أسفل المقال. 

<style>
.fb-livechat,.fb-widget{display:none}
.ctrlq.fb-button,.ctrlq.fb-close{position:fixed;cursor:pointer}
.ctrlq.fb-button{
  z-index:1;
  background:#0084ff;
  color:#fff;
  width:200px;
  height:60px;
  text-align:center;
  bottom:24px;
  left:50%;
  transform:translateX(-50%);
  border:0;
  outline:0;
  border-radius:30px;
  box-shadow:0 1px 6px rgba(0,0,0,.06),0 2px 32px rgba(0,0,0,.16);
  transition:all .2s ease-in-out;
  font-size:16px;
  line-height:60px;
  text-decoration:none;
}
.ctrlq.fb-button:focus,.ctrlq.fb-button:hover{
  transform:translateX(-50%) 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:80px;
  left:50%;
  transform:translateX(-50%);
  border-radius:6px;
  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;
  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>

<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/frienditech" 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/frienditech" class="fb-xfbml-parse-ignore"></blockquote>
    </div>
    <div class="fb-credit">
      <a href="https://www.facebook.com/frienditech" 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>

<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({opacity:0},2*t.delay,function(){$(this).hide("slow"),t.button.show()}))
      :t.button.fadeOut("medium",function(){
        t.widget.stop().show().animate({opacity:1},2*t.delay),
        t.overlay.fadeIn(t.delay)
      })
    })
  });
</script>

بهذا الشكل، الأيقونة ستظهر في منتصف الصفحة، أو ستتحول إلى زر يظهر أسفل المقال.

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

بل من الأفضل أن تضع زر لمشاركة المقالة على وسائل التواصل الإجتماعي، وذلك من شأنه تحسين ترتيب الـ SEO، فما الفائدة من زر التواصل؟ تستطيع وضع رابط في نهاية الصفحة في الـ footer لتوجيه الزوار لصفحة تواصل معنا وبها نموذج لكتابة الرسالة التي يود إرسالها.

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