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

بسم الله الرحمن الرحيـم

السلام عليكم ورحمة الله وبركاته


للصفحة الاجتماعية الفيس بوك دورا كبيرا في المساهمة بنشر مدونتك وجلب زوار لها ...

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


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

فرأيت الشكل الجميل والرائع جدا بواسطة الجيكوري .. سترونه في مدونتي وبمجرد مرور الفأرة عليه سينزلق الصندوق بانسيابية

وبدأت بالبحث عن الكود ولم أجد الكود الصحيح

حتى أنقذتني أختي الغالية أسماء [ أم نضال ] وأعطتني كودا صحيحا 100% نقلته من احدى المنتديات الأجنبية





طريـــقة اضافته سهلة جدا ..


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


</head>


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

<script src=

"https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"

type="text/javascript"></script>

ثم احفظوا التغيرات على القالب وتوجهوا إلى "عناصر الصفحة" وأضيفوا أداة html في أي مكان لا يهم وألصقوا بها الكود التالي



<script type="text/javascript">
//<!--
$(document).ready(function() {$(".w2bslikebox").hover(

function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.w2bslikebox{background: url("http://1.bp.blogspot.com/--tscpVzcBjo/TdUarKtcAlI/AAAAAAAAA3I/qVkypiYO9rc/s150/w2b_facebookbadge.pn") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.w2bslikebox div{border:none;position:relative;display:block;}
.w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.w2bslikebox span a{color: #808080;text-decoration:none;}
.w2bslikebox span a:hover{text-decoration:underline;}
</style><div class="w2bslikebox" style=""><div><iframe src="http://www.facebook.com/plugins/likebox.php?href=http:/www.facebook.com/ar-engineers&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe><span>By <a href="http://ar-engineers.blogspot.com/">Way2blogging</a> / <a href="http://ar-engineers.blogspot.com/2012/11/jquery_23.html">+Get This!</a></span></div></div>

وغيروا اسم ar-engineers في الكود باسم صفحاتكم على الفيسبوك

الإضافة لا تشتغل إلا مع الصفحات pages وليست الصفحات الشخصية التي لا يكون بها معجبين بل أصدقاء ..

اذا كان اديكم أي تساؤلات فاتركوا تعليقاتكم هنا

وان أعجبكم هذا الدرس فاضغطوا على Like ليراه أصدقائكم أيضا

ولاتنسوا الاشتراك بالقائمة البريدية كي يصلكم جديد المدونة



الشكر الأول والأخير لأختي أسماء

ولاتنسونا من تعليقاتكم لاثراء الاحور