سكريبت اضافة صندوق اعجاب فيس بوك منبثق في مدونات بلوجر

في مقال اليوم سوف سنتعرف على طريقة تركيب او اضافة صندوق اعجاب فيس بوك منبثق بطريقة احترافية على مدونتك, للحصول على المزيد من المتابعين عبر صفحة فيسبوك facebook الخاصة بك.

من خلال سكريبت او كود بسيط سوف تتمكن من اضافة صندوق منبثق للمدونة, من خلاله يمكن ان توجه زوار المدونة الى صفحتك على فيس بوك. يطهر هدا الصندوق خلال تصفح الموقع بطريقة منبتقة و احترافية.

خطوات تركيب صندوق اعجاب فيسبوك منبتق على المدونة

قم بالتوجه الى لوحة التحكم في المدونة.
توجه الى التخطيط, بعد ذلك قم باضافة أداة.
قم بختيار اداة JAVASCRIPT/ HTML.
قم بنسخ الكود التالي و الصقه بالاداة, بعدها اضغط حفط.

 
<style>
 
    .tw_float_ads_main_Wrap{
        max-width: 350px;
        max-height: 350px;
        position: fixed;
        z-index: 98765;
        background: rgb(59,89,152);
        top: 50%;
        left: 50%;
        margin-left: -175px;
        margin-top: -175px;
        box-sizing: border-box;
        box-shadow:0 0 3px rgba(0,0,0,0.2);
        border-radius: 10px;
        display: none;
    } 
 
    .tw_float_ads_close{
        margin: 0 auto;
        text-align: center;
        padding: 30px 20px 30px;
        position: relative;
    }
 
 .tw_float_ads_close #tw_close_button
{
   font-size: 25px;
    color: #fff;
    position: absolute;
    top: -12px;
    right: -10px;
    display: inline-block;
    box-shadow:0 0 3px rgba(0,0,0,0.2);
    z-index: 9999999;
    background: rgb(59,89,152);
    padding: 5px;
    border-radius: 5px;
}
 
#tw_close_button{
        cursor:pointer;
}
#TW_credits{
    font-size: 25px;
    color: #fff;
    position: absolute;
    bottom: 2px;
    right: 5px;
    display: inline-block;
    text-shadow:0 0 3px rgba(0,0,0,0.2);
    text-decoration: none!important;
    }
 
</style>
<div class='tw_float_ads_main_Wrap' id='tw_float_ads_main_Wrap'>
    <div class='tw_float_ads_close'>
     
       <span id='tw_close_button' style='float: right'>
         
           <i id='TW_Close_Button' class="fa fa-times" aria-hidden="true" title='close the Advertisment'></i>
         
       </span>
     
       <div>
         
     <div class="fb-page" data-href="https://www.facebook.com/معرف فيسبوك/" data-width= '300' data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/معرف فيسبوك" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/معرف فيسبوك">Trending Widgets</a></blockquote></div>
         
       </div>
   <span id='TW_credits' style='float: right; font-size: 12px;'><a style='text-decoration: none!important; color: #fff;' href="
https://goo.gl/pHMFzH">Get This Widget</a></span>
 
    </div>
 
    <div style='clear:right'></div>
 
</div>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.9";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<script type="text/javascript">
window.onload = function(){
var tw_closeButton = document.getElementById('tw_close_button');
 
var tw_float_ads_main_Wrap = document.getElementById("tw_float_ads_main_Wrap");
myVar = setTimeout(function(){ tw_float_ads_main_Wrap.style.display = 'block' }, 3000);
tw_closeButton.onclick = function(){
 
  document.getElementById("tw_float_ads_main_Wrap").style.display = 'none';
 
}
}
</script>

بعد تركيب كود صندوق فيسبوك المنبتق توجد كلمة (معرف فيسبوك تلات مرات) يجب عليك تبديلها بمعرف فيسبوك ID الخاص بك ليتم ربط السكريبت مباشرة مع صفحتك.

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

{ قد يعجبك : 5 أشكال احترافية الازرار مواقع تواصل الاجتماعي على بلوجر.