اضافة صندوق التعليقات الجديد الخاص بالفيس بوك على مدوننك 2018
لا يخفى عليك اخي الكريم / اختي الكريمة الاهمية الكبرى التي يحضى بها صندوق التعليقات الخاص بالمواقع او المدونات ، من اجل التواصل مع زوارك واخذ انطباعاتهم او التفاعل مع اسئلتهم ما يعطي انطباع جيد لدى زوار موقعك او مدونتك
لهذا اليوم في هذه التدوينة سوف نتعرف على كيفية اضافة صندوق التعليقات الخاص بالفيس بوك واضافته في مدونتك مما يعطيها شكل وجاذبية اكبر
من اجل هذه الغاية اخي الكريم /اختي الكريمة سواف تحتاج /تحتاجين لاتباع مرحلتين اساسيتين سوف نتعرف في هذه التدوينة على كل منها واحدة بعد الاخرى
1 ينبغي عمل تطبيق على الفيس بوك
2 اضافة أكواد الى HTML بالمدونة.
المرحلة الأولى
لعمل تطبيق خاص بتعليقات يتوجب عليك الدخول لحسابك على الفيس بوك / قسم المطور / من خلال هذا الرابطبعد ذلك قم بالضغط على
Create a New App او انشاء تطبيق جديد
قم بتعبئة جميع البيانات الخاصة بمدونتك بما فيها اسم المدونة والرابط وغيرها ..
بعد ذلك تقوم الضغط على Create App ID
هكذا نكون قد انتهينا من القيم الخاص بانشاء التطبيق
المرحلة الثانية
في هذه المرحلة سوف تحتاج لاضافة اكواد
Html
من خلال التوجه الى لوحة تحكم موقعك
اختر التخطيط وقم اولا بأخذ نسخة احطياطية من مدونتك تحسبا لوجود اخطاء اثناء محاولة اضافة الاكواد
قم بالضغط على زر
CTRL+F
وقم بالبحث عن العبارة التالية
<html
ضع خلفه الكود التالي
xmlns:fb='http://www.facebook.com/2008/fbml'
قم بعد ذلك بالبحث عن
</head>
تم ضع خلفه مباشرة الكود التالي مع تغير الى مايناسب مدونتك
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='حقل المعلومات' property='og:site_name'/>
<meta content='هنا رابط شعار مدونتك' property='og:image'/>
<meta content='YOUR_FB_APP_ID ' property='fb:app_id'/>
<meta content='http://www.facebook.com/q2ranch' property='fb:admins'/>
<meta content='article' property='og:type'/>
ابحث عن
<body>
ثم ضع أسفله هذا الكود
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'Your App ID HERE',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
هنا وصلنا الى الكود الاخير . قم بالبحث على احدى هذه العبارات في قالب مدونتك كما فعلت في الخطوات السابقة
<data:post.body/>
او
<p><data:post.body/></p>
أو
<div class='post-footer-line post-footer-line-1'>
او
<p class='post-footer-line post-footer-line-1'>
او
<b:includable id='comment-form' var='post'>
قم بكتابة الكود التالي اسفل احدى هذه العبارات وجرب مشاهدتها في مدونتك اذا لم تكون الاضافة تظهر في المكان المناسب الذي ترغب فيه فجرب تغير مكان هذا الكود الاخير ونقله اسفل احدى العبارات الاخرى
<b:if cond='data:blog.pageType == "item"'>
<div align='left'>
<div style="background: #FFFFFF;">
<div style="color: #333333; font-family:'Oswald',serif; font-size: 20px; text-align:left;">
<strong>Post a Comment</strong></div>
<br/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div><fb:comments colorscheme='light' expr:href='data:post.url'
expr:title='data:post.title' expr:xid='data:post.id' width='520'/></div> <div align='right'
><a href='www.q2ranch.com' rel="nofollow"><small>[Facebook Comment Box]</small></a></div> </div> </div> </b:if>
expr:title='data:post.title' expr:xid='data:post.id' width='520'/></div> <div align='right'
><a href='www.q2ranch.com' rel="nofollow"><small>[Facebook Comment Box]</small></a></div> </div> </div> </b:if>
بامكانك تغير العرض بالتعديل على المقاس 520 بالكود اعلاه وكذلك لون الخلفية وغيرها او تتركها كما هي.
هكذا نكون قد قمنا بتركيب اضافة الفيس بوك الخاصة بك بنجاح . اذا واجهتك اي مشكلة في مرحلة من المراحل يرجى ترك تعليق اسفل هذه التدوينة وشكرا
