بسم الله الرحمن الرحيم
هل ترغب بتنسيق صندوق الإعجاب بطريقة إحترافية
الكاتب : مصباحي نت | بتاريخ : 31 - يناير - 2012 | 2 تعليقات | رقم التدوينة : 1037

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

والبعض الآخر يستخدم الإضافات المختلفة لهذا الغرض
لكن في الحالتين يظل صندوق المعجبين ذو مظهر كلاسيكي
فهل رغبت يوما أو ترغب الآن في تغيير شكل وهيئة هذا الصندوق بطريقة التحكم به عن طريق أكواد الـ css
إذا دعنا نبدأ معاً هذا الدرس المرتب والسهل إن شاء الله طبق الخطوات خطوة خطوة

ولسهولة هذا الدرس يمكننا إختصار الخطوات التي سنقوم بها إلى خطوتين أساسيتين:
الخطوة الأولى : إنشاء ملف css لصندوق الإعجاب
الخطوة الثانية : إنشاء كود صندوق الإعجاب مخصص

الخطوة الأولى : إنشاء ملف css لصندوق الإعجاب

إنشاء ملف css عملية سهلة قد يجهلها الكثير
كل ما عليك هو نسخ ولص الكود التالي ووضعه في ملف notepad

/*---------------YeMeNi AnA Custom Like Box Start--------------*/

.facebook_fanbox{ width: 250px; float: left; padding: 0 60px 7px 15px;font-family: Tahoma; }
/* Facebook */
.fan_box a:hover{ text-decoration: none; font-family:Tahoma; }
.fan_box .full_widget{ height: 350px; border: 0 !important; background: none !important; position: relative;font-family: Tahoma; }
.fan_box .connect_top{ background: none !important; padding: 0 !important;font-family:Tahoma; }
.fan_box .profileimage, .fan_box .name_block{ display: none;font-family:Tahoma; }
.fan_box .connect_action{ padding: 0 !important;font-family:Tahoma; }
.fan_box .connect_widget{
position: absolute;
bottom: 0px;
right: 10px;
font-family:Tahoma;
margin: 0 !important;
}
.fan_box .connect_widget .connect_widget_interactive_area { margin: 0 !important;font-family:Tahoma; }
.fan_box .connect_widget td.connect_widget_vertical_center { padding: 0 !important;font-family:Tahoma; }
span.total{ color: #fff; font-weight: normal; font-family: Tahoma; }
.fan_box .connections{
padding: 0 !important;
border: 0 !important;
font-family: Tahoma;
font-size: 12px;
font-weight: normal;
color: #666;
}
.fan_box .connections .connections_grid { padding-top: 10px !important;font-family:Tahoma; }
.fan_box .connections_grid .grid_item{ padding: 0 10px 10px 0 !important;font-family:Tahoma; }
.fan_box .connections_grid .grid_item .name{
font-family: "Tahoma",tahoma,verdana,arial,sans-serif;
font-weight: normal;
color: #666 !important;
padding-top: 1px !important;
}

/* END Facebook */

/*---------------YeMeNi AnA Custom Like Box End--------------*/

لاحظ المعطيات التالية:

  • لتغيير حجم الخط font-size: 12px;
  • لتغيير لون الهيدر color: #fff;
  • لتغيير لون خط أسماء المعجبون color: #666 !important;

الآن قم بحفظ الملف بالنقر على save as واحفظ الملف بالصيغة fb.css كما موضح في الصورة

أخيراً قم بتحميل هذا الملف fb.css الناتج إلى موقعك , وقم بحفظ الرابط المباشر له لنستخدمه في الخطوة التالية

الخطوة الثانية : إنشاء كود صندوق الإعجاب مخصص

بدلاً من الكود الذي نحصل عليه من صفحة الفيس بوك developers page
سنستخدم هذا الكود القابل لتغيير خصائصه


<script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US"></script>
<script type="text/javascript">FB.init("");</script>
<fb:fan profile_id="155843254506564" stream="0" connections="16" width="250px" height="350px" header="0" logobar="0" css="http://misbahinet.com/blog/wp-content/uploads/fb.css"></fb:fan>
<a href="http://misbahinet.com/blog/customize-face…e-box-with-css/" title="هل ترغب بتنسيق صندوق معجبينك بطريقة إحترافية">مدونة مصباحي نت</a>

لاحظ هذا الكود يحتوي على أربعة معطيات مهمة

  •   Connections عدد البروفايل او الوجوه
  •   Width and Height عرض وطول مربع الصندوق
  •   Stylesheet link رابط ملف الـ css الذي أنشأناه ورفعهناه في الخطوة الأولى من هذا الدرس

قم بهذه التغييرات:

  • أستبدل المتغير Like Page ID برقم حساب صفحتك على الفيس بوك
  • ضع عدد الوجوه التي ترغب في ظهورها في الصندوق عند المتغير connections ( أنا وضعتها  16 ..)
  • أستبدل المتغير STYLE SHEET LINK برابط ملف الـ fb.css الذي رفعناه سابقاً ( انا أستخدمت الرابط http://misbahinet.com/blog/wp-content/uploads/fb.css )

الآن صندوق الإعجاب المخصص جاهز للتركيب
قم بتركيب كود صندوق الأعجاب في أي مكان تود ظهوره , بإمكانك وضعه في مربع جانبي من خيار القوائم الجانبية وأستمتع بالمظهر المميز لصندوق المعجبين في مدونتك او موقعك

التصنيف : وورد بريس

2 تعليقات على : “هل ترغب بتنسيق صندوق الإعجاب بطريقة إحترافية”

  1. khalid قال:

    شكرا عزيزي على هذا الشرح الرائع
    جاري التجربة

  2. محمد قال:

    ارجو من الجميع ترك تعليقاتهم


شاركـ بتعليقاتكـ ..!

الإشتراك البريدي

أشترك بإيميلك معنا ليصلك كل جديد

تسجيل الدخول


العضـويـة:
الباسورد:

تدوينات مميزة

yemeniana-dalil-e3lany-word-press-theme

جديد أعمالي : قالب وورد برس إعلانات تجارية ومبوبة ودليل تجاري إحترافي

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

yemeniana-guercife24-wordpress-theme

جديد اعمالي : قالب وورد برس إحترافي لصحيفة اخبارية

جديد أعمالي قالب وورد برس اخباري احترافي لصحيفة اخبارية صورة للقالب بعد تركيبه على موقع تجريبي ...

yemeniana-e3lanat-word-press-theme

جديد أعمالي : قالب وورد برس إعلانات مبوبة وتجارية إحترافي

جديد الأعمال قالب وورد برس إعلاني تجاري وإعلانات مبوبة صور للقالب بعد تركيبه وضبطه على موقع ...

yemeniana-alwahebat-wordpress-theme

جديد أعمالي قالب ورد برس اخباري بمزايا عديدة وألوان هادئة ،، حساس ومتوافق مع كافة الاجهزة الذكية

جديد أعمالي قالب وورد برس أخباري إحترافي ،، ببلوكات متنوعة ومختلفة وخصائص كثيرة و عديدة هذه صورة ...

yemeniana-alrowad-word-press-theme

جديد اعمالي قالب وورد برس إحترافي لمدارس الرواد الأهلية

جديد أعمالي قالب إحترافي وبمميزات خاصة لمدارس الرواد الأهلية هذه صورة لرئيسية القالب بعد تركيبه وضبطه ...

أعلن معنا

كن أحد معجبينا