مستجدات متبثة

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

سلام عليكم .. أصبح الفيسبوك خدمة وسائل الاعلام الاجتماعية الرائدة على شبكة الإنترنت لأكثر من 1.3 مليار مستخدم. من هؤلاء، 800 مليون يسجلون الدخول لصفحتهم الشخصية على الأقل في اليوم .اذن أصبح بفضل عدد كبير من المستخدمين النشطين على خدمات مثل الفيسبوك ، بالامكان الحصول على زوار جدد كل يوم لمدونتك عن طريق ربط مدونتك بصفحتك على الفيسبوك ، وذلك ببرمجة نافدة منبثقة على مدونتك تحمل محتوى أو صندوق عدد معجبي صفحاتك مع زر اعجاب لجلب معجبين آخرين .

I- طريقة اضافة صندوق منبثق لصفحتك فيسبوك على موقعك : 

     1- قم بنسخ الكود لبرمجي التالي .

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<style>
#fbox-background {
    display: none;
    background: rgba(0,0,0,0.8);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
}

#fbox-close {
    width: 100%;
    height: 100%;
}

#fbox-display {
    background: #eaeaea;
    border: 5px solid #828282;
    width: 340px;
    height: 230px;
    position: absolute;
    top: 32%;
    left: 37%;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

#fbox-button {
    float: right;
    cursor: pointer;
    position: absolute;
    right: 0px;
    top: 0px;
}

#fbox-button:before {
    content: "CLOSE";
    padding: 5px 8px;
    background: #828282;
    color: #eaeaea;
    font-weight: bold;
    font-size: 10px;
    font-family: Tahoma;
}

#fbox-link,#fbox-link a.visited,#fbox-link a,#fbox-link a:hover {
    color: #aaaaaa;
    font-size: 9px;
    text-decoration: none;
    text-align: center;
    padding: 5px;
}
</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_facebook_box') != 'yes'){
$('#fbox-background').delay(5000).fadeIn('medium');
$('#fbox-button, #fbox-close').click(function(){
$('#fbox-background').stop().fadeOut('medium');
});
}
$.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });
});
</script>
<div id='fbox-background'>
<div id='fbox-close'>
</div>
<div id='fbox-display'>
<div id='fbox-button'>
</div>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?
href=https://www.facebook.com/lhoosnet&width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'
style='border: none; overflow: hidden; background: #fff; width: 339px; height: 200px;'></iframe>
<div id="fbox-link">Powered by <a style="padding-left: 0px;" href="http://lhoosnet.blogspot.com" rel="nofollow">LHOOSNET</a></div>
</div>
</div>
  
     2- قم بتغيير الكود باللون الأزرق برابط صفحتك على الفيسبوك .
                 https://www.facebook.com/lhoosnet

 هذا الكود للتحكم بمدة الزمنية لظهور النافذة المنبثقة 
          .delay(5000)  

هذا الكود لتظهر النافذة مرة واحدة ، وان ارذت ظهورها كل تحديث للصفحة احذف الكود .

$.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });
   3- أدخل للبلوجر www.blogger.com
         . سجل الدخول للبلوجر اختر المدونة التي تريد تركيب هذه الاضافة عليها .
         . اذهب لتعديل الصفحة على لوحة التحكم
         . اضف صندوق HTML ,وبداخل ألصق الكود ثم احفظه كما في الفيديو أدناه .



4-  شارك التدوينة مع أصدقائك ان أعجبتك .

ليست هناك تعليقات