إضافة صندوق الإعجاب الخاص بالفايسبوك إلى مدونتك (شكل جديد)

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

مثال مباشر

لإضافة هذا الصندوق إلى مدونتك المرجو تتبع الخطوات التالية :

اذهب إلى لوحة التحكم الخاصة بمدونتك ثم تصميم بعد ذلك اضغط على إضافة أداة HTML/Javascript
الآن انسخ الكود التالي و ضعه داخل الأداة

<center><style>.helperbloggerFB {
width: 300px;
height: 150px;
border-radius: 3px;
position: relative;
background-color:#f4f4f4;
padding:5px 10px 15px 0;
}
.helperbloggerFB, .helperbloggerFB:before, .helperbloggerFB:after {
background: #f4f4f4;
border: 1px solid #ccc;
}
.helperbloggerFB:before, .helperbloggerFB:after {
content: "";
position: absolute;
bottom: -3px;
left: 2px;
right: 2px;
height: 1px;
border-top: none;
}
.helperbloggerFB:after {
left: 4px;
right: 4px;
bottom: -5px;
box-shadow: 0 0 2px #ccc;
}
</style>

<div class="helperbloggerFB">
<div style="height:155px;overflow:hidden">
<fb:like-box href="https://www.facebook.com/modawanatmohamed" data-width="300" data-height="179" data-show-faces="true" data-border-color="#f4f4f4" data-stream="false" data-header="false" class=" fb_iframe_widget "><span><iframe id="f5741c08" name="fdd6ca2ec" scrolling="no" style="border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; overflow-x: hidden; overflow-y: hidden; height: 179px; width: 300px; " class="fb_ltr" src="http://www.facebook.com/plugins/likebox.php?border_color=%23f4f4f4&channel=https%3A%2F%2Fs-static.ak.fbcdn.net%2Fconnect%2Fxd_proxy.php%23cb%3Df2babfba84%26origin%3Dhttp%253A%252F%252Fwww.btsnts.com%252Ff1ae6f85bc%26relation%3Dparent.parent%26transport%3Dpostmessage&colorscheme=light&header=false&height=179&href=https%3A%2F%2Fwww.facebook.com%2Fmodawanatmohamed&locale=en_US&sdk=joey&show_faces=true&stream=false&width=300"></iframe></span></fb:like-box>
</div>
</div>
<div id="fb-root"></div>
<script>(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/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script></center>

التعديل على الكود :

modawanatmohamed : غيره باسم صفحتك على الفايسبوك (يوجد مرتين في الكود)

انتهى الدرس, أرجو أن تنال هذه الإضافة إعجابكم.

إذا واجهتكم أي مشكلة فلا تترددو في طرحها عبر تعليق

إضافة صندوق الإعجاب الخاص بالفايسبوك إلى مدونتك (شكل جديد)

موضوعات ذات صله

1 التعليقات: