كما قلنا في تدوينة سابقة ، فيمكن اعتبار صندوق الإعجاب - بصفحة الفيسبوك - من أهم الإضافات التي لا يجب علينا أن نتهاون في إدراجها في مدونتنا، لكونها تسمح لزوارنا من الإشتراك في صفحتنا على الفيسبوك و بالتالي تلقي أخر المستجدات على حائطهم، مما يضمن لنا عودتهم و استمرار اطلاعهم على كل جديد.
لكن في هذه التدوينة سنتخد إجراء "هجوميا" إن صح التعبير لحث الزوار على الإعجاب بصفحتنا، بحيث سنضع هذا الصندوق مباشرة أمام عينه من خلال نويفذة منبثقة تحجب ما تحتها.
للقيام بهذا الأمر ما علينا إلا اتباع الخطوات القليلة التالية:
فيما يخص الموقع
1 - إن لم نكن نستعمل jQuery في موقعنا فيجب إضافة السطر التالي مباشرة بعد <head> :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
2 - ثم مباشرة قبل </head> نضيف ما يلي:
<style>#fbox-background,#fbox-close{width:100%;height:100%}#fbox-background{display:none;background:rgba(245,245,245,.9);position:fixed;top:0;left:0;z-index:99999}#fbox-main{width:340px;min-height:200px;background:#eaeaea;border:4px solid #01B1D3;position:absolute;top:32%;left:37%;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-moz-box-shadow:5px 5px 12px 0 #656565;-webkit-box-shadow:5px 5px 12px 0 #656565;-o-box-shadow:5px 5px 12px 0 #656565;box-shadow:5px 5px 12px 0 #656565;filter:progid:DXImageTransform.Microsoft.Shadow(color=#656565, Direction=134, Strength=12)}#fbox-button{float:left;cursor:pointer;position:absolute;left:0;top:0;z-index:100}#fbox-button:before{content:"X";padding:4px 8px;background:#01B1D3;color:#eaeaea;font-weight:700;font-size:13px;font-family:Tahoma}</style>
3 - و أخيرا نضيف الكود التالي مباشرة قبل </body> :
<script type='text/javascript'>
jQuery.cookie=function(key,value,options){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():'',options.path?'; path='+options.path:'',options.domain?'; domain='+options.domain:'',options.secure?'; secure':''].join(''));}
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(500).fadeIn('slow');
$('#fbox-button, #fbox-close').click(function(){
$('#fbox-background').stop().fadeOut('medium');
});
$('#fbox-background').delay(13000).fadeOut('slow');
}
$.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });});
</script>
<div id='fbox-background'>
<div id='fbox-close'>
</div>
<div id='fbox-main'>
<div id='fbox-button'>
</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/ar_AR/sdk.js#xfbml=1&version=v2.5&appId=521085524588635";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-page" data-href="https://www.facebook.com/arexperts" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/arexperts"><a href="https://www.facebook.com/arexperts">الخبراء العرب</a></blockquote></div></div>
</div>
</div>
4- لا ننسا أن نغير ما هو مكتوب بالأحمر إلى عنوان صفحتنا و إلى إسمها.
ثم يمكن أن نغير المدة التي تبقى فيها النويفذة منبثقة قبل أن تختفي و ذلك بتغيير ما هو مكتوب بالبرتقالي. 13000 تعني 13 ثواني، 10000 = 10 ثواني، و هكذا.
و إن رغبنا أن تظهر النويفذة في كل زيارة جديدة لنفس الزائر نقوم بحذف السطر الذي بالأخضر.
فيما يخص مدونة بلوغر
1- نذهب إلى التخطيط > الشريط الجانبي > إضافة أداة > نختار HTML/JavaScript .
2- ثم في المحتوى نلصق ما يلي:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>إن كنا نستعمل jQuery سلفا يجب أن نحذف السطر الأول من الكود أعلاه لتفادي أي مشاكل:
<style>
#fbox-background,#fbox-close{width:100%;height:100%}#fbox-background{display:none;background:rgba(245,245,245,.9);position:fixed;top:0;left:0;z-index:99999}#fbox-main{width:340px;min-height:200px;background:#eaeaea;border:4px solid #01B1D3;position:absolute;top:32%;left:37%;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-moz-box-shadow:5px 5px 12px 0 #656565;-webkit-box-shadow:5px 5px 12px 0 #656565;-o-box-shadow:5px 5px 12px 0 #656565;box-shadow:5px 5px 12px 0 #656565;filter:progid:DXImageTransform.Microsoft.Shadow(color=#656565, Direction=134, Strength=12)}#fbox-button{float:left;cursor:pointer;position:absolute;left:0;top:0;z-index:100}#fbox-button:before{content:"X";padding:4px 8px;background:#01B1D3;color:#eaeaea;font-weight:700;font-size:13px;font-family:Tahoma}
</style>
<script type='text/javascript'>
//<![CDATA[
jQuery.cookie=function(key,value,options){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():'',options.path?'; path='+options.path:'',options.domain?'; domain='+options.domain:'',options.secure?'; secure':''].join(''));}
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(500).fadeIn('slow');
$('#fbox-button, #fbox-close').click(function(){
$('#fbox-background').stop().fadeOut('medium');
});
$('#fbox-background').delay(13000).fadeOut('slow');
}
$.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });});
</script>
<div id='fbox-background'>
<div id='fbox-close'>
</div>
<div id='fbox-main'>
<div id='fbox-button'>
</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/ar_AR/sdk.js#xfbml=1&version=v2.5&appId=521085524588635";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-page" data-href="https://www.facebook.com/arexperts" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/arexperts"><a href="https://www.facebook.com/arexperts">الخبراء العرب</a></blockquote></div></div>
</div>
</div>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
3- طالع الخطوة الرابعة أعلاه.
4- ثم ننقر "حفظ"، و بعده ننقر "حفظ الترتيب" (في الأعلى) .
أتمنى أن تستفيدوا من هذه التدوينة.
في انتظار تعاليقكم ، تقبلوا فائق احترامي.
4- ثم ننقر "حفظ"، و بعده ننقر "حفظ الترتيب" (في الأعلى) .
أتمنى أن تستفيدوا من هذه التدوينة.
في انتظار تعاليقكم ، تقبلوا فائق احترامي.
0 تعاليق