شرح إضافة صندوق تعليقات الفيسبوك بأحدث طريقه لمدونات بلوجر
صندوق التعليقات الخاص بالفيس بوك وإضافته لمدونتك على بلوجر شائع الإستخدام إلى حد ما , وقد قمت بكتابة هذه التدوينه بعد طلب أحد زوار المدونه طريقة وضع وإضافة هذا الصندوق إلى مدونته .
هذا سبب , والسبب الآخر أنى وجدت الكثير من التدوينات الموجوده على الإنترنت والتى تتناول هذه الإضافه بالشرح إما أنها لا تقدم شرحا وافيا وصحيحا , وإما أنها تقدم شرحا قديما ولا يتناسب مع الوضع الحالى من حيث التطورات , كما أن بها بعض العيوب , ولذلك إليكم شرح مفصل لكيفية إضافة صندوق تعليقات الفيسبوك لمدوناتكم على بلوجر .
قم بالضغط على هذا الرابط وسيفتح لك صندوق حوارى يطلب منك أن تدخل سطرين من البيانات
إدخل فى السطر الأول إسم التطبيق وليكن مثلا ( تعليقات الفيسبوك ) أو أى إسم تريده .
إدخل فى السطر الثانى إسم مدونتك بالإنجليزيه ( ar-blogger-tips ) مثلا أو أى إسم تريده .
ثم إضغط إستمرار أو متابعه أو continue تبعا للغة إستخدامك للفيسبوك .
سيظهر لك مربع حوارى آخر به كلمه للتحقق , قم بإدخالها ثم إضغط متابعه .
ستجد أن المربعات الحواريه قد أغلقت وظهرت أمامك الصفحه بها بيانات , وهى ما يهمنا كما فى الصوره .
إفتح تحرير HTML الخاص بقالب مدونتك وقم بتوسيع القالب ثم إتبع الآتى :
إبحث عن الكود التالى
- الكود:
-
<html
أضف بعده مباشرة الكود التالى
- الكود:
-
xmlns:fb='http://www.facebook.com/2008/fbml'
سيصبح الكود بهذا شكل
- الكود:
-
<html xmlns:fb='http://www.facebook.com/2008/fbml' expr:dir='data:blog.languageDirection'
ثم إبحث عن الكود التالى
- الكود:
-
<body>
ضع الكود التالى بعده مباشرة
- الكود:
-
<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
FB.init({xfbml: true, appId: معرف التطبيق });
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'https://connect.facebook.net/ar_AR/all.js'
document.getElementById('fb-root').appendChild(e);
}());
</script>
وقم بإستبدال كلمة معرف التطبيق برقم App ID/API Key المعطى لك فى البيانات التى حصلت عليها سابقا .
بعد ذلك قم بالبحث عن الكود التالى
- الكود:
-
</head>
وأضف قبله مباشرة الكود التالى
- الكود:
-
<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='http://google.com/help/hc/images/logos/blogger_logo.gif' property='og:image'/>
<meta content='معرف التطبيق ID' property='fb:app_id'/>
<meta content='معرف حسابك على فيسبوك ID' property='fb:admins'/>
<meta content='article' property='og:type'/>
قم بتغيير عنوان المدونه وإكتب عنوان مدونتك
قم بتغيير الرابط اللوجو إلى رابط الصوره التى ترمز لمدونتك
قم بتغيير معرف التطبيق ID إلى رقم App ID/API Key المعطى لك فى البيانات السابقه
قم بتغيير معرف حسابك على فيسبوك ID إلى معرف حسابك الحقيقى على الفيس بوك , فمثلا من الممكن أن يكون إسما هكذا
- الكود:
-
https://www.facebook.com/Elmedan.Tv
أو من الممكن أن يكون أرقاما هكذا
- الكود:
-
https://www.facebook.com/profile.php?id=100006891387389
وبعد أن تنتهى من هذه التعديلات قم بالبحث عن الكود التالى
- الكود:
-
<data:post.body/>
ثم أضف بعده مباشرة الكود التالى
- الكود:
-
<b:if cond='data:blog.pageType == "item"'>
<div><script src='http://connect.facebook.net/ar_AR/all.js#xfbml=1'/>
<fb:comments width='560' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' migrated='1'/>
</div>
</b:if>
تستطيع تغيير عرض الصندوق من خلال تغيير الرقم 560 الى العرض المناسب .
وفى النهايه قم بحفظ القالب وتمتع بصندوق تعليقات الفيسبوك على مدونتك .