اضافة صندوق معجبي الفيس بوك بواسطة 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%3A%2F%2Ffacebook.com%2Fomnidal&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://www.way2blogging.org/">Way2blogging</a> / <a href="http://www.way2blogging.org/2011/06/add-static-facebook-pop-out-like-box.html">+Get This!</a></span></div></div>






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




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

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

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

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



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

ولاتنسونا من دعائكم


Haifaa

14 التعليقات :

آيمون يقول...

شرح ووافي وكافي الله يعطيك العافيه

Asma Rahmouni يقول...

بوركت عزيزتي ^_^

اميره يقول...

الف شكر لك

لكن لم اجد الوسم
هل توضحين الكود اكثر

Unknown يقول...

حياك أختي سامية

أعتذر للخطأ الغير مقصود
تم التعديل

واذا واجهتك اي مشكلة او صعوبات فلا تترددي أبدا :)

غير معرف يقول...

موضوع جميل ومفيد أخي

أيـٌوب يقول...

السلام عليكم
جزاك الله خيرا تم التركيب بنجاح وننتظر الجديد دائما
-------------------
تم التركيب هنا
http://ayoub-chambazi.blogspot.com/

Unknown يقول...

حياكم الله جميعا

أسعدني مروركم

اميره يقول...

اسعدك الله اخت هيوف عذرا على تاخيري في الرد
لكن بفضل الله تم التركيب

جزيل شكري لافادتك
وعذرا مره اخرى على تاخيري

Unknown يقول...

الف مليون شكر على الدرس الحلووو

بس انا والله ما ضبط معي

تحيتي الك

Barca_n يقول...

شكرااا لك عىل الشرح والطريقة
وسوف أركبه على مدونتي

وأدعوك إلى زيارة مدونتي مدونة كل شي

http://everi-thing.blogspot.com/

مدونة التربية والتعليم بالمغرب يقول...

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

مدونة التربية والتعليم بالمغرب يقول...

شكرا جربت لكن هذا الرابط لا يعمل
http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2F

clacketdesign يقول...

ياشباب ما فهمت الطريق

غير معرف يقول...

شكرا الشرح وافي وتمت التجربة بنجاح بارك الله فيك

إرسال تعليق

لاتقرأ وترحل ..
بل ضع لك بصمة في المكان قبيل الرحيل ..