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

فى احدى الدروس السابقة من قسم دروس بلوجر وضعت لكم اضافة صندوق الأعجاب على المدونة بصفحتك من الفيس بوك LIKE BOX FACEBOOK والاضافة تعمل بدون مشاكل .

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

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

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

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

 اذهب لوحة التحكم ثم الى التخطيط وقم بأضافة اداء جديدة واختار HTML/Java Script

ضع هذا الكود بداخلة :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js' type='text/javascript'></script>

<style>

    #hbfanback {

        display: none;

        background: rgba(0, 0, 0, 0.8);

        width: 100%;

        height: 100%;

        position: fixed;

        top: 0;

        left: 0;

        z-index: 99999;

    }

    #hbfan-exit {

        width: 100%;

        height: 100%;

    }

    #hbfanbox {

        background: white;

        width: 420px;

        height: 270px;

        position: absolute;

        top: 58%;

        left: 63%;

        margin: -220px 0 0 -375px;

        -webkit-box-shadow: inset 0 0 50px 0 #939393;

        -moz-box-shadow: inset 0 0 50px 0 #939393;

        box-shadow: inset 0 0 50px 0 #939393;

        -webkit-border-radius: 5px;

        -moz-border-radius: 5px;

        border-radius: 5px;

        margin: -220px 0 0 -375px;

    }

    #hbfanclose {

        float: right;

        cursor: pointer;

        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguw4vEu7PFxKV0Oq0Ypmpg__W-Dr8-QKkEhfSP7Mp0JS8d5e5BiijDcL7brCGy-BP5FHEoNBE3adk5cmbO2s0lWS6UO92fP_zx9BfAKS2vHQT3s8DmUve6d4NCoA8xgxhoxcYcfVSpsx4/s1600/hb-fanclose.png) repeat;

        height: 15px;

        padding: 20px;

        position: relative;

        padding-right: 40px;

        margin-top: -20px;

        margin-right: -22px;

    }

    .hbremove-borda {

        height: 1px;

        width: 366px;

        margin: 0 auto;

        background: #F3F3F3;

        margin-top: 16px;

        position: relative;

        margin-left: 20px;

    }

</style>

<script type='text/javascript'>

    //<![CDATA[ 

    jQuery.cookie = function(key, value, options) {

        // key and at least value given, set cookie... 

        if (arguments.length > 1 && String(value) !== "[object Object]") {

            options = jQuery.extend({}, options);

            if (value === null || value === undefined) {

                options.expires = -1;

            }

            if (typeof options.expires === 'number') {

                var days = options.expires,

                    t = options.expires = new Date();

                t.setDate(t.getDate() + days);

            }

            value = String(value);

            return (document.cookie = [

                encodeURIComponent(key), '=',

                options.raw ? value : encodeURIComponent(value),

                options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE 

                options.path ? '; path=' + options.path : '',

                options.domain ? '; domain=' + options.domain : '',

                options.secure ? '; secure' : ''

            ].join(''));

        }

        // key and possibly options given, get cookie... 

        options = value || {};

        var result, decode = options.raw ? function(s) {

            return s;

        } : decodeURIComponent;

        return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;

    };

    //]]>

</script>

<script type='text/javascript'>

    jQuery(document).ready(function($) {

        if ($.cookie('popup_user_login') != 'yes') {

            $('#hbfanback').delay(100).fadeIn('medium');

            $('#hbfanclose, #hbfan-exit').click(function() {

                $('#hbfanback').stop().fadeOut('medium');

            });

        }

        $.cookie('popup_user_login', 'yes', {

            path: '/',

            expires: 7

        });

    });

</script>

<div id='hbfanback'>

    <div id='hbfan-exit'></div>

    <div id='hbfanbox'>

        <div id='hbfanclose'></div>

        <div class='hbremove-borda'></div>

        <iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fblog.kingnt&amp;width=340&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:340px; height:258px;margin-left: 8%;" allowtransparency="true"></iframe>

    </div>

</div>

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

مثال لمن لا يعرف اسم مستخدم الصفحة :

هذا الرابط التالى خاص بصفحة مدونة كينج نت 

https://www.facebook.com/blog.kingnt

كما تلاحظون اسم مستخدم الصفحة المحدد باللون الاحمر بعد علامة سلاش /

بالأخير اضغط على حفظ 

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

(( لا خير فى كاتم العلم ))