طريقة اضافة نافذه منبثقه لتسجيل الاعجاب على الفيس بوك

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

عند ظهور النافذة المنبثقة تطالب الزائر تسجيل الاعجاب بصفحة مدونتك على الفيسبو ك وبمجرد الضغط على زر اعجبني تختفي النافذ المنبثقة في الحال. او يستطيع الزائر ان لم يود الانضمام الي صفحتك ان يضغط على زر اغلاق الموجود في الاعلى علي يمين النافذة او الانتظار 30 ثانية حتى تختفي النافذ من تلقاء نفسها .

 الاضافه مميزه بلا شك فهي تساعد اصحاب الصفحات ذات عدد المعجبين القليل من استدراج عدد اضافي من المعجبين بطريقه سريعه وتسهل

نأتي الآن إلى طريقة التركيب 

    #fblikepop{background-color:#fff;display:none;position:fixed;top:200px;_position:absolute; /* hack for IE 6*/width:450px;border:10px solid #6F6F6F;z-index:200;-moz-border-radius: 9px;-webkit-border-radius: 9px;margin:0pt;padding:0pt;color:#333333;text-align:right;font-family:arial,sans-serif;font-size:13px;}
    #fblikepop body{background:#fff none repeat scroll 0%;line-height:1;margin:0pt;height:100%;}
    .fbflush{cursor: pointer;font-size:11px !important;color:#FFF !important;text-decoration:none !important;border:0 !important;}
    #fblikebg{display:none;position:fixed;_position:absolute; /* hack for IE 6*/height:100%;width:100%;top:0;left:0;background:#000000;z-index:100;}
    #fblikepop #closeable{float:left;margin:5px 10px 0 0;}
    #fblikepop h1{background:#6D84B4 none repeat scroll 0 0;border-top:1px solid #3B5998;border-left:1px solid #3B5998;border-right:1px solid #3B5998;color:#FFFFFF !important;font-size:18px !important;font-weight:normal !important;padding:5px !important;margin:0 !important;font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif !important;}
    #fblikepop #actionHolder{height:80px;overflow:hidden;}
    #fblikepop #buttonArea{background:#F2F2F2;border-top:1px solid #CCCCCC;padding:10px;min-height:80px;}
    #fblikepop #buttonArea a{color:#999999 !important;text-decoration:none !important;border:0 !important;font-size:10px !important;}
    #fblikepop #buttonArea a:hover{color:#333 !important;text-decoration:none !important;border:0 !important;}
    #fblikepop #popupMessage{font-size:12px !important;font-weight:normal !important;line-height:22px;padding:8px;background:#fff !important;}
    #fblikepop #counter-display{float:right;font-size:11px !important;font-weight:normal !important;margin:5px 0 0 0;text-align:right;line-height:16px;}

 نقوم بوضع هذا الكود مباشرة بعد

<b:skin><![CDATA[

  طول النافذة  :  width:450px

 ارتفاع النافذة :  height:80px

 ثم نقوم باضافة هذا الكود مباشرة قبل 

</body>

 <script src='http://www-b04team-net.googlecode.com/files/jquery.js' type='text/javascript'/>
    <script src='http://connect.facebook.net/en_US/all.js#xfbml=1' type='text/javascript'/>
    <script src='https://sites.google.com/site/free1proxy/freeaproxy/klmet-7A9.js' type='text/javascript'/>
    <script language='javascript'>
    //<![CDATA[
        $(document).ready(function(){                    
            $().KNFBFansPRO({
               timeout: 30,
                wait: 0,
                url: 'http://www.facebook.com/Kelmet.7a9',
                closeable: true        });
        });
    //]]>
    </script>
    <div id='fbtpdiv'/>

 ثم قم بتغيير http://www.facebook.com/Kelmet.7a9   بعنوان صفحتك على الفيسبوك

معاينة المثال تحميل