اضافة صندوق الاعجاب الخاص بالفيس بوك لموقعك او مدونتك

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

الطريقة الاولى : تتم بواسطة ال iFrame تعتبر طريقة سهلة وغير مكلفة ولكن غير مرنة وهذا هو الكود الذي يجب اضافته لموقعك : 


<iframe src="//www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/4techin&-amp;colorscheme=light&-amp;width=275&-amp;height=250&-amp;show_faces=true&-amp;border_color&-amp;stream=false&-amp;header=false&-amp;" 
style="border:none; overflow:hidden;width:100% !important; height:250px;"></iframe>
يجب عليك اولا حذف علامة الناقص باللون الاحمر في كامل الكود وتغيير رابط صفحتك بدل الرابط الحالي باللون الاحمر واستبدال " بالتالي &-quot; بدون اشارة الناقص ويمكنك تغيير خصائص الصندوق التي اهمها:
show_faces اذا كنت لاتريد عرض صور المعجبين بإمكانك تغيير القيمة true الى false
header اذا كنت تريد رأس عنوان الصندوق ان يظهر غير القيمة الحالية الى true
width يجب تغيير عرض الصندوق ليتناسب مع عرض المكان المخصص له وتوجد في مكانين في الكود وفي الاستايل اجعلهم نفس القيمة.
height تغيير الارتفاع بما يناسبك وتوجد ايضا في مكانين ضعهم نفس القيمة.
اما بالنسبة لمدونات بلوجر بامكانك الدخول الى التخطيط اضف ادة في المكان الناسب لك سيفتح لك نافذه اكتب العنوان او اتركه فارغ ضع الكود في المربع الثاني واضغط على حفظ.

الطريقة الثانية : تتم بواسطة XFBML وهي طريقة معقدة قليلا ولكن مرنة جدا :

يجب عليك اولا انشاء facebook appID اذا لم تمتلكه حاليا لانشاءه توجه للرابط التالي https://developers.facebook.com/apps
اولا :اضيف الكود التالي باللون الاحمر في وسم html كمايلي : 
<html   xmlns:og='http://ogp.me/ns#' xmlns:fb='http://ogp.me/ns/fb#' >
ثانيا اضف الكود التالي بعد الوسم body واستبدل appID الذي باللون الاحمر باللذي انشأته : 
<div id="fb-root"> </div>
<script>  
window.fbAsyncInit = function() { 
FB.init({ 
    appId : '1528665707432567', 
    xfbml : true, version : 'v2.5' });
 }; 
(function(d, s, id){ 
   var js, fjs = d.getElementsByTagName(s)[0];
   if (d.getElementById(id)) {return;} js = d.createElement(s);
   js.id = id; js.src = "//connect.facebook.net/ar_AR/sdk.js";
   fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));
</script>
ثالثا : اضف الكود التالي للمكان الذي تريده ان يظهر مع نغيير عرض الصندوق من الخاصية width :
ولاتنسى تغيير رابط صفحتك بدلا عن رابط صفحتي 
<fb:like-box href="http://www.facebook.com/4techin" width="277" show_faces="true" stream="false" header="false"></fb:like-box>
الى هنا انتهى الدرس واي مشكلة تواجهك ضعها في تعليق.
الكلمات المفتاحية:

مواضيع ذات صلة