كيفية أضافة صندوق تعليقات الفيس بوك لمدونتك


نظرا لأن التدوين قائم على العمل شبه الفردى إلا أنى أتمنى أن أرى فى يوم من الأيام أتحاد للمدونيين العرب فالتدوين فعلا مجهود يبذله المدون حتى يحصل على رضا قارىء لا يراه و لا يعرفه و إن كان يتمنى دوما تقدير هذا القارىء و رضاه و يعتبر أضافة قارىء المدونة لتعليق فى مدونته أو أضافة لايك عن طريق أحد مواقع التواصل الأجتماعى هذا هو أفضل تقدير له .
و تختلف أنواع المدونات و أهدافها أختلافا كبيرا فهناك مدونات شخصية بشكل كامل لا يعرض فيها المدون إلا كتاباته هو فقط و أراؤه سواء كانت سياسية أو دينية أو فكرية و تعتبر المدونة أفضل أساليب التعبير عن الذات فى هذه النقطة تحديدا و هذا جربته بنفسى فبمجرد تفريغى لما يعتمل بداخلى فى المدونة يشعرنى بأن هناك من يشاركنى ما أفكر به, و هناك نوع آخر من المدونات هدفها الربح التجارى و هؤلاء يحاولون تلبية طلبات مستخدم الأنترنت و الكتابة أو نشر المواد التى تلاقى رواجا كبيرا بين مستخدمى الأنترنت و فى سبيل ذلك يقوم المدونيين بأضافة بعض الأضافات لمدوناتهم التى تحسن من شكل المدونة و تسهل من أستخدام المدونيين للمدونة.
و فى سبيل هذه الأضافات عانيت كثيرا لأنه فى أغلب الأحيان عندما أحاول أضافة أضافة ما و أبحث عنها على الأنترنت فإن النتائج باللغة العربية غالبا ما تكون مجهود لشخص واحد مشكورا طبعا و قام الكثيرون بالقص و اللصق لعمله حتى بدون الأشارة إليه و نتيجة للتحديثات التى تحدث على الأنترنت و تطبيقاته يوميا فكثير من هذه الأضافات أما أنها لا تعمل أو تحتاج إلى تحديثات و للك فأنى كنت أضطر دوما للبحث فى النتائج باللغة الأنجليزية أو فى المواقع صاحبة الأضافة حتى أحصل على الأضافة فى شكلها السليم و الصحيح .
و لهذا قررت أن أفتتح قسما جديدا بالمدونة سميته ملتقى المدونيين العرب أتمنى أن نتواصل من خلاله قدر الأمكان للوصول بالتدوين لأفضل شكل نتنماه لمدونانتنا و لأفضل تعاون بيننا و سوف أقوم بالترجمة للأضافات من المصادر الأنجليزية مع أضافة المصدر بالأنجليزية غير مترجم لمن يحتاج الرجوع إليه .
و الآن مع أول أضافة للمدونة يحتاجها الجميع و يعانى الجميع من وجودها بشكل غير جيد فى مصدرها أو وجودها على المدونات و المواقع العربية بشكل غير مفصل أو غير سليم نتيجة للتحديثات التى قام بها الفيس بوك و هذه الأضافة هى أضافة صندوق التعليقات الخاص بالفيس بوك لمدونتك .
طبعا الكل عارف أهمية تعليقات المدونة للمدون و يعتبر الكثيرون هذه التعليقات هى المؤشر لنجاح المدونة أو التدوينة و من مشاكل التعليقات هى من يتطفلون بتعليقات غير مرغوب فيها تحتى مسمى غير معروف و لهذا يعتبر التعليق من خلال الفيس بوك ميزة توفر توافر معرف لكل من يقوم بالتعليق فى المدنة أضافة إلى أن أنتشار الفيس بوك كموقع للتواصل الأجتماعى و قيامى الزوار بالتعليق يضمن لك أنتشارا للمدونة لأن تعليقه ينشر فى صفحته بالفيس بوك أيضا أى أن هذه الأضافة تعتبر ممتازة لمدونتك من جميع الأوجه بس المشكلة اللى كانت بتقابل الجميع عند الحصول على هذه الأضافة من موقع الفيس بوك مباشرة فأنك تواجه مشكلة أن التعليق الذى يكتب فى صفحة ينشر فى جميع الصفحات و للتغلب على هذه المشكلة يمكنك أستخدام الطريقة التالية
طبعا فى البداية هتفتح صفحة التصميم بمدونتك بعد كده هتدخل على تحرير HTML ثم توسيع القالب بعد كده أحتياطيا تقوم بعمل حفظ نسخة  للقالب حتى لو حدث خطأ فى أضافات ال HTML   تقوم بأسترجاع القالب مرة أخرى بعد ذلك عن طريق ctrl+f تبحث عن class='comments' و عندما تجدها تضع أسفلها الكود التالى للفصل بين التعليق عن طريق الفيس بوك  و التعليق عن طريق المدونة

<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Comments made with Facebook'>
<img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/>
<fb:comments-count expr:href='data:post.url'/> Comments
</div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Comments from Blogger'>
<img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments
</div><div class='clear'/>
</div>
بعد الأضافة دى أنت كده حددت مكان صندوق التعليقات لكن علشان التعليق ينشر فى  صفحته المخصصة يجب أضافة الأضافة التالية لفصل الصفحات عن بعضها البعض و جعل التعليق مخصصا لصفحته بعد الأضافة السابقة تقوم بأضافة هذه الأضافة

<div class='comments-page' id='fb-comments-page'>
  <b:if cond='data:blog.pageType == &quot;item&quot;'>
   <div id='fb-root'/>
   <fb:comments expr:href='data:post.url' num_posts='2' width='400'/>
  </b:if>
 </div>
<div class='comments comments-page' id='blogger-comments-page'>

طبعا هنا عرض الصفحة 400 تقدر تعدله بالشكل اللى يناسب صفحتك على حسب عرض القالب الخاص بك

بعد ذلك عن طريق ctrl+f تبحث عن <head> و عندما تجدها تضع أسفلها الكود التالى

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='YOUR_FB_ID' property='fb:admins'/>
<script type='text/javascript'>
function commentToggle(selectTab) {
  $(".comments-tab").addClass("inactive-select-tab");
  $(selectTab).removeClass("inactive-select-tab");
  $(".comments-page").hide();
  $(selectTab + "-page").show();
}
</script>
فى السطر الثالث يجب أستبدال YOUR_FB_ID   برقم المعرف الخاص بك على الفيس بوك 

تتبقى الأضافة الأخيرة التى تحسن من شكل صندوق التعليقات الآن  عن طريق ctrl+f تبحث عنcomment#  و عندما تجدها تضع أسفلها الكود التالى

 .comments-page {  background-color: #f2f2f2;}
#blogger-comments-page {  padding: 0px 5px;  display: none;}
.comments-tab { float: left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #f2f2f2;}
.comments-tab-icon { height: 14px;  width: auto;  margin-right: 3px;}
.comments-tab:hover { background-color: #eeeeee;}
.inactive-select-tab { background-color: #d1d1d1;}

الآن قم بالحفظ و فتح أحد صفحات المدونة تجد أنك حصلت على صندوق تعليقات الفيس بوك أسفل صفحتك بشكله الجميل و معه صندوق تعليقات المدونة بدون أى مشاكل بأمر الله.
أتمنى أنى أكون وفقت فى الشرح و لو فى أى أستفسار أما عن طريق الكومنتات أو عن طريق المراسلة
بتمنى من الجميع فى حالة نقل الموضوع الأشارة إلى أنه تم نقله من المدونة هنا
مدونة أنا المصرى
و فى حالة أحتياجك إلى أى أضافة أخرى أرجو مراسلتى و سوف أقوم جاهدا بعرضها لك و أتمنى من الجميع التواصل للوضول بالتدوين لشكله الأفضل و للتعاون قدر المستطاع .

Share

هناك 3 تعليقات:

  1. أزال المؤلف هذا التعليق.

    ردحذف
  2. شكرا على الاضافة لكن برجاء عند البحث فى النقطة الاخيرة لم اجد هذا الامر #comment

    يرجى توضيح هذه التفصيلة وشكرا

    ردحذف