вторник, 13 декабря 2011 г.

Facebook + Vkontakte + Blogger comments in one (English version)

So today i'll teach you how to create 3 coments in one!


So first we must rigister Facebook and Vkontakte API!
Let's start wirh Facebook (it's Harder))
  1. Open this LINK http://developers.facebook.com/
  2. Then you must confirm your facebook account with mobile or credit card
  3. After you confirm you go here https://developers.facebook.com/ajax/create
  4. Put here what you want App Namespace: and App Display Name:
  5. Super! Now you have App ID/API Key
For example mine, if you have any questions, how to create your API in Facebook, ask me i'll help you asa fast as i can, cause first time i have problems too! First when i send SMS code, i wai 4-6 hours when they send me this code.
So if all good copy this API id .









So We have Facebook API, lets take vkontakte API.


  1. First go to this page http://vkontakte.ru/developers.php?p=Comments
  2. Enter the site name and address of your primary domain will register automatically, click save.
  3. So now ypu have Vkontakte API id for comments, see it on picture
So with vkontakte not so much problems, but you must rigister her first if you wasn't register here later, cause it famous russian social and some europeans!
To register you must go there vk.com and create your profile account. If you have some questions, ask me i'll answer you as fast as i can!)







So we are here because we want this)


  1. Open the 'Design' page in your blogger
  2. Open 'Change HTML'
  3. Expand Widget Templates here must be checked
  4. So lets edit or code!)

search for
<head>
and after it add the following code,
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta expr:content='data:blog.homepageUrl' property='og:url'/>
</b:if>
<meta content='MY-SITE-NAME' property='og:site_name'/>
<meta content='http://google.com/help/hc/images/logos/blogger_logo.gif' property='og:image'/>
<meta content='YOUR-APP-ID' property='fb:app_id'/>
<meta content='YOUR-FACEBOOK-PROFILE-ID' property='fb:admins'/>
<meta content='article' property='og:type'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
(function($) {
$(function() {
$(&#39;ul.tabs&#39;).delegate(&#39;li:not(.current)&#39;, &#39;click&#39;, function() {
$(this).addClass(&#39;current&#39;).siblings().removeClass(&#39;current&#39;)
.parents(&#39;div.section&#39;).find(&#39;div.box&#39;).hide().eq($(this).index()).fadeIn(150);
})
})
})(jQuery)
</script>
<script src='http://userapi.com/js/api/openapi.js?45' type='text/javascript'/>
<script type='text/javascript'>
VK.init({apiId: YOUR_VKONTAKTE API_ID , onlyWidgets: true});
</script>
<style>
.section123 {
width: 490px;
background: #FFFFFF;
margin: 0 0 30px;
}
ul.tabs {
height: 28px;
line-height: 25px;
list-style: none;
border-bottom: 1px solid #DDD;
background: #FFF;
}
.tabs li {
float: left;
display: inline;
margin: 0 1px -1px 0;
padding: 0 13px 1px;
color: #777;
cursor: pointer;
background: #FFFFFF;
border: 1px solid #E4E4E4;
border-bottom: 1px solid #F9F9F9;
position: relative;
}
.tabs li:hover,
.vertical .tabs li:hover {
color: #F70;
padding: 0 13px;
background: #FFFFDF;
border: 1px solid #FFCA95;
}
.tabs li.current {
color: #444;
background: #EFEFEF;
padding: 0 13px 2px;
border: 1px solid #D4D4D4;
border-bottom: 1px solid #EFEFEF;
}
.box {
display: none;
border-top: 1px solid #D4D4D4;
border-width: 0 1px 1px;
background: #ffffff;
padding: 0 12px;
}
.box.visible {
display: block;
}
.section.vertical {
width: 440px;
border-left: 160px solid #FFF;
}
.vertical .tabs {
width: 160px;
float: left;
display: inline;
margin: 0 0 0 -160px;
}
.vertical .tabs li {
padding: 0 13px;
margin: 0 0 1px;
border: 1px solid #E4E4E4;
border-right: 1px solid #F9F9F9;
width: 132px;
height: 25px;
}
.vertical .tabs li:hover {
width: 131px;
}
.vertical .tabs li.current {
width: 133px;
color: #444;
background: #EFEFEF;
border: 1px solid #D4D4D4;
border-right: 1px solid #EFEFEF;
margin-right: -1px;
}
.vertical .box {
border-width: 1px;
}
</style>
Then search for this code  
 <b:includable id='comment-form' var='post'>
<div class='comment-form'>
<a name='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>
</b:includable>


And change it on this code

<b:includable id='comment-form' var='post'>
<div class='section123'>
<ul class='tabs'>
<li class='current'>Comments</li>
<li>Vkontakte</li>
<li>Facebook</li>
</ul>
<div class='box visible'>
<div class='comment-form'>
<a name='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'>
<div class='comment-form'>
<div id='vk_comments'/>
<script type='text/javascript'>
VK.Widgets.Comments(&quot;vk_comments&quot;, {limit: 10, width: &quot;496&quot;, attach: &quot;*&quot;});
</script>
</div>
</div>
<div class='box'>
<div class='comment-form'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div><fb:comments expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='450'/></div>
</b:if>
</div>
</div>
</div>
</b:includable>
search for 
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'> 
or 
<body>
and after it add the following code,
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR APP ID',
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('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
So thats is ALL!!)) Now yo have comment form like mine!
But CHANGE RED MARKED PLACES!!! 
  1. change YOUR APP ID to your facebook app id ( you got it in the previous step ).
  2. Change MY-SITE-NAME with the one you want to appear when a user likes a page. (Gil likes Helping on Facebook)
  3. Change YOUR-APP-ID with your facebook application ID number.
  4. Change YOUR-FACEBOOK-PROFILE-ID with your own facebook user profile ID.
  5. Change YOUR_VKONTAKTE API_ID  with your vkontacte application ID number.






Автор: на 05:36

13 комментариев:

  1. Unknown30 марта 2012 г. в 13:55

    111

    ОтветитьУдалить
  2. Volos_8618 мая 2012 г. в 07:38

    таки с помощью какой-то матери, матюков, я его прикрутил....
    Теперь вопрос, как выставить дефолтный таб????

    ОтветитьУдалить
    Ответы
    1. Unknown20 мая 2012 г. в 11:55

      Там код изменился у них с того момента, будет время перепишу все это.

      Удалить
    2. Volos_8620 мая 2012 г. в 22:54

      не, ну всё работает. Из-за это спасибо. Это единственная нормальная инструкция которую я нашел.

      Удалить
    3. Unknown23 мая 2012 г. в 01:21

      Спасибо, позже на русском напишу, как буду делать

      Удалить
    4. Volos_8623 мая 2012 г. в 02:16

      кстати есть еще одна тема. Коментарии блоггера идут вверх, а соц сетей в низ.
      Это так задумано?, или тоже подправите в русской версии?

      Удалить
    5. Unknown23 мая 2012 г. в 03:27

      На это честно говоря не обращал внимания, но посмотрю, тут придется тогда меня комменты блоггера, так как соц сетей поменять нельзя.

      Удалить
    6. Volos_8623 мая 2012 г. в 03:53

      я так понял, нужно чтобы комментарии блоггера, были под формой ввода комментария, в то время как сейчас, она сама просто сдвигается вниз

      Удалить
  3. Анонимный10 ноября 2012 г. в 05:14

    Спасибо! Все понятно написано и получилось сразу!
    Интересно, возможно ли поменять местами системы комментирования:
    Напр. сперва Фейсбук, затем Вконтакте, и затем блоггер?
    Или хотя бы поменять местами ФБ и ВК?

    ОтветитьУдалить
  4. Ваван16 ноября 2012 г. в 22:33

    Пожалуй было бы интересно знать как поменять местами социалки? Напр. мне важно, чтобы Фейсбук был первым. А вообще хороша статья, первая, где все понятно!

    ОтветитьУдалить
  5. Александр18 февраля 2013 г. в 00:24

    ковырялся 3 часа, в итоге испортил шаблон. Вернул все назад и вот пока сделал так: http://www.надежный-выбор.рф/
    Выбор между вконтакте и фэйсбук. а как блоггер прикрутить отдельно не могу понять, съезжает все или не дает сохранить шаблон...

    ОтветитьУдалить
  6. senol21 марта 2023 г. в 22:34

    betmatik
    kralbet
    betpark
    mobil ödeme bahis
    tipobet
    slot siteleri
    kibris bahis siteleri
    poker siteleri
    bonus veren siteler
    5Qİ2A6

    ОтветитьУдалить
  7. Анонимный18 ноября 2024 г. в 23:33

    شركة تنظيف شقق بجازان 8x1DJfAuF1

    ОтветитьУдалить

Подписаться на: Комментарии к сообщению (Atom)