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

والبعض الآخر يستخدم الإضافات المختلفة لهذا الغرض
لكن في الحالتين يظل صندوق المعجبين ذو مظهر كلاسيكي
فهل رغبت يوما أو ترغب الآن في تغيير شكل وهيئة هذا الصندوق بطريقة التحكم به عن طريق أكواد الـ 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>

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

•   Like Page ID رقم حساب صفحتك على الحساب بوك

•   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 )

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