درسنا اليوم سنتطرق فيه لشرح إضافة منتشرة في معظم المدونات، إلى أنه مع الأسف قليل هم من يقومون بشرحها، إنها إضافة صندوق تفضيلات الفيسبوك (الإضافة موضحة على الصورة).
مميزات الإضافة :
- ستمكنك هذه الإضافة المميزة من زيادة عدد مشاهدات مواضيعك وذلك بفضل نشرها فى الفيسبوك من خلال الضغط على زر الإعجاب لها.
- هذه الإضافة لا تظهر إلا بعد قراءة جزء مهم من الموضوع الذي دخل له الزائر.
- إمكانية تصغير الإضافة ومنعها من إخفاء عناصر المدونة بالضغط على علامة (-) بأعلى-يمين الصندوق.
لنبدأ في عرض كيفية إضافتها على مدونتك.
المرحلة الأولى : إنشاء تطبيق على الفيسبوك (لنسخ App ID)
1- قم بتسجيل دخولك على الفيسبوك، ثم اذهب إلى تطبيقات الفيسبوك.
2- و اضغط على زر إنشاء تطبيق / "Create New App"
3- أكتب اسم التطبيق الذي تريد إنشاءه في الخانة المخصص لها مثلا "َAfkarPro Recommendation Bar" كما هم موضح بالصورة، ثم اضغط على متابعة / "continue".
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>
<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- في الأخير قم بحفظ القالب.
*! أتمنى أن أكون قد وفقت في إيصال المعلومة لكم بدون تعقيدات ;)
و إذا واجهت أي مشكل أو لديك أي استفسار لا تتردد في طرح سؤالك وذلك بالرد بتعليق، سأجيب بالتأكيد! إن شاء الله ...
و إذا واجهت أي مشكل أو لديك أي استفسار لا تتردد في طرح سؤالك وذلك بالرد بتعليق، سأجيب بالتأكيد! إن شاء الله ...
و دمتم في رعاية الله وحفضه
التعلـيــقــات : 0
إرســــــال تعليــــق