Будь в курсе событий!

24.08.2013

Установка на blogger, формы комментариев ВКонтакте,Facebook,Google+ .Часть вторая

By andrey августа 24, 2013 SEO и Продвижение Leave a Comment
Здравствуйте друзья, теперь же рассказ будет непосредственно об установке форм комментариев к себе на веб ресурс.
Начнем мы с того что, что-бы  установить нам комментарии первым делом зайдем в шаблон, и нажмем изменить 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(&quot;vk_comments&quot;, {limit: 30, width: &quot;650&quot;, attach: &quot;*&quot;});
</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 = &quot;//connect.facebook.net/ru_RU/all.js#xfbml=1&quot;appId&quot;=333333333333333&quot;;
fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</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(&quot;vk_comments&quot;, {limit: 30, width: &quot;650&quot;, attach: &quot;*&quot;});
</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 = &quot;//connect.facebook.net/ru_RU/all.js#xfbml=1&quot;appId&quot;=333333333333333&quot;;
fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</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 + &quot;_comment-editor-toggle-link&quot;' 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(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);
</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>


<style>

0 коммент. :

© 2012-2017 Cash's from program