إزالة الإطار الأزرق من إضافة فيسبوك للمواقع

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

هذه أول تدوينة حقيقية لفكرة لطالما كنت أطمح لتنفيذها وظهورها على أرض الواقع في أقرب فرصة ممكن ، لكن كما يقولون ” كـل شيء في وقته حلـ ــو “.

إلى موضوع تدوينتنا مجدداً ،

يوفر فيسبوك لأصحاب الصفحات إضافة لعرض صفحاتهم في مواقعهم الشخصية ، وتأتي هذه الإضافة في إطار مغلق ( iFrame ) لا يمكن التعديل عليه، فيجبرك على تحمل شكله السيء وألوانه الزرقاء التي قد لا تناسب شكل وألوان موقعك .

الحل يكمن في إنشاء كلاس خاص للتعديل على:

Border-color – لون حدود الاضافة
Background – لون الخلفية

كأهم خاصيتن ، أضف إليهم عديد المزايا الأخرى .

كود ( HTML ) :

<div id="like-box"><iframe style="z-index: 9; border: none !important; overflow: hidden; width: 250px; height: 190px;" src="http://www.facebook.com/plugins/likebox.php?id=XXXXXX&amp;width=250&amp;connections=16&amp;stream=false&amp;header=false&amp;height=190" frameborder="0" scrolling="no" width="320" height="240"></iframe></div>

ملاحظة : عليك إستبدال علامة X برقم الصفحة او عنوانها على فيسبوك.

كود CSS:

#like-box{
border:2px solid #F0F9F4;
width:300px;
z-index:10;
height: 180px;
overflow: hidden;
position:relative;
top:0px;
right:0px;
}
#like-box iframe{
right:0px;
overflow:hidden;
position:relative;
top:0px;
}