Tolga GönüL : Blogger, Twitter, Facebook Sekmeli Yorum Formu

blogger siteniz için güzel bir sekmeli yorum formu resimdede gördüğünüz gibi twitter ve facebook yorum alanlarıda eklenmiş durumda :) tabi kodlardan anlıyan kişiler buna google+ yorum forumunuda ekliye bilirler.
bu haliyle bile gerçekten çok etkili duruyo :) konuyu fazla uzatmadan kodları nasıl ekliyeciğimize gelelim. Tabiki önizlemesini sitemizden göre bilirsiniz. :)

Facebook ve twitter yorum formunun blogunuzda çalışabilmesi için bu formlara ait api id almamız gerekiyor.

Facebook api id almak için bu adrese gittikten sonra sağ üst köşedeki yeni uygulama oluştur'a tıklıyoruz. Açılan pencerede uygulama adını yazıp diğer alanları boş bırakıp devam butonuna tıklayın. Daha sonra kelime doğrulamasını geçtikten sonra çıkan sayfadaki app id'nin karşısında yeralan rakamları bir yere not ediyoruz. Bize lazım olan yönetici profil id'sini almak için ise bu adrese gidiyoruz ve resimdeki kırmzı alandaki id'yi bir yere not ediyoruz.

Twitter api key almak için ise bu adrese gidip create new application'a tıklayıp açılan sayfadaki formu resimdeki gibi doldurduktan sonra açılan sayfada Consumer key'in karşısında rakamları bir yere not ediyoruz. Daha sonra ayarlara(settings) tıklayıp alt tarafta yeralan read and write'ı işaretleyip ayarları kaydediyoruz.

Blogger > Şablon adresine gidip şablonumuzu yedekledikten sonra Html'yi Düzenleye tıklayın ve Widget Şablonlarını Genişlet deyin. Daha sonra Ctrl + F tuşlarıyla <head> kodunu bulduktan sonra aşağıdaki kodları hemen altına yapıştırıyoruz.

<meta content='facebook profil id' property='fb:admins'/>
<meta content='facebook api id' property='fb:app_id'/>
<script src='http://code.jquery.com/jquery-latest.pack.js'/>
<script src='https://dl.dropboxusercontent.com/s/g8oow2g54asyr8a/jsCommentPages.js'/>
<script src='http://connect.facebook.net/tr_TR/all.js#xfbml=1'/>
<script src='https://dl.dropboxusercontent.com/s/dx3v586zbecy2ci/jsTweetBox.js'/>
<script src='http://platform.twitter.com/anywhere.js?id=twitter api id&amp;v=1'/>

Daha sonra Ctrl + F tuşlarıyla ]]></b:skin> kodunu bulduktan sonra aşağıdaki kodları kopyalayıp hemen bu kodun üzerine yapıştırın.

#js-tweet-box {
  display: inline-block;
  padding: 10px;
  font-family: 'Helvetica Neue','Helvetica','Arial',sans-serif;
  color: #666666;
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
}
#js-tweet-box textarea{
  margin: 10px 0px;
  display: block;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;

  box-shadow: 0px 0px 3px #cccccc;
  -moz-box-shadow: 0px 0px 3px #cccccc;
  -webkit-box-shadow: 0px 0px 3px #cccccc;
  border: 1px solid #cccccc;
}
#js-tweet-box .js-reactions {
 float: left;
}
.js-tweet-count {
 float: left;
 margin: 0px 10px;
   text-shadow: 2px 2px 2px #DDD;
  -moz-text-shadow: 2px 2px 2px #DDD;
  -webkit-text-shadow: 2px 2px 2px #DDD;
}
.js-tweet-count-over {
    color: #ff0000;
}
#js-tweet-box .button{
   display: inline-block;
   color: #287497;
   font-weight: bold;
 font-size: 14px;
   padding: 5px 10px;
   cursor: pointer;
 border: 1px solid #B4DCF5;
   border-radius: 4px;
   -moz-border-radius: 4px;
   -webkit-border-radius: 4px;
    
 background-color: #D5E8F5;
 background-image: linear-gradient(#F1F9FF, #D5E8F5);
 background-image: -moz-linear-gradient(#F1F9FF, #D5E8F5);
 background-image: -webkit-linear-gradient(#F1F9FF, #D5E8F5);

}
#js-tweet-box .button:hover{  
 background-color: #DdEfFb;
 background-image: linear-gradient(#ffffff, #DdEfFb);
 background-image: -moz-linear-gradient(#ffffff, #DdEfFb);
 background-image: -webkit-linear-gradient(#ffffff, #DdEfFb);
}
.js-tweet-button {
    float: right;
}
#js-tweet-box .js-sidebar{
 float: left;
 margin-right: 15px;
 width: auto;
 padding: 0px;
}
.js-current-user-twitter img{
 width: 48px;
 height: auto;  
 display: block;
 margin: 5px auto;
}
.js-publisher,
.js-current-user-twitter {
 font-size: 13px;
 font-weight: bold;
 text-align: center;
 border-radius: 10px;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px; 
 box-shadow: 0px 0px 5px #CCC;
 -moz-box-shadow: 0px 0px 5px #CCC;
 -webkit-box-shadow: 0px 0px 5px #CCC;
 color: #333;
 background-color: #ffffff;
 min-width: 100px;
 padding-bottom: 8px;
 margin-bottom: 15px;
}
.js-publisher{
 
}
.js-publisher > div,
.js-current-user-twitter > div{
 padding: .5em;
}
.js-sidebar footer{
 background: #E9E9E9;
 padding: 5px;
 border-radius: 0px 0px 10px 10px;
 -moz-border-radius: 0px 0px 10px 10px;
 -webkit-border-radius: 0px 0px 10px 10px;
 background-color: #0094D4;
 background-image: linear-gradient(#00A4F4, #0094D4);
 background-image: -moz-linear-gradient(#00A4F4, #0094D4);
 background-image: -webkit-linear-gradient(#00A4F4, #0094D4);
 color: white;
}
js-twtr-connect-button {
 border-radius: 10px;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 background-color: #0094D4;
 background-image: linear-gradient(#00A4F4, #0094D4);
 background-image: -moz-linear-gradient(#00A4F4, #0094D4);
 background-image: -webkit-linear-gradient(#00A4F4, #0094D4);
 color: white;
}
.js-publisher:hover footer{
 
}
.js-publisher-img {
 width: 48px;
 height:auto;
 display: block;
 margin: 5px auto; 
}
#js-tweet-box .disabled-button{
    cursor: none;
    background-color: #cccccc;
    color: #dddddd;
}
#js-tweet-box .disabled-button:hover{
    cursor: none;
    background-color: #cccccc;
    color: #dddddd;
}
.js-tweet-message {
  display: none;
  padding: 3px;
  background-color: yellow;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;

  font-size: 15px;
  font-weight: bold;
  line-height: 1.4;
  box-shadow: 0px 0px 7px #DDD;
  -moz-box-shadow: 0px 0px 7px #DDD;
  -webkit-box-shadow: 0px 0px 7px #DDD;
}
.js-recent-tweets, .js-auth-reaction {
 clear: both;
 font-size: 13px;
 margin-top: 15px;
 background-color: #ffffff;
 border-radius: 10px;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 box-shadow: 0px 0px 5px #cccccc;
 -moz-box-shadow: 0px 0px 5px #cccccc;
 -webkit-box-shadow: 0px 0px 5px #cccccc;
}
.js-auth-reaction {
  display: none;
}
.js-reactions h1 {
 font-size: 20px;
 font-weight: bold;
 padding: 5px;
 background: #E9E9E9;
 color: #333333;
 border-radius: 10px 10px 0px 0px;
 -moz-border-radius: 10px 10px 0px 0px;
 -webkit-border-radius: 10px 10px 0px 0px;
 background-image: linear-gradient(#F4F4F4,#D4D4D4);
 background-image: -moz-linear-gradient(#F4F4F4,#D4D4D4);
 background-image: -webkit-linear-gradient(#F4F4F4,#D4D4D4);
}
.js-recent-tweets h1 > span{
 font-size: 10px;
 font-weight: normal;
}

.twtr-img {
 float: left;
 width: 48px;
 height: auto;
 margin-right: 3px;
}
.twtr-tweet {
 padding: 5px;
 font-size: 12px;
 font-family: arial;
 line-height: 1.2;
}
.js-auth-reaction .twtr-tweet {
 background-color: #ffffff;
}
.twtr-tweet:hover {
 background: rgba(0,132,180,.1);
}
.twtr-tweet:hover .tweet-timestamp {
 color: #0084b4;
}
.twtr-tweet:last-child {
 border-radius: 0px 0px 10px 10px;
 -moz-border-radius: 0px 0px 10px 10px;
 -webkit-border-radius: 0px 0px 10px 10px;
}
.twtr-tweet a {
 color: #0084B4;
 text-decoration: none;
 font-weight: bold;
}
.tweet-row {
 font-weight: bold;
}
.tweet-actions{
 display: none;
}
.tweet-actions { 
 color: #0084b4; 
 font-size: 12px;
 visibility: hidden;
}
.tweet-actions > span {
 cursor: pointer;
}
.twtr-tweet:hover .tweet-timestamp {
 color: #0084b4;
}
.tweet-favorite,
.tweet-retweet,
.tweet-reply { 
 padding-left: 5px;
}

.tweet-favorite:hover,
.tweet-retweet:hover,
.tweet-reply:hover { 
 text-decoration: underline;
}

.twtr-tweet:hover .tweet-actions,
.twtr-tweet:hover .user-actions {
 visibility: visible;
}
.tweet-actions .sprite,
.tweet-actions .active-sprite {
 width: 16px;
 height: 15px;
 display: inline-block;
 background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ70hd07HZATfMjWzefYBlxdILG-q-XnMllOi0qIkiMgVg9Ibbm9gdXfNwQDm9Qq6nxaw0JI0CZj6u-PNNUG1_lOFH0siCmgBlZ-qHzsDePaCn8iPyrphVNyFeURkgNwaJZ2fmzB-M-Z-7/s800/twitter-spritev2.png) repeat-x scroll top left;
}
.tweet-remove .sprite {
 background: transparent url(http://a2.twimg.com/a/1304464034/phoenix/img/sprite-icons.png) repeat-x scroll top left;
 background-position: -112px 1px;
}
.tweet-remove:hover .sprite {
 background-position: -128px 1px;
}

.tweet-retweet .sprite {
 background-position: 48px 1px;
}
.tweet-retweet .active-sprite {
 background-position: 16px 1px;
}
.tweet-retweet:hover .sprite {
 background-position: 32px 1px;
}
.tweet-favorite .sprite {
 background-position: 96px 0px;
}
.tweet-favorite .active-sprite {
 background-position: 64px 0px;
}
.tweet-favorite:hover .sprite {
 background-position: 80px 0px;
}
.tweet-reply .sprite {
 background-position: 0px 1px;
}
.tweet-reply:hover .sprite {
 background-position: -16px 1px;
}

Ve son olarak Ctrl + F tuşlarıyla <div class='comments' id='comments'> kodunu buluyoruz ve hemen altına aşağıdaki kodları yapıştırıyoruz. Ve şablonumuzu kaydediyoruz.

Bazı Temalarda ikinci koddan sonra yorum forumu aktif oluyor.

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div class='js-default-tab comments-tab' id='blogger-comments' title='Blogger Yorumları'>
<data:post.numComments/> Yorum
</div>
<div class='comments-tab' id='twitter-comments' title='Twitter Yorumları'>
<span class='js-page-tweet-count' expr:href='data:post.url'/> Tweets
</div>
<div class='comments-tab' id='fb-comments' title='Facebook Yorumları'>
<fb:comments-count expr:href='data:post.url'/> Yorum
</div>
</b:if>
<div class='clear'/>
</div>
<div class='comments-page' id='twitter-comments-page'>
<div data-bitly-key='Bit.ly api key' data-bitly-login='Bit.ly kullanıcı adı' data-publisher='Twitter kullanıcı adı' id='js-tweet-box'/>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='10' width='500'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>

40 yorum:

Tolgagnl18 Ağustos 2013 10:02
Sorunlarınızı Bu Konu altında Sorabilirsiniz.
YanıtlaSil
Yanıtlar
Ferhat Bayram18 Ağustos 2013 13:37
eski tasarimimda buna benzer bisey kullaniyordum bence gayet guzel
YanıtlaSil
Yanıtlar
Adsız18 Ağustos 2013 14:39
Merhaba hocam, kodları ekledim dediğiniz gibi ancak temada hata alıyorum kaydettiğimde verdiğiniz kodlarda değiştirmemiz düzeltmemiz gereken yerler varmı acaba yoksa direk söylediğiniz yerlere kodları eklememizmi lazım yardımcı olursanız sevinirim. Comment altına eklediğim kodlardada sorun oluyor belirttiğinz gibi bazı temalarda comments altındaki kod oluyor demişsiniz onuda denedim ondada hata veriyor. Kodda twitter kullanıcı adı bit.ly kullanıcı adı yazıyor oraları değiştirmemizmi gerekiyor acaba?
YanıtlaSil
Yanıtlar
Adsız18 Ağustos 2013 18:07
Hocam temayı http://ultrashare.net/hosting/fl/7331bf041c burdan indirebilirsiniz indirip bi denermisiniz herşeyi doğru yapmama rağmen sonuç alamıyorum kullandığım tema mertuncers'in teması şuan aktif olarak kullandığım tema bu tema head sorunun çözdüm ancak comments hep sorun veriyor eklenmiyor temaya galiba. Böyle bir yorum kutusu arıyordum buldum ancak bu sorunla karşılasıyorum.Eğer temaya ekleyebilirseniz detaylı olarak metin belgesine anlatımı ile upload edip linki yorum olarak atarsanız cok buyuk sevap işlemiş olursunuz teşekkürler.
YanıtlaSil
Yanıtlar
Tolgagnl18 Ağustos 2013 18:49
https://app.box.com/s/k7ffyfnlmofmgrqsinaq temanızı burdan indirip bi denermisiniz.
YanıtlaSil
Yanıtlar
Ferdi18 Ağustos 2013 18:56
Hocam Çok süper bir Kod :) Deniyicem
YanıtlaSil
Yanıtlar
Unknown19 Ağustos 2013 11:32
yapamadım dostum.sana temayı versem, twitter ve facebook apilerinide versem halledebilir misin?
YanıtlaSil
Yanıtlar
Tolgagnl19 Ağustos 2013 11:55
şu anki temamı paylaşmayı düşünmüyom ilerde yeni bir temaya geçersem olabilir ama bu temayı şurdan indirip kendinize göre editliye bilirsiniz. http://www.sohbetcheblog.net/2013/07/sercih-v1-blogger-temasi-editlenmis-hali.html

bu da aynı tema
YanıtlaSil
Yanıtlar
Yılmaz Uçar19 Aralık 2013 21:50
sekmeleri nasıl sağa alırız
YanıtlaSil
Yanıtlar
Adsız29 Mart 2015 19:02
ben bisey anlamadim facebookta yorum kutusu olustuyurouz, sonra kod vermissiniz onlari ekliyoruz, bu faceboktan kodu nereye ekliyoruz
YanıtlaSil
Yanıtlar
Konsolide Denemeler23 Nisan 2015 12:31
süpermiş.bu çalışmada twitter yerine disqus u nasıl ekleyebiliriz.işte o zaman inanılmaz güzel olur.
YanıtlaSil
Yanıtlar
Konsolide Denemeler23 Nisan 2015 16:16
bu konuda bu linkte bir çalışma gördüm.fakat .yapamadım.http://www.tipsviablogging.com/multiple-comment-system-blogspot/
YanıtlaSil
Yanıtlar

Yorum ekle

Blogger, Twitter, Facebook Sekmeli Yorum Formu

About author: Tolgagnl

40 yorum: