شرح إضافة تعليقات الفيسبوك إلى مدونتك


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

 <div class='comments' id='comments'>

* سوف تجده مكرر مرتين ، لهذا ضع أسفل كل واحد منهما هذا الكود :

  <div class='comakauttafb-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Add Comments via Facebook'>
<img class='comakauttafb-tab-icon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBeSugPV4n1IZ4rdxc250NQpUN0Wb7T3ucY4rYJEX5mY-DmMbSEwLDYsDmx_NiGOf97MYYY10-_EqWGsVKy532M3FVrQ0ygr8pvqj02R3SGkeFn3AOU_DTMk8Igu7alkd6CwPnxRW1j34/s1600/FACEBOOK.png'/>
<fb:comments-count expr:href='data:post.url'/> Comments
</div>
<div class='comakauttafb-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Add Comments via Blogger'>
<img class='comakauttafb-tab-icon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp9Tytk5Ukjt1kQLQa-SHlHaNFhXQf28jo3PUrRVL6lrHCDaDPT3vLfOBDwEtdMDnCII9k9R7iRsrzZwZ594D39sBkmg-sbfLv7uxrVb0r2e0aMA31o0dw58vwTOg9qT9VWqWhwkc0-V8/s1600/BLOGGER.png'/> 
<data:post.numComments/> Comments
</div><div class='clear'/>
</div>
<div class='comakauttafb-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='fb-root'/>
<fb:comments color='dark' expr:href='data:post.url' num_posts='10' width='680'/>
</b:if>
</div>
<div class='comments comakauttafb-page' id='blogger-comments-page'>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='potter182' property='fb:admins'/>
<script type='text/javascript'>
function commentToggle(selectTab) {
$(&quot;.comakauttafb-tab&quot;).addClass(&quot;inactive-select-tab&quot;);
$(selectTab).removeClass(&quot;inactive-select-tab&quot;);
$(&quot;.comakauttafb-page&quot;).hide();
$(selectTab + &quot;-page&quot;).show();
}
</script>
<style type='text/css'>.comakauttafb-page, .comakauttafb-tab 
{-moz-border-radius:10px 10px 10px 10px; -webkit-border-radius:10px 10px 10px 10px; border-left:5px solid #ccc; border-top:3px solid #ccc; border-bottom:3px solid #ccc; border-right:5px solid #ccc}.comakauttafb-page 
{background:transparent;);margin-top:8px;}#blogger-comments-page 
{padding:0px 5px;display:none;}.comakauttafb-tab {text-shadow:0px 1px 
1px 
#fff;color:#000;float:left;padding:5px;margin-right:5px;cursor:pointer;background:transparent;);-o-transition:.5s
ease-out;-moz-transition:.5s ease-out;-webkit-transition:.5s 
ease-out}.comakauttafb-tab-icon 
{height:16px;width:16px;margin-right:5px;}.comakauttafb-tab:hover 
{background:rgba(219,219,219,.8);}.inactive-select-tab 
{background:rgba(255,255,255,.4);}.inactive-select-tab, 
.comakauttafb-tab:hover {box-shadow:-1px -1px 1px #fff,1px 1px 1px 
#fff,1px 1px 5px #000;-moz-box-shadow:-1px -1px 1px #fff,1px 1px 1px 
#fff,1px 1px 5px #000;-webkit-box-shadow:-1px -1px 1px #fff,1px 1px 1px 
#fff,1px 1px 5px #000}</style>

قم بحفظ التغييرات . و بهذا يكون الدرس قد انتهى ، نلتقي في درس اخر ان شاء الله .




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

إرسال تعليق