الطريقة الاولى : تتم بواسطة ال 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>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#' ><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> ولاتنسى تغيير رابط صفحتك بدلا عن رابط صفحتي
<fb:like-box href="http://www.facebook.com/4techin" width="277" show_faces="true" stream="false" header="false"></fb:like-box>