شرح تركيب تعليقات فيس بوك على مدونة بلوجر 2013

شرح تركيب تعليقات فيس بوك على مدونة بلوجر 2013

من مدونة عالم المعرفة عالم بلا حدود أو قيود ..... السلام عليكم و رحمة الله .

كثير من اصحاب مدونات بلوجر يسألون عن شرح تركيب صندوق 
تعليقات فيس بوك ، ولذلك ساقوم بشرح مبسط 
لعمل صندوق التعليقات " تعليقات الفيس بوك فى مدونات بلوجر "

بخطوات بسيطة . لكن قبل ذلك لا بأس من معرفة بعض مميزات هذه الإضافة و إظهار بعض الصور لها.


مميزات الإضافة:

• تحكم كامل فى التعلقات مثل ازالة تعليق - تعديل تعليق - عمل حظر عضو
• عبر هذه الإضافة سيكون لكل موضوع او تدوينة تعليقاتها الخاصة.
• إمكانية الرد على تعليقات الآخرين و الإعجاب بها.
• إدارة التعليقات و التحكم فيها عبر تصفيتها، محوها أو حظر كاتبيها.
• إمكانية التعليق بحسابات عدة منها فيسبوك و ياهو و هوتميل...
• يمكن إضافة مشرفين لمراجعة التعليقات و هذه ميزة جيدة للمدونات الجماعية.
• إعدادات الإضافة تضم خصائص عدة منها إخفاء أو إظهار صندوق التعليق، التدقيق الإملائي و غيرها...
• و أهم ميزة في اعتقادي هي أن كل من علق فإن تعليقه يظهر على صفحته على فيسبوك مرفقا برابط للموضوع و صويرة في حال أبقى على الإشارة في خانة "نشر في فيسبوك" "Post to Facebook". الشيء الذي سيساعد في إشهار المدونة و نشر مواضيعها...
• و طبعا ميزات عدة نترك لكم فرصة اكتشافها....

صور الاضافة "إضافة تعليقات فيس بوك" :



نبدا الشرح 

عبارة عن خطوتين

الخطوة الأولى : إنشاء تطبيق على الفيس بوك

اذهب إلى صفحة إنشاء تطبيقات فيسبوك ثم أدخل اسم التطبيق مثلا "تعليقاتي" و رابط مدونتك و اضغط الزر الأزرق لإنشاء التطبيق، أدخل كلمة التحقق و اضغط زر المتابعة، في الصفحة الموالية إلى اليسار اضغط رابط لوحة تحكم المطور ثم في الصفحة الموالية اضغط تعديل الإعدادات الموجود في يسار الإطار ثم تابع كما بالصورة الآتية:



الخطوة الثانية: إضافة الأكواد إلى قالب المدونة
اولاً اذاهب الى لوحة تحكم المدونة
2- انقر على قالب ثم تحرير HTML
3- ابحث عن
<div class='comments' id='comments'>

سوف تجده مكرر

ضع تحت كل واحدة الكود التالي

كود:

          <div class='comakauttafb-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Add Comments via Facebook'><img class='comakauttafb-tab-icon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3MVsc1sn3n6ObVlSybLfa9UAsSJn-dQPhlDy76t7UU0B9Z6_FFoNPuWk89Kj3JDGUfg8w97LPtObVz9EXwbCaQyla_7cAUYykch2GrjsKcVHW6ecx3W5H1A4eLo6zcTiLk7rxaJd3qFc/s1600/FACEBOOK.png'/><fb:comments-count expr:href='data:post.url'/> التعليقات</div><div class='comakauttafb-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Add Comments via Blogger'><img class='comakauttafb-tab-icon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhH2ci6g5nYoluGUTKY5cLN6rnPvIZp1GoVPIZFUjGPmWnC9bBpbrcqmVyDCcZ4cD7tIULutiDxQ9ETdB13pJqTtzcTfEK_DfiWX6G_bBBsCWNvN-7PVJj3w_EDoYrQbHX7n5A6Q_gjH4/s1600/BLOGGER.png'/> <data:post.numComments/> التعليقات</div><div class='clear'/></div><div class='comakauttafb-page' id='fb-comments-page'><b:if cond='data:blog.pageType == &quot;item&quot;'><div id='fb-root'/><fb:comments color='dark' expr:href='data:post.url' num_posts='10' width='680'/></b:if></div><div class='comments comakauttafb-page' id='blogger-comments-page'><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><script src='http://code.jquery.com/jquery-latest.js'/><meta content='additions.blogger' property='fb:admins'/><script type='text/javascript'>function commentToggle(selectTab) {$(&quot;.comakauttafb-tab&quot;).addClass(&quot;inactive-select-tab&quot;);$(selectTab).removeClass(&quot;inactive-select-tab&quot;);$(&quot;.comakauttafb-page&quot;).hide();$(selectTab + &quot;-page&quot;).show();}</script><style type='text/css'>.comakauttafb-page, .comakauttafb-tab {-moz-border-radius:10px 10px 10px 10px; -webkit-border-radius:10px 10px 10px 10px; border-right:5px solid #ccc; border-top:3px solid #ccc; border-bottom:3px solid #ccc; border-right:5px solid #ccc}.comakauttafb-page {background:transparent;);margin-top:8px;}#blogger-comments-page {padding:0px 5px;display:none;}.comakauttafb-tab {text-shadow:0px 1px 1px #fff;color:#000;float:right;padding:5px;margin-right:5px;cursor:pointer;background:transparent;);-o-transition:.5sease-out;-moz-transition:.5s ease-out;-webkit-transition:.5s ease-out}.comakauttafb-tab-icon {height:16px;width:16px;margin-right:5px;}.comakauttafb-tab:hover {background:rgba(219,219,219,.8);}.inactive-select-tab {background:rgba(255,255,255,.4);}.inactive-select-tab, .comakauttafb-tab:hover {box-shadow:-1px -1px 1px #fff,1px 1px 1px #fff,1px 1px 5px #000;-moz-box-shadow:-1px -1px 1px #fff,1px 1px 1px #fff,1px 1px 5px #000;-webkit-box-shadow:-1px -1px 1px #fff,1px 1px 1px #fff,1px 1px 5px #000}</style>

الان نأتي الى الشرح

1- الذي باللون الاحمر هو العرض غير باللون الرقم فقط ليناسب مدونتك

تستطيع ايضاً تغيير الالون ..


اضغط حفظ مع تحيات

مدونة عالم المعرفة عالم بلا حدود أو قيود