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

بسم الله الرحمن الرحيم والصلاة والسلام على أشرف المرسلين سلام الله عليكم اليوم سنتحدث عن طريقة اضافة صندوق تعليقات الفيس بوك بجانب تعليقات بلوجر بطريقة سهلة وبدون تعقيد وأكواد كثيرة وبشكل جميل ومميز تابع معنا :-

خطوات الاضافة :-

1- بعد الدخول على قالب  من لوحة التحكم ثم تحرير html

2- اضغط من الكيبورد ctrl + f ثم اكتب هذا الكود وابحث عنه

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

3- ثم انسخ هذا الكود وضعه أسفله

<div class='comakauttafb-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' title='Add Comments via Facebook'> <i class='fa fa-facebook'/><fb:comments-count expr:href='data:post.url'/> التعليقات</div><div class='comakauttafb-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle("#blogger-comments");' title='Add Comments via Blogger'><i class='fa fa-btc'/><data:post.numComments/> التعليقات</div><div class='clear'/><div class='comakauttafb-page' id='fb-comments-page'><b:if cond='data:blog.pageType == "item"'><div id='fb-root'/><fb:comments color='dark' expr:href='data:post.url' num_posts='10' width='100%'/></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='additions.blogger' property='fb:admins'/><script type='text/javascript'>function commentToggle(selectTab) {$(".comakauttafb-tab").addClass("inactive-select-tab");$(selectTab).removeClass("inactive-select-tab");$(".comakauttafb-page").hide();$(selectTab + "-page").show();}</script><style type='text/css'>.comakauttafb-page, .comakauttafb-tab {-moz-border-radius:5px; -webkit-border-radius:5px; }.comakauttafb-page {background:transparent;);margin-top:8px;}#blogger-comments-page {padding:0px 5px;display:none;}.comakauttafb-tab { color: #fff; float: right; padding: 5px 15px; margin-right: 5px; cursor: pointer; -o-transition: .5sease-out; -moz-transition: .5s ease-out; -webkit-transition: .5s ease-out; } #fb-comments{ background: #4F79BC; } #blogger-comments{ background: #b84a01; } .comakauttafb-tab i{ padding-left: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 { -webkit-box-shadow: 0px 0px 1px 1px #333; -moz-box-shadow: 0px 0px 1px 1px #333; box-shadow: 0px 0px 1px 1px #333; } </style> <a name='comments'/> <b:if cond='data:post.allowComments'> <h4><data:post.commentLabelFull/>:</h4><b:if cond='data:post.commentPagingRequired'> <span class='paging-control-container'> <b:if cond='data:post.hasOlderLinks'> <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>   <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>   </b:if> <data:post.commentRangeText/> <b:if cond='data:post.hasNewerLinks'>   <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>   <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a> </b:if> </span> </b:if> <div expr:id='data:widget.instanceId + "_comments-block-wrapper"'><dl expr:class='data:post.avatarIndentClass' id='comments-block'> <b:loop values='data:post.comments' var='comment'><dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'> <b:if cond='data:comment.favicon'> <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/> </b:if> <a expr:name='data:comment.anchorName'/> <b:if cond='data:blog.enabledCommentProfileImages'> <data:comment.authorAvatarImage/> </b:if> <b:if cond='data:comment.authorUrl'> <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a> <b:else/> <data:comment.author/> </b:if> <data:commentPostedByMsg/> </dt><dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'> <b:if cond='data:comment.isDeleted'> <span class='deleted-comment'><data:comment.body/></span> <b:else/> <p><data:comment.body/> </p></b:if> </dd> <dd class='comment-footer'> <span class='comment-timestamp'> <a expr:href='data:comment.url' title='comment permalink'> <data:comment.timestamp/> </a> <b:include data='comment' name='commentDeleteIcon'/> </span> </dd> </b:loop> </dl></div><b:if cond='data:post.commentPagingRequired'> <span class='paging-control-container'> <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'> <data:post.oldestLinkText/> </a> <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'> <data:post.olderLinkText/> </a>   <data:post.commentRangeText/>   <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'> <data:post.newerLinkText/> </a> <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'> <data:post.newestLinkText/> </a> </span> </b:if> <p class='comment-footer'><b:if cond='data:post.embedCommentForm'> <b:if cond='data:post.allowNewComments'> <b:include data='post' name='comment-form'/> <b:else/> <data:post.noNewCommentsText/> </b:if> <b:elseif cond='data:post.allowComments'/> <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a> </b:if> </p></b:if> <b:if cond='data:showCmtPopup'> <div id='comment-popup'> <iframe allowtransparency='true' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'> </iframe> </div></b:if> <div id='backlinks-container'> <div expr:id='data:widget.instanceId + "_backlinks-container"'> <b:include cond='data:post.showBacklinks' data='post' name='backlinks'/> </div></div></div>

4- ثم قم بحفظ القالب ومبروك عليك ظهور تعليقات الفيس وبلوجر معا شكل جميل ومنسق وتم تعديل العرض ليصبح متجاوب معك على اي شاشة كانت 

الى هنا ينتهي موضوعنا نتمنى أن ينال اعجابكم وأي مشكلة تواجهك أو هناك خطأ ظهر لكم اخبرونى في تعليق وسنرد عليكم بطريقة الحل . ولا تنسى ان تشارك هذا الموضوع مع أصدقائك والاعجاب به والى اللقاء في موضوع جديد ☺