درس جديد وطريقه جديدة لـ اضافة صندوق تعليقات فيس بوك الى مدونة بلوجر، وفقا لتحديثات فيسبوك لعام 2018 ، فلقد بحثت كثيرا في المحتوى العربي عن شرح طريقة اضافة صندوق تعليقات فيس بوك الى مدونة بلوجر وفوجدتهم جميعا يستخدمون الطريقه القديمة التى لا تتوافق مع تحديثات الفيس بوك لعام 2016 ، أو اضافة اكواد تحتوي على كثير من الاخطاء التى تؤدي الى عدم ظهور صندوق التعليقات في مدونتك،والان اليك هذه الخطوات البسيطة كالتالي :
- اولا : انشاء تطبيق فيس بوك باسم مدونتك.
- ثانيا : اضافة 4 أكواد الى HTML بالمدونة.
- ثالثا : تشغيل اشعارات تعليقات الفيس بوك لمواضيعك بـ بلوجر ، لتصل الى حسابك الشخصي بالفيس بوك.
اولا: طريقة انشاء تطبيق فيس بوك لمدونتك:أول خطوة مهمه هو عمل تطبيق على مطوري الفيس بوك ، فبدونها لن تنجح في تركيب صندوق التعليقات بمدونتك،1- ادخل على رابط مطوري فيس بوك من هنا .2- اضغط على Create a New App ،وستظهر لك نافذه ضع فيها اسم مدونتتك مثلا بالعربي او الانجليزي ، وبعدها ضع الاسم بالانجليزي فقط بدون مسافات، ثم اختر نوع التصنيف، ثم اضغط على Create App ID تابع الفيديو الان
ثانيا: اضافة 4 أكواد الى HTML بالمدونة :* هذه الخطوه اساسيه ونجاحها يعني ظهور صندوق التعليقات في مدونتك بشكل صحيح وبدون أخطاء ، و يجب تحري الدقه عند اضافة 4 اكواد الى مدونتك ، في البداية أدخل الى مدونتك ثم اضغط على قالب ثم html ثم اضغط ctrl + f على لوحه المفاتيح ،وقبل الشروع في اضافه الاكواد ارجو ان تحفظ قالب مدونتك لو حدث خطأ .
ابحث عن هذا الكود <html في مربع البحث وستجده في اول المدونه ،ثم ضع خلفه مباشره هذا الكود
xmlns:fb='http://www.facebook.com/2008/fbml'
ليصبح هكذا
<html xmlns:fb='http://www.facebook.com/2008/fbml'
ابحث عن هذا الكود </head> في مربع البحث ،ثم ضع أسفلة مباشره هذا الكود :
1- الكود الاول:
ابحث عن هذا الكود <html في مربع البحث وستجده في اول المدونه ،ثم ضع خلفه مباشره هذا الكود
xmlns:fb='http://www.facebook.com/2008/fbml'
<html xmlns:fb='http://www.facebook.com/2008/fbml'
xmlns:fb='http://www.facebook.com/2008/fbml'
<html xmlns:fb='http://www.facebook.com/2008/fbml'
2- الكود الثانى :
ابحث عن هذا الكود </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'/>
* قم بتغير ما بين الاقواس باللون الاحمر الى اسم مدونتك ثم رابط شعار مدونتك ثم id التطبيق الذي قمت بعمله في البداية واخيرا ضع رابط صفحتك بالفيس بوك بدون s في خلف http:// .
3- الكود الثالث:
ابحث عن الكود
<body>
أو
<body expr:class='"loading" + data:blog.mobileClass'>
ثم ضع اسفله هذا الكود
<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>
غير مابين الاقواس باللون الاحمر الى id التطبيق فقط الذي قمت بعمله.
4- الكود الرابع والاخير :
هذه الاكواد ستقوم بتجربيها على حسب القالب الذي لديك فكل قالب يختلف عن الاخر ستقوم بتجربه احد هذه الاكواد واذا لم ينجح احذفه وجرب كود اخر :
ابحث عن احد الاكواد التالية:
<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>
* قم بتغير كل ما هو باللون الاحمر من عرض صندوق التعليقات من 520 الى المقاس الذي يناسب عرض موضوعك بالمدونه ثم ضع رابط مدونتك بدل من www.q2ranch.com
وهذا اسم الكود اذا اردت البحث عنه بعد الحفظ Facebook Comment Box
وهذا صندوق التعليقات (اللون الاسود ) لمحبي هذا اللون (اختياري)
<b:if cond='data:blog.pageType == "item"'>
<div align='left'>
<div style="background: #444444;">
<div style="color:#FFFFFF; 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='dark' 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>
ابحث عن هذا الكود </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'/>
* قم بتغير ما بين الاقواس باللون الاحمر الى اسم مدونتك ثم رابط شعار مدونتك ثم id التطبيق الذي قمت بعمله في البداية واخيرا ضع رابط صفحتك بالفيس بوك بدون s في خلف http:// .
3- الكود الثالث:
ابحث عن الكود
<body>
أو
<body expr:class='"loading" + data:blog.mobileClass'>
<body>
أو
<body expr:class='"loading" + data:blog.mobileClass'>
ثم ضع اسفله هذا الكود
<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>
غير مابين الاقواس باللون الاحمر الى id التطبيق فقط الذي قمت بعمله.
4- الكود الرابع والاخير :
هذه الاكواد ستقوم بتجربيها على حسب القالب الذي لديك فكل قالب يختلف عن الاخر ستقوم بتجربه احد هذه الاكواد واذا لم ينجح احذفه وجرب كود اخر :
ابحث عن احد الاكواد التالية:
<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>
* قم بتغير كل ما هو باللون الاحمر من عرض صندوق التعليقات من 520 الى المقاس الذي يناسب عرض موضوعك بالمدونه ثم ضع رابط مدونتك بدل من www.q2ranch.com
وهذا اسم الكود اذا اردت البحث عنه بعد الحفظ Facebook Comment Box
وهذا صندوق التعليقات (اللون الاسود ) لمحبي هذا اللون (اختياري)
<b:if cond='data:blog.pageType == "item"'>
<div align='left'>
<div style="background: #444444;">
<div style="color:#FFFFFF; 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='dark' 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>
ثالثا : تشغيل اشعارات تعليقات الفيس بوك لمواضيعك بـ بلوجر ، لتصل الى حسابك الشخصي بالفيس بوك:
- اذهب الى هذا الرابط اختار تطبيقك.
- ثم اضغط على seittings
- اول خانه Moderators ضع اسم حسابك الشخصي بالفيس بوك
- تابع الخطوه الاخيره بالفيديو لانها سهله جدا.
* كان هذا شرح جديد عن كيفية اضافة صندوق تعليقات فيس بوك الى مدونة بلوجر لعام 2016 بطريقه صحيحه 100%
وفي حاله وجود اي صعوبات اتمنى ان تكتب تعليقك اسفل الموضوع وسأقوم بالرد عليه باذن الله.
