Здравствуйте друзья, теперь же рассказ будет непосредственно об установке форм комментариев к себе на веб ресурс.
Начнем мы с того что, что-бы установить нам комментарии первым делом зайдем в шаблон, и нажмем изменить HTML. Далее надо будет зажать CTRL+F появится окошко поиска, и первым делом надо будет проверить не подключена ли у нас в нашем шаблоне библиотека jQuery вводим в окошко поиска если есть хорошо, если нету то ищем в поисковой строке тег <head> , и чуть ниже добавляем код, а можно еще добавить оба кода выше тега </head> : <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js' type='text/javascript'/> и сразу после этой строки, дабавляем код переключения наших вкладок выглядит он так.
<script language="javascript" type="text/javascript" src="http://pervushin.com/wp-content/uploads/2012/01/tabs.js"></script> Далее ищем строчку:
<b:includable id='comment-form' var='post'>
И сразу после неё вставляем код:
<div class='section'>
<ul class='tabs'>
<li class='current'>Вконтакте</li>
<li>Facebook</li>
<li>Blogger</li>
<li>Google+</li>
</ul>
<div class='box visible'>
<script src='http://userapi.com/js/api/openapi.js?47' type='text/javascript'/>
<script type='text/javascript'>
VK.init({apiId: 1111111, onlyWidgets: true});
</script>
<div ID='vk_comments'/>
<script TYPE='text/javascript'>
VK.Widgets.Comments("vk_comments", {limit: 30, width: "650", attach: "*"});
</script>
</div>
<div class='box'>
<div id='fb-root'/>
<script>(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/ru_RU/all.js#xfbml=1"appId"=333333333333333";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class='fb-comments' data-href='http://zarnakoom.blogspot.com' data-num-posts='20' data-width='650'>
</div>
</div>
<div class='box'>
(тут вставляется ваш код комментариев блоггер,спросите а где его взять а все очень просто он как раз начинается после строчки <b:includable id='comment-form' var='post'> о которой я писал выше. Но что бы не заморачиваться чуть ниже я приведу полностью код.
</script>
</div>
</div>
<div class='box'><script src='https://apis.google.com/js/plusone.js'/>
<div class='g-comments' data-first_party_property='BLOGGER' data-href='http://zarnakoom.blogspot.com' data-view_type='FILTERED_POSTMOD' data-width='580'>
</div></div>
</div>
</b:includable>
Теперь по строчкам отмеченым красным цветом первая, и вторая строчки вам надо будет вставить свой App ID для Вконтакте, и App ID для Facebook , что мы получили в первой части нашей статьи.В двух других строчках надо будет заменить название моего блога на свой, далее нам нужно будет прописать стили CSS . И так для этого вы можете выбрать как бы вы хотели что бы выглядела ваша форма комментариев, оба кода либо тот, либо другой, вставляются перед тегом </body> . Первый стиль CSS ( код ), и скриншот как он будет выглядеть:
<style>
.box {
display: none;
}
.box.visible {
display: block;
}
.tabs li {
border: 1px solid;
border-radius: 5px 5px 0 0;
cursor: pointer;
float: left;
margin-right: 2px;
text-align: center;
width: 32%;
}
</style>
И второй код, и скриншот:
<style>
ul.tabs {
height: 28px;
line-height: 25px;
list-style: none;
border-bottom: 1px solid #E4E4E4;
}
.tabs li {
display: inline;
font-size: 1em;
outline: 0;
border: 0;
background: #D8D8D8;
color: #555;
padding: 7px 10px;
margin: 20px 0 0 0;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
vertical-align: middle;
cursor:pointer;
}
.tabs li:hover {
background: #2e4c79;
color: #fff
}
.tabs li.current {
background: #2e4c79;
color: #fff
}
.box {
display: none;
}
.box.visible {
display: block;
}
</style>
Теперь как и обещал, выкладываю полностью код комметариев если кому надо.
<div class='section'>
<ul class='tabs'>
<li class='current'>Вконтакте</li>
<li>Facebook</li>
<li>Blogger</li>
<li>Google+</li>
</ul>
<div class='box visible'>
<script src='http://userapi.com/js/api/openapi.js?47' type='text/javascript'/>
<script type='text/javascript'>
VK.init({apiId: 1111111, onlyWidgets: true});
</script>
<div ID='vk_comments'/>
<script TYPE='text/javascript'>
VK.Widgets.Comments("vk_comments", {limit: 30, width: "650", attach: "*"});
</script>
</div>
<div class='box'>
<div id='fb-root'/>
<script>(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/ru_RU/all.js#xfbml=1"appId"=333333333333333";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class='fb-comments' data-href='http://zarnakoom.blogspot.com' data-num-posts='20' data-width='650'>
</div>
</div>
<div class='box' >
<div class='comment-form'>
<b:if cond='data:mobile'>
<h4 id='comment-post-message'>
<a expr:id='data:widget.instanceId + "_comment-editor-toggle-link"' href='javascript:void(0)'> <data:postCommentMsg/>
</a>
</h4>
<p> <data:blogCommentMessage/>
</p> <data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
<b:else/>
<h4 id='comment-post-message'>
<data:postCommentMsg/>
</h4>
<p> <data:blogCommentMessage/>
</p> <data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
</b:if> <data:post.friendConnectJs/> <data:post.cmtfpIframe/><script type='text/javascript'>
BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>', '<data:post.communityId/>');
</script>
</div>
</div>
<div class='box'><script src='https://apis.google.com/js/plusone.js'/>
<div class='g-comments' data-first_party_property='BLOGGER' data-href='http://zarnakoom.blogspot.com' data-view_type='FILTERED_POSTMOD' data-width='580'>
</div></div>
</div>
</b:includable>
Начнем мы с того что, что-бы установить нам комментарии первым делом зайдем в шаблон, и нажмем изменить HTML. Далее надо будет зажать CTRL+F появится окошко поиска, и первым делом надо будет проверить не подключена ли у нас в нашем шаблоне библиотека jQuery вводим в окошко поиска если есть хорошо, если нету то ищем в поисковой строке тег <head> , и чуть ниже добавляем код, а можно еще добавить оба кода выше тега </head> : <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js' type='text/javascript'/> и сразу после этой строки, дабавляем код переключения наших вкладок выглядит он так.
<script language="javascript" type="text/javascript" src="http://pervushin.com/wp-content/uploads/2012/01/tabs.js"></script> Далее ищем строчку:
<b:includable id='comment-form' var='post'>
И сразу после неё вставляем код:
<div class='section'>
<ul class='tabs'>
<li class='current'>Вконтакте</li>
<li>Facebook</li>
<li>Blogger</li>
<li>Google+</li>
</ul>
<div class='box visible'>
<script src='http://userapi.com/js/api/openapi.js?47' type='text/javascript'/>
<script type='text/javascript'>
VK.init({apiId: 1111111, onlyWidgets: true});
</script>
<div ID='vk_comments'/>
<script TYPE='text/javascript'>
VK.Widgets.Comments("vk_comments", {limit: 30, width: "650", attach: "*"});
</script>
</div>
<div class='box'>
<div id='fb-root'/>
<script>(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/ru_RU/all.js#xfbml=1"appId"=333333333333333";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class='fb-comments' data-href='http://zarnakoom.blogspot.com' data-num-posts='20' data-width='650'>
</div>
</div>
<div class='box'>
(тут вставляется ваш код комментариев блоггер,спросите а где его взять а все очень просто он как раз начинается после строчки <b:includable id='comment-form' var='post'> о которой я писал выше. Но что бы не заморачиваться чуть ниже я приведу полностью код.
</script>
</div>
</div>
<div class='box'><script src='https://apis.google.com/js/plusone.js'/>
<div class='g-comments' data-first_party_property='BLOGGER' data-href='http://zarnakoom.blogspot.com' data-view_type='FILTERED_POSTMOD' data-width='580'>
</div></div>
</div>
</b:includable>
Теперь по строчкам отмеченым красным цветом первая, и вторая строчки вам надо будет вставить свой App ID для Вконтакте, и App ID для Facebook , что мы получили в первой части нашей статьи.В двух других строчках надо будет заменить название моего блога на свой, далее нам нужно будет прописать стили CSS . И так для этого вы можете выбрать как бы вы хотели что бы выглядела ваша форма комментариев, оба кода либо тот, либо другой, вставляются перед тегом </body> . Первый стиль CSS ( код ), и скриншот как он будет выглядеть:
<style>
.box {
display: none;
}
.box.visible {
display: block;
}
.tabs li {
border: 1px solid;
border-radius: 5px 5px 0 0;
cursor: pointer;
float: left;
margin-right: 2px;
text-align: center;
width: 32%;
}
</style>
И второй код, и скриншот:
<style>
ul.tabs {
height: 28px;
line-height: 25px;
list-style: none;
border-bottom: 1px solid #E4E4E4;
}
.tabs li {
display: inline;
font-size: 1em;
outline: 0;
border: 0;
background: #D8D8D8;
color: #555;
padding: 7px 10px;
margin: 20px 0 0 0;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
vertical-align: middle;
cursor:pointer;
}
.tabs li:hover {
background: #2e4c79;
color: #fff
}
.tabs li.current {
background: #2e4c79;
color: #fff
}
.box {
display: none;
}
.box.visible {
display: block;
}
</style>
Теперь как и обещал, выкладываю полностью код комметариев если кому надо.
<div class='section'>
<ul class='tabs'>
<li class='current'>Вконтакте</li>
<li>Facebook</li>
<li>Blogger</li>
<li>Google+</li>
</ul>
<div class='box visible'>
<script src='http://userapi.com/js/api/openapi.js?47' type='text/javascript'/>
<script type='text/javascript'>
VK.init({apiId: 1111111, onlyWidgets: true});
</script>
<div ID='vk_comments'/>
<script TYPE='text/javascript'>
VK.Widgets.Comments("vk_comments", {limit: 30, width: "650", attach: "*"});
</script>
</div>
<div class='box'>
<div id='fb-root'/>
<script>(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/ru_RU/all.js#xfbml=1"appId"=333333333333333";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class='fb-comments' data-href='http://zarnakoom.blogspot.com' data-num-posts='20' data-width='650'>
</div>
</div>
<div class='box' >
<div class='comment-form'>
<b:if cond='data:mobile'>
<h4 id='comment-post-message'>
<a expr:id='data:widget.instanceId + "_comment-editor-toggle-link"' href='javascript:void(0)'> <data:postCommentMsg/>
</a>
</h4>
<p> <data:blogCommentMessage/>
</p> <data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
<b:else/>
<h4 id='comment-post-message'>
<data:postCommentMsg/>
</h4>
<p> <data:blogCommentMessage/>
</p> <data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
</b:if> <data:post.friendConnectJs/> <data:post.cmtfpIframe/><script type='text/javascript'>
BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>', '<data:post.communityId/>');
</script>
</div>
</div>
<div class='box'><script src='https://apis.google.com/js/plusone.js'/>
<div class='g-comments' data-first_party_property='BLOGGER' data-href='http://zarnakoom.blogspot.com' data-view_type='FILTERED_POSTMOD' data-width='580'>
</div></div>
</div>
</b:includable>
0 коммент. :