الاثنين، 1 يوليو، 2013

اضافه صندوق تعليقات الفيس بوك الى بلوجر

السلام عليكم ورحمه الله وبركاته

هل انتم تتطلعون الى اضافه صندوق تعليقات الفيس الى مدونتكم ؟
موقع الفيس بوك اطلق العديد من المميزات فى عام 2009 عن طريق ما يسمى بـ (Facebook developers ) ومن اهمها اضافه تعليقات الفيس بوك الى مدونتك ومن اهم مميزاتها زياده ترافيك المدونه وامكانيه تعليق الزائرين بكل سهوله بدلا من الدخول فى تعليقات المدونه وحتى لا اُطيل عليكم اليكم الخطوات لتركيبها :
أولا : انشاء تطبيق على الفيس بوك من خلال الذهاب الى  Facebook developers page
ثم ادخل اسم للتطبيق مثل (وسيله)


ثم بعد ذلك املىء الحقول المطلوبه واكمل الخانات وادخل اسم النطاق الخاص وحتى اذا كان لديكم تكتب اسم المدونه ثم تتبعها blogspot. 

اضافه صندوق تعليقات الفيس بوك الى بلوجر

وعندما تنتهى اضغط حفظ ثم قم بنسخ الـ APP ID
وهكذا نكون انتهينا من عمل التطبيق وطريقه تركيبه على المدونه او الموقع :

وانا انصح دائما بعمل نسخه احتياطيه من القالب 

  1. نذهب الى المدونه
  2. ثم اضغط على القالب
  3. ثم قم بالضغط على تحرير HTML
  4. ثم اضغط على CTRL+F داخل المربع الذى به الاكواد وليس خارجه
ثم تبحث عن هذا الكود  html> وهو دائما فى بدايه الصفحه لا داعى للبحث

اضافه صندوق تعليقات الفيس بوك الى بلوجر

ثم تضغط مسافه (SPACE) بعده مباشره وتضع هذا الكود بعده مباشرة
xmlns:fb='http://www.facebook.com/2008/fbml'
 ليصبح هكذا
اضافه صندوق تعليقات الفيس بوك الى بلوجر

ثم نبحث عن الكود <body> 
وبعده مباشرة نضع هذا الكود

<body><div id='fb-root'/><script>    window.fbAsyncInit = function() {    FB.init({      appId  : &#39;YOUR_APP_ID&#39;,      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/en_US/all.js&#39;;    e.async = true;      document.getElementById(&#39;fb-root&#39;).appendChild(e);    }());</script>

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

ثم بعد ذلك ابحث عن هذا الكود </head>
وفوقه مباشرة ضع هذا الكود

<meta expr:content='data:blog.pageTitle' property='og:title'/><meta expr:content='data:blog.url' property='og:url'/><meta content='waseeela' property='og:site_name'/><meta content='YOUR_BLOG_LOGO_IMAGE_LINK' property='og:image'/><meta content='YOUR_APP_ID ' property='fb:app_id'/><meta content='http://www.facebook.com/waseeela' property='fb:admins'/><meta content='article' property='og:type'/>

وقم باستبدال ما هو باللون الاحمر واذا لم تكن لديك لينك اللوجو التى تستخدمه فى المدونه فتجاهل هذا الكود YOUR_BLOG_LOGO_IMAGE_LINK


ثم نبحث عن هذا الكود  <data:post.body/>
ثم فوقه مباشرة تضع هذا الكود

<b:if cond='data:blog.pageType == &quot;item&quot;'><div style='padding:20px 0px 5px 0px; margin:0px 0px 0px 0px;'><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><div> <fb:comments colorscheme='light' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='550'/></div><div style='color:#fff; background-color:#3B5998;border: solid 1px #ddd; font-size:10px; padding:3px; width:550px;'>Facebook Comments Plugin Enhanced by <a href='http://waseeela.blogspot.com/' target='_blank'><b>waseeela</b></a></div></div></b:if>

واذا كنت تريده داكن اللون فعليك بتغير الكود من "LIGHT" الى "DARK"
والكود 550 مسئول عن عرض ومساحه الصندوق

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


MOHAMED TAHSEEN

محمد تحسين طالب فى كليه تجاره. أهتم بعالم المعرفه والتكنولوجيا الحديثه والمتطوره وأمل ان اكون ذات يوما من المبرمجين والمسوقين الالكترونين فى مجال الانترنت ونحاول جاهدين فى مدونه وسيله ان نقدم كل ما يخص المعرفه والتكنولوجيا فتابعونا على المواقع الاجتماعيه ليصلكم كل تحديثاتنا

0 التعليقات :

إرسال تعليق

 
: POWERED BY Powered By Blogger Built with jQuery Built with CSS3
Re-Designed by Mohamed Tahseen