اضافة صندوق معجبي الفيس بوك بواسطة 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 التعليقات :

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

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

أسماء || أم نضال || يقول...

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

¸¸.سَـٱﻣ̉ـﻳـﻪ ٱ ڶـﻌـبِـدَ ٱ ڶرَﺣ̃ــﻣ̉ــڼ ¸¸. يقول...

الف شكر لك

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

Haifaa يقول...

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

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

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

مغربي.كوم يقول...

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

ayoub يقول...

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

Haifaa يقول...

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

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

¸¸.سَـٱﻣ̉ـﻳـﻪ ¸¸. يقول...

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

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

طلال اليافعي يقول...

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

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

تحيتي الك

yousefalnatsheh يقول...

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

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

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

Hamza Tazi يقول...

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

Hamza Tazi يقول...

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

ميدو ___mido___للبرمج الحديثة يقول...

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

الوردي ديزاين يقول...

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

إرسال تعليق

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