طريقة إضافة صندوق تفضيلات الفيسبوك مرفوق بزرالإعجاب على مدونتك بالبوجر

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

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

- ستمكنك هذه الإضافة المميزة من زيادة عدد مشاهدات مواضيعك وذلك بفضل نشرها فى الفيسبوك من خلال الضغط على زر الإعجاب لها.

- هذه الإضافة لا تظهر إلا بعد قراءة جزء مهم من الموضوع الذي دخل له الزائر.

- إمكانية تصغير الإضافة ومنعها من إخفاء عناصر المدونة بالضغط على علامة (-) بأعلى-يمين الصندوق.

لنبدأ في عرض كيفية إضافتها على مدونتك.

المرحلة الأولى : إنشاء تطبيق على الفيسبوك (لنسخ App ID)

1- قم بتسجيل دخولك على الفيسبوك، ثم اذهب إلى تطبيقات الفيسبوك.
2- و اضغط على زر إنشاء تطبيق / "Create New App"
3- أكتب اسم التطبيق الذي تريد إنشاءه في الخانة المخصص لها مثلا "َAfkarPro Recommendation Bar" كما هم موضح بالصورة، ثم اضغط على متابعة / "continue".

4- أدخل إلى تعديل التطبيق ثم اضغط على تسجيل دخول المواقع / "Website with Facebook Login" و أدخل رابط مدونتك ثم قم بحفظ التغييرات.

5- قم بنسخ "App ID" واحتفظ به سنحتاجه في المرحلة المقبلة.

المرحلة الثانية : إضافة التطبيق على مدونتك

1- اتجه إلى لوحة تحكم البلوجر الخاصة بك و اضغط على تصميم من القائمة الجانبية، و اضغط على تعديل القالب "Edit HTML".
*لا تنسى أخذ نسخة احتياطية من القالب
2- اضغط على CTRL+F للبحث عن السطر التالي :

<html

3- وألصق بعد مباشرة السطر التالي :

xmlns:fb='http://ogp.me/ns/fb#'

4- بعد ذلك اضغط على CTRL+F للبحث عن السطر التالي :

<body

5- وقم بلصق الكود التالي بعد غلق وسم body مباشرة :

<div id='fb-root'/>
<script>
//Facebook Recommendation bar by www.afkarpro.blogspot.com
//<![CDATA[
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=***************";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]>
</script>
<b:if cond='data:blog.pageType == "item"'><b:if cond='data:blog.pageType != "static_page"'><div style='z-index:999999; position:absolute;'>
<fb:recommendations-bar action='like' max_age='0' num_recommendations='2' read_time='10' side='right' site='http://www.afkarpro.blogspot.com' trigger='50%'/></div>
</b:if></b:if>

6- لنقم ببعض التعديلات الضرورية :

قم باستبدال مايلي :

اللون الأزرق : استبجله بــ "App ID" الذي حصلنا عليه في المرحلة السابقة.
اللون الأخضر : استبدله برابط مدونتك.

تعديلات اختيارية (يمكنك التعديل عليها كما تشاء) :

num_recommendations='2' : عدد الموضيع التي تريد عرضها وهنا قيمتها 2.
read_time='10' : المدة التي ستمر قبل ظهور الإضافة، و حددت قيمتها هنا في 10 ثواني.
side='right' : مكان عرض الإضافة على اليمين أو غلى اليسار و قيمتها هنا هو right يمكنك تغييرها بــ left.
trigger='50%' : النسبة التي يجب على القارئ مشاهدتها من الصفحة لتظهر بعدها الإضافة.
en_US : اللغة التي تظهر بها الإضافة وهنا حددنا اللغة بالإنجليزية، ويمكنك تغييرها لـ ar_AR لتظهر بالعربية.

7- في الأخير قم بحفظ القالب.

*! أتمنى أن أكون قد وفقت في إيصال المعلومة لكم بدون تعقيدات ;)
و إذا واجهت أي مشكل أو لديك أي استفسار لا تتردد في طرح سؤالك وذلك بالرد بتعليق، سأجيب بالتأكيد! إن شاء الله ...

و دمتم في رعاية الله وحفضه