المساعد الشخصي الرقمي

مشاهدة النسخة كاملة : شرح طريقة تركيب install نظام تعليقات فيس بوك على البلوجر



Chakira
11-01-2013, بتوقيت غرينيتش 08:03 AM
السلام عليكم ورحمة الله وبركاته



http://external.ak.fbcdn.net/safe_image.php?d=5ce71ae58b240eea4e22270ea1dc11ad&url=http%3A%2F%2Fwww.bloganol.com%2Fwp-content%2Fuploads%2F2014%2F04%2Ffbcommentbox-499x293.png

يمكن لصاحب أي موقع أن يجعل نظام التعليقات الخاص بموقعه هو نظام التعليقات الخاص بالفيس بوك اي مرتبطين, فقبل ان تقرر تركيب install النظام في موقعك يتوجب عليك ان تعرف مميزاته وعيوبه نظام.
المميزات:
- التعليق من خلال حسابك في الفيس بوك ويعني هذا أن التعليقات المزعجة والسبام سيتم القضاء عليها بشكل نهائي.
إمكانية ظهور تعليقك الذي كتبته في الموقع في حسابك في الفيس بوك مباشرة، والجميل في النظام أيضاً إذا قام أحد أصدقائك بالرد عليك تعليقك المنشور في صفحة الفيس بوك فإن تعليق صديقك سيظهر في الموقع وهذه مهمة لصاحب الموقع وأيضا للفيس بوك.
-يوجد لنظام التعليق لوحة تحكم خاصه بالادمن يستطيع التحكم فيها بالتعليقات وكيفية ظهورها ومنع المستخدمين من التعليق في الموقع.
العيوب:
- نظام تعليقات فيس بوك يمكن أن يحرم موقعك من SEO (http://www.googlewd.com/webmaster/2927)
- هذا النظام يسمح لك بالتعليق بإستخدام حسابك في فيسبوك او ياهو ، فكثير من الزوار يفضل كتابة التعليق من خلال كتابة معلوماته مباشرة.

مثال على نتائج الدرس مفصل من هنا: here (http://callphonesfromgmail.blogspot.com/2014/03/call-usa-and-canada-for-free.html)



يرجى توخي الحذر والانتباه لجميع التفاصيل.

الخطوة الأولى: تعطيل التعليقات الافتراضية.
أول شيء يجب القيام به هو تعطيل التعليقات الافتراضية للبلوجر. لأنك لا تريد أن يكون لمدونتك مربعين للتعليقات.
اذهب الى حساب المدونة blog، انتقل : إعدادات> التعليقات
ثم اختر خيار اخفاء التلعيقات ثم انتقل لأسفل وانقر فوق حفظ الإعدادات ، كما في الصورة:
http://www.googlewd.com/wp-content/uploads/2014/04/facebook_blogger1.gif (http://www.googlewd.com/wp-content/uploads/2014/04/facebook_blogger1.gif)
الخطوة الثانية: توليد كود code الفيس بوك الخاص بك App ID:
يجب عليك الآن إنشاء كود code فيس بوك خاص بـ موقعك، وهو سهل جدا:
أدخل الى حسابك في فيس بوك ثم اذهب الى هذه الصفحة (http://developers.facebook.com/setup/). ثم اضغط في الاعلى على my app
وهنا قد تواجه مشكلة صغيرة اذا كان حسابك غير مفعل بالهاتف او بطاقة ائتمان (فقط قم بتفعيله عن طريق اضافة رقم جوالك وستصل رسالة عليها كود code صغير انسخه في المكان الذي يطلب منك).
ثم انقر فوق Set Up New Application
أدخل اسم التطبيق الخاص بك، (يمكنك كتابة أي اسم).
http://www.googlewd.com/wp-content/uploads/2014/04/facebook_blogger5.gif (http://www.googlewd.com/wp-content/uploads/2014/04/facebook_blogger5.gif)
انقر فوق إنشاء التطبيق.
http://www.googlewd.com/wp-content/uploads/2014/04/facebook_blogger6.gif (http://www.googlewd.com/wp-content/uploads/2014/04/facebook_blogger6.gif)
ثم إضغط حفظ البيانات.
وستحصل على هذه البيانات
http://www.googlewd.com/wp-content/uploads/2014/04/facebook_blogger7.gif (http://www.googlewd.com/wp-content/uploads/2014/04/facebook_blogger7.gif)
وما يهمنا في هذه البيانات هو API Key.
الخطوة الثالثة: إضافة الأكواد الى القالب template.
يجب إضافة الأكواد التالية إلى قالب template البلوجر الخاص بك للتأكد من أن مربع التعليقات سيعمل في مدونتك بشكل صحيح:
يرجى الدخول إلى حساب مدونتك مرة أخرى، وانتقل إلى تصميم> تحرير HTML> إختر خيار “توسيع قوالب عناصر واجهة interface المستخدم”:
ثم ابحث عن الكود code التالي:
رمز PHP:

<code style="white-space:nowrap"> <code> <html
</code> </code>

ستجد الكود code في الجزء العلوي. في السطر الثاني او الثالث ، وأضف بعده الكود code التالي:
رمز PHP:

<code style="white-space:nowrap"> <code> xmlns:fb='http://www.facebook.com/2014/fbml'
</code> </code>

ويجب عليك ترك مسافة بينهما
وهذا مثال”صورة”:
http://www.googlewd.com/wp-content/uploads/2014/04/facebook_blogger8.gif (http://www.googlewd.com/wp-content/uploads/2014/04/facebook_blogger8.gif)
ثم ابحث عن
رمز PHP:

<code style="white-space:nowrap"> <code> <body>
</code> </code>

اضف بعده (تحته) الكود code التالي:

رمز PHP:

<code style="white-space:nowrap"> <code> <br />
<div id="fb-root"></div>
<p><script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR APP ID',
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>
</code> </code>

لا تنسى تغيير YOUR APP ID بـ معرف التطبيق الخاص بك (الذي حصلت عليه في الخطوة السابقة).
الان ابحث عن:

رمز PHP:

<code style="white-space:nowrap"> <code> </head>
</code> </code>

اضف قبله (اعلاه) الكود code التالي:
رمز PHP:

<code style="white-space:nowrap"> <code> <b:if cond='data:blog.pageType == &quot;item&quot;'><br /><meta expr:content='data:blog.pageTitle' property='og:title'/><br /><meta expr:content='data:blog.url' property='og:url'/><br /><b:else/><br /><meta expr:content='data:blog.title' property='og:title'/><br /><meta expr:content='data:blog.homepageUrl' property='og:url'/><br /></b:if><br /><meta content='MY-SITE-NAME' property='og:site_name'/><br /><meta content='YOUR-APP-ID' property='fb:app_id'/><br /><meta content='YOUR-FACEBOOK-PROFILE-ID' property='fb:admins'/><br /><meta content='article' property='og:type'/>
</code> </code>

مع مراعات تغيير ما يلي:

تغيير MY-SITE-NAME الى اسم موقعك.
تغيير YOUR-APP-ID بـ رقم APP-ID الخاص بك.
تغيير YOUR-FACEBOOK-PROFILE-ID الى اسمك في فيسبوك.
والآن تم الانتهاء من من إضافة أكواد الفيس بوك للقالب template الخاص بك ، من فضلك لا تلمس أي شيء واستمرفي الخطوة التالية.
الخطوة الرابعة: إضافة مربع التعليقات للقالب template:
ابحث عن الكود code التالي:
رمز PHP:

<code style="white-space:nowrap"> <code> <data:post.body/>
</code> </code>

اضف بعده (تحته) الكود code التالي:
رمز PHP:

<code style="white-space:nowrap"> <code>
<b:if cond='data:blog.pageType == &quot;item&quot;'></p>
<p align='left'><img alt='' class='icon-action' height='51' src='http://www.googlewd.com/wp-content/uploads/2014/04/comments-facebook.gif' width='331'/></p>
<div><fb:comments width='450' expr:title='data:post.title' expr:url='data:post.url' expr:xid='data:post.id'/></div>
<p></b:if>
</code> </code>

يمكنك التحكم في عرض مربع التعليقات من خلال تغيير 450 (بكسل).
مع مراعات تغيير الرابط التالي بالصورة التي تناسب قالب templateك:
http://www.googlewd.com/wp-content/uploads/2014/04/comments-facebook-300x46.gif (http://www.googlewd.com/wp-content/uploads/2014/04/comments-facebook.gif)
رمز PHP:

<code style="white-space:nowrap"> <code> http://www.googlewd.com/wp-content/uploads/2014/04/comments-facebook.gif
</code> </code>

(http://www.googlewd.com/wp-content/uploads/2014/04/comments-facebook.gif)

والآن انقر فوق حفظ قالب template، ثم تحقق مدونتك. وتأكد من انها تعمل تماما.

تحذير: اذ سبق لك تثبيت setup زر facebook like button على مدونتك الرجاء إزالته قبل تطبيق هذا الدرس مفصل.


مثال على النتائج: here (http://callphonesfromgmail.blogspot.com/2014/03/call-usa-and-canada-for-free.html)

صور من لوحة التحكم النظام:
http://www.googlewd.com/wp-content/uploads/2014/04/dashboard_thumb.png (http://www.googlewd.com/wp-content/uploads/2014/04/dashboard_thumb.png)

تم بحمد الله
من اعداد: أبو البراء22 مدير موقع عالم جوجل GOOGLE (http://www.googlewd.com/explanationsr/3182)



الصور المصغرة المرفقة http://www.traidnt.net/vb/attachments/567982d1303000686t-01.png (http://www.traidnt.net/vb/attachments/567982d1303000686-01.png) http://www.traidnt.net/vb/attachments/567983d1303000686t-02.gif (http://www.traidnt.net/vb/attachments/567983d1303000686-02.gif) http://www.traidnt.net/vb/attachments/567984d1303000686t-03.gif (http://www.traidnt.net/vb/attachments/567984d1303000686-03.gif) http://www.traidnt.net/vb/attachments/567985d1303000686t-04.gif (http://www.traidnt.net/vb/attachments/567985d1303000686-04.gif) http://www.traidnt.net/vb/attachments/567987d1303000707t-06.gif (http://www.traidnt.net/vb/attachments/567987d1303000707-06.gif) http://www.traidnt.net/vb/attachments/567989d1303000868t-dashboard_thumb.png (http://www.traidnt.net/vb/attachments/567989d1303000868-dashboard_thumb.png)


https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©

استعمل مربع البحث في الاسفل لمزيد من المواضيع


سريع للبحث عن مواضيع في المنتدى