تصفح معرضنا

تصفح و ابحث من خلال معرضنا الخاص واعثر على ضالتك

Showing posts with label شروحات. Show all posts
Showing posts with label شروحات. Show all posts

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



سم الله و الحمد لله و الصلاة و السلام على رسول الله محمد الأمين.السلام عليكم و رحمة الله.
كثير من مدوني بلوجر يسألون عن طريقة تركيب صندوق تعليقات فيسبوك،والكثير ايضا يواجهوا مشاكل  عديدة عند إضافة صندوق تعليقات الفيسبوك إلى مدوناتهم , ولكن اليوم بإذن الله سنشرح طريقة تركيب هذه الإضافة إي إضافة تعليقات فيسبوك العربية على مدونات بلوجر بخطوات بسيطة و بينة.ومضمونه 100 % فلنبدأ على بركة الله

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


طريقة تركيب تعليقات فيس بوك لمدوناتكم

أولا عليك إنشاء تطبيق خاص بك في الفيسبوك .. وذلك عبر الرابط التالي


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


 ثم قم بادخال كلمة التحقق و اضغط زر المتابعة، كما بالصورة الآتية:
الان قم باتباع الخطوات التاليه كما هو موضح في الصوره
كما وضح من خلال الصورة ستدخل رابط مدونتك و رابط اسم النطاق الذي عليه مدونتك، مثلا blogspot.com لمدونات بلوجر التي لا تستعمل اسم نطاق خاص. كذلك ستكون قد نسخت معرف التطبيق الموضح في الصورة لانك ستحتاجه فيما بعد.


ثانيا إضافة الأكواد اللازمة إلى قالب المدونة

   1- من  لوحة التحكم -> قالب -> تحرير HTML 

     2- خذ نسخه احتياطيه لـ قالب المدونه قبل إجراء أية تغييرات 
     3- قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F)
 <html 

 ثم بعده مباشرة أضف الكود التالي :


xmlns:fb='http://www.facebook.com/2008/fbml'


الآن ابحث عن

 <body> 

و بعده مباشرة ألصق الكود الآتي بعد استبدال معرف التطبيق بالأرقام التي نسختها سابقا في الخطوة الأولى قبله : 



<div id='fb-root'/> 
<script> 
    window.fbAsyncInit = function() { 
    FB.init({ 
      appId  : 'ألصق الـ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(&#39;script&#39;); 
      e.src = document.location.protocol +   &#39;//connect.facebook.net/ar_AR/all.js&#39;; 
    e.async = true; 
      document.getElementById(&#39;fb-root&#39;).appendChild(e); 
    }()); 
</script>


بعد ذلك ابحث عن
 </head>
  ثم قبله مباشرة ألصق الكود الآتي: 

<b:if cond='data:blog.pageType == &quot;item&quot;'> <meta expr:content='data:blog.pageTitle' property='og:title'/> <meta expr:content='data:blog.url' property='og:url'/> <b:else/> <meta expr:content='data:blog.title' property='og:title'/> <meta expr:content='data:blog.homepageUrl' property='og:url'/> </b:if> <meta content='عنوان المدونة' property='og:site_name'/> <meta content='http://google.com/help/hc/images/logos/blogger_logo.gif' property='og:image'/> <meta content='معرف التطبيق ID' property='fb:app_id'/> <meta content='معرف حسابك على فيسبوك ID' property='fb:admins'/> <meta content='article' property='og:type'/>


هذا الكود خاص ب Open Graph protocol وهو يتيح لفيسبوك التعامل مع موقعك أو مدونتك كما لو كان صفحة كما صفحات فيسبوك... طبعا لا تنس تغيير ما أشير إليه بالألوان كما يلي:
عنوان المدونة : عنوان مدونتك أو أي اسم تحب أن يظهر على فيسبوك عندما يعجب أحدهم بإحدى تدويناتك.
الرابط البرتقالي : استبدله برابط صورة لشعار مدونتك.
معرف التطبيق ID : طبعا هو نفسه المعرف الذي نسخته في الخطوة الأولى.
معرف حسابك على فيسبوك ID : هو مجموعة أرقام يمثل حسابك على فيسبوك لمعرفته يمكنك زيارة هذا الموضوع. فبحسابك هذا ستكون مدير التعليقات Admin.


ثم ابحث عن <data:post.body/> و بعده مباشرة ألصق الكود الموالي مع تعديل ما لون:
560 استبدلها بالعرض المناسب الذي تريد أن يبدو عليه صندوق تعليقات فيسبوك، و هذا هو الكود الذي يتولى إظهار صندوق التعليقات، فيمكنك إدراجه في أمكنة أخرى غير الذي ذكر بما يناسب مدونتك: 

<b:if cond='data:blog.pageType == &quot;item&quot;'> <div><script src='http://connect.facebook.net/ar_AR/all.js#xfbml=1'/> <fb:comments width='560' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' migrated='1'/> </div> </b:if>


ملاحظة: لمن يملكون قوالب داكنة أو سوداء اللون يمكنه استعمال صندوق تعليقات فيسبوك باللون الأسود و لفعل ذلك نضيفcolorscheme='dark' مباشرة بعد <fb:comments في الكود السابق.

و أخيرا اضغط زر الحفظ و هنيئا لك.

إضافة خاصية البحث المخصص من جوجل على مدونات بلوجر

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





قم بالتوجه إلى موقع Google Custom Search  للتسجيل ،ثم قم بتتبع المراحل الآتية من خلال الصور أسفله.

2.نقوم بملأ الإستمارة التالية كما هو موضح في الصورة وذلك مع تبديل إسم مدونتي بإسم مدونتك وكذلك رابط المدونة الخاص بي الذي يجب أن يكون متبوعا بالرمز(*)


3.عندما تظهر لك الصفحة التالية ،قم بالصغط على الزر Next لأننا سوف نقوم بتنسيق صندوق البحث في ما بعد .
image alt

4.في هذه المرحلة ،قمنا بالحصول على كود صندوق البحث ،لكننا سوف نقوم ببعض التعديلات عليه قبل نسخه وذلك بالضغط على الإختيار look and feel .
image alt
5.في هذه المرحلة سوف نقوم بوضع علامة على  الإختيار "google-hosted page" وذلك للحصول على صفحة النتائج مشابهة لمحرك البحث جوجل.
*يمكننا التعديل علي الستايل الذي نريد أن يظهر به ويمكننا أيضا إضافة صورة لشعار المدونة وذلك من الإختيار Logo .
*نقوم بحفظ التغييرات ثم نضغط على الزر Get code  للحصول على الكود .
image alt
6.سوف نحصل على الكود بهذا الشكل ،نقوم بإضافته من تصميم المدونة ثم إضافة أداة html/javascript
image alt
7.الآن وبعد إضافتك لكود الأداة علي المدونة قم بربط هذه الخاصية بحسابك على جوجل أدسنس وذلك بالضغط على Make money من القائمة الرئيسية  وإتباع المراحل التاليةكما هو موضح في الصورة أسفله .
image alt
8.الآن سوف نقوم بمرحلة مهمة جدا ،ألا وهي إرسال خريطة المدونة لأرشفتها عند محرك البحث المخصص الذي قمنا توا بإنشائه وذلك بالضغط على الإختيار Indexing من القائمة ،ويفضل أن يكون لك حساب مسبقا على موقع google webmaster بنفس البريد الإلكتروني الذي سوف تسجل به في هذا الدرس. فإن لم يكن لك حساب مسبق ،تفضل من هنا  ،ثم قم بإتباع المراحل التالية كما هو موضح في الصورة أسفله .
حيث يكون رابط خريطة المدونة على هذا الشكل،مع تبديل ما لون بالأحمر برابط مدونتك.
http://www.abu-iyad.com/atom.xml?redirect=false&start-index=1&max-results=500
image alt
أتمنى أن تكونو قد إستفدتم من هذا الدرس ،ولأي إستفسارات أو تعقيب على الموضوع ،المورجوا ترك تعليقاتكم لأجيب عليها في أقرب وقت ممكن ،إنشاء الله