بسم الله الرحمن الرحيم
اضافة هاك صندوق تعليقات الفايس بوك و هي اداة مقدمة من الفايس بوك لتمكين كل زوارك من التعليق على موضوعاتك بدون ان يكون لديهم حسابات في جوجل او غيرها و بشكل سريع و جميل جدا
وهذا شكل الأداة
نبدأ بالشرح
نبدأ بالخطوات على الفيس بوك
1. ادخل الموقع التالي :
https://developers.facebook.com/apps/
https://developers.facebook.com/apps/
قد يطلب منك تسجيل الدخول بحسابك في الفيس بوك
2. اضغط على زرار انشئ تطبيق جديد او Create New App
أو إنشاء تطبيق جديد
أو إنشاء تطبيق جديد
3. قم بالسماح للتطبيق من استخدام معلوماتك الشخصية لأنشاء التطبيق ( اضغط سماح ) Allow
4. ادخل معلومات التطبيق و هي الاسم المعروض و اسم التطبيق و قم بالتأشير على الموافقة على الشروط و البنود الخاصة بالخدمة ثم استئناف او Continue
ملاحظة : اسم التطبيق يجب ان يكون خالي من المسافات ولا يتوي على اي حروف كبيرة Capital
5. قم بأدخال الرقم التأكيدي
الان سوف يقوم بنقلك الى صفحة اعدادات التطبيق و بها رقم التطبيق قم بالاحتفاظ به لاننا سوف نستخدمة بداخل الكود
في خانة App Domain سو تقوم بأدخال موقعك كامل بهذا
الشكل
الشكل
www. xxxxx .com
ثم تضغط ENTER و سوف يتحول الى مربع كما ترى بالصورة
6 - اختر موقع او Website و قوم بأدخال موقعك كما ترى
بالصورة بهذا الشكل :
بالصورة بهذا الشكل :
ثم أضغط حفظ Save
اخر خطوة و هي الحصول على اي دي البروفايل الخاصة بك
قم بفتح بروفايلك .. و لمن لا يعرف فقط قم بالضغط على
صورة البروفايل
صورة البروفايل
سوف تجد رابط الصفحة من الاعلى كالآتي :
قم بأخذ الرقم او الاسم الذي يلي مباشرة ID= ( اسم او رقم )
و احتفظ به ...
اذا وجدت رابط بروفايلك بالشكل التالي :
https://www.facebook.com/mody.mahmoud5
أنسخ
mody.mahmoud5
كده خلصنا شغل على الفيس بوك
دلوقتى هنحط الأكواد داخل التصميم
______________________________
أفتح التصميم ولا تنسى علامة الصح على توسيع القالب
الان ابحث عن :
<html
و قم بأضافة الكود التالي بنهايتة مباشرة قبل
>
الكود :
xmlns:fb='http://www.facebook.com/2008/fbml'
و الان قم بالبحث عن :
</head>
و اضف قبلة مباشرة الكود التالي :
<!-- Facebook Comment Start-->
<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta expr:content='data:blog.homepageUrl' property='og:url'/>
</b:if>
<meta content=' مدونة محترفى بلوجر ' property='og:site_name'/>
<meta content='ضع هنا رابط صورة مصغرة لمدونتك او موقعك اذا اردت' property='og:image'/>
<meta content='رقم التطبيق الذي حصلنا عليه من قبل' property='fb:app_id'/>
<meta content='اي دي البروفايل الذي حصلنا علية من قبل' property='fb:admins'/>
<meta content='article' property='og:type'/>
<!-- Facebook Comment End-->
ملاحظة : لا تنسى استبدال المعلومات داخل الكود . باللون الاحمر
الان ابحث عن :
<body>
أو
</tbody>
أو
</tbody>
ملاحظة : قوالب بلوجر الحديثة تستخدم </tbody> و القوالب العادية تستخدم </body>
و قم بأضافة الكود التالي بعده مباشرة :
<!-- Facebook Comment Start-->
<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'رقم التطبيق الذى حصلنا عليه',
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/ar_AR/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
<!-- Facebook Comment End-->
<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'رقم التطبيق الذى حصلنا عليه',
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/ar_AR/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
<!-- Facebook Comment End-->
الان ابحث عن الكود التالي :
<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>
<div class='post-footer-line post-footer-line-1'>
ملاحظة : عند البحث ابحث عن السطر الاول او الثاني حتى تجد السطرين بنفس الترتيب بالاعلى .
و ضع بعدة مباشرة الكود التالي :
<!-- Facebook Comment Start-->
<b:if cond='data:blog.pageType == "item"'>
<p align='right'>
<img alt='' class='icon-action' height='83' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS-6OjkNJsnHgl7AEF3kmRMzT3XfWeQWCRKaJ33A0yH2TDUH2D7CNeUS8NMRVYM_r_0dBuVA-riKp9p5SPmx4cpTDL3P4w29mtFObC2BiC6bNTKLgn9J022ymll6ypp4xk0tukTmf8O_hi/s1600/facebook-comment.png' width='300'/></p>
<script src='http://connect.facebook.net/ar_AR/all.js#xfbml=1'/>
<div><fb:comments expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='450'/>
</div>
</b:if>
<!-- Facebook Comment End-->
<b:if cond='data:blog.pageType == "item"'>
<p align='right'>
<img alt='' class='icon-action' height='83' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS-6OjkNJsnHgl7AEF3kmRMzT3XfWeQWCRKaJ33A0yH2TDUH2D7CNeUS8NMRVYM_r_0dBuVA-riKp9p5SPmx4cpTDL3P4w29mtFObC2BiC6bNTKLgn9J022ymll6ypp4xk0tukTmf8O_hi/s1600/facebook-comment.png' width='300'/></p>
<script src='http://connect.facebook.net/ar_AR/all.js#xfbml=1'/>
<div><fb:comments expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='450'/>
</div>
</b:if>
<!-- Facebook Comment End-->
اللى باللون الأحمر ده عرض الصندوق
اخيرا اضغط حفظ ... و قم بمشاهدة موضوعاتك
0 التعليقات:
إرسال تعليق