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. :)
sekmeli yorum formu
yorum formu
 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.  

api key

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.

twitter api key

 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:

  1. Sorunlarınızı Bu Konu altında Sorabilirsiniz.

    YanıtlaSil
  2. eski tasarimimda buna benzer bisey kullaniyordum bence gayet guzel

    YanıtlaSil
  3. 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
    1. bit.ly yazan yerlere api ve twitter kullanıcı adınızı yazmanız gerekiyor ama dediğim gibi twitter bazen sorun yarata biliyor. sölediğim gibi bazı temalarda 2 ci comments`in altına koyunca yorum formu aktif oluyor benim temamda o şekilde oldu istiyorsanız temanızı gönderin bi bakabilirim.

      Sil
    2. son kodda bi kod eksik eklemişim şimdi hata vermemesi lazım tekrar denerseniz.

      Sil
    3. Son kod eksik değilmi acaba facebook id falan vardı şimdi yok baştan eklediğimde oldu ancak eksik falan olur diye kaydetmedim yönetici ıd falan vardı önceki kodda

      Sil
    4. son kod doğru hocam bende de aynısı facebook id head kısmının altında zaten temay yedekleyin . bi deneyin bi sakıncası olmas :)

      Sil
    5. site adresinizi yazarsanız iyi olur sitenizde biinceleyelim

      Sil
    6. Paylaşım ve cevaplarınız için teşekkür ederim beceremedim ancak gece bir daha uğrasıcam tekrar teşekkür ederim:)

      Sil
    7. ben düzenleyip size gönderirim

      Sil
    8. Hocam sitem www.webbyn.org ekliyorum ancak sizin gibi çıkmıyor temaya yükliyip upload edip link atarsanız ben beceremedim

      Sil
    9. https://app.box.com/s/k7ffyfnlmofmgrqsinaq burdan indirin ekledim bide bunu deneyin bakalım.

      Sil
    10. Teşekkürler oldu olmasınada yorum alanı biraz kaydı :)))

      Sil
    11. css kodlarıyla sorun halledilebilir.

      Sil
    12. yada commets bölümünüzü komple değişerek yapa bilirsiniz.

      Sil
  4. 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
    1. son kodları değiştirdim tekrar denermisiniz. şimdi olması lazım eğer tekrar olmassa ben indirip bi düzenleme yaparım

      Sil
  5. https://app.box.com/s/k7ffyfnlmofmgrqsinaq temanızı burdan indirip bi denermisiniz.

    YanıtlaSil
  6. Hocam Çok süper bir Kod :) Deniyicem

    YanıtlaSil
    Yanıtlar
    1. beğendiğinize sevindim yapamadığınız yerde yardımcı olmaya çalışırım.

      Sil
  7. yapamadım dostum.sana temayı versem, twitter ve facebook apilerinide versem halledebilir misin?

    YanıtlaSil
    Yanıtlar
    1. temanızı birde api leriniz bir yere upload edip bana gönderin size yardımcı olayım

      Sil
    2. iletişim bölümünden gönderdim.

      Sil
    3. mail adresine yolladım

      Sil
    4. Bu yorum bir blog yöneticisi tarafından silindi.

      Sil
    5. mailden yolanmıyo nedense başka bi mail verin

      Sil
    6. facebook sayfasından bulun beni

      Sil
    7. FACEBOOK SAYFASINDAN BULDUM VE MAİL ATTIM SİZE...

      Sil
  8. ş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
  9. sekmeleri nasıl sağa alırız

    YanıtlaSil
    Yanıtlar
    1. onu denemek için kodu tekrar eklemek lazım ben tekrar deneyip bu konu altında cevaplarım şu an için bi fikrim yok :)

      Sil
    2. Buma Twitter yerine nasıl google + koyaruz koddostunda var mesala her yerde çalışıyor

      Sil
    3. bu eklentiyi farklı bi şekilde editleyip kullanan vardı sanırım ama site adresini unuttum eklentiyi bende düzenliyip koyabilirim ama pek boş zamanım yok kodla uğraşcak :)

      Sil
  10. ben bisey anlamadim facebookta yorum kutusu olustuyurouz, sonra kod vermissiniz onlari ekliyoruz, bu faceboktan kodu nereye ekliyoruz

    YanıtlaSil
    Yanıtlar
    1. facebook kodları değil sadece facebook id numaranızı ekliyorsunuz onuda head kodunun altına yerleştirceğiniz kodlarda facebook profil 'id' yazan kısma id yerine numarınızı ekliyorsunuz

      Sil
  11. süpermiş.bu çalışmada twitter yerine disqus u nasıl ekleyebiliriz.işte o zaman inanılmaz güzel olur.

    YanıtlaSil
  12. 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
    1. o uygulamayı ben bir deneyip çalışıp çalışmadığına bakarım

      Sil