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&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 != "static_page"'> <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 == "item"'> <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'>
Etiketler: Blogger Eklentileri, blogger yorum formu, Genel Katagori, Güncel Haberler
40 Yorum:
Sorunlarınızı Bu Konu altında Sorabilirsiniz.
eski tasarimimda buna benzer bisey kullaniyordum bence gayet guzel
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?
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.
evet güzel ve farklı bi uygulama :)
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.
son kodda bi kod eksik eklemişim şimdi hata vermemesi lazım tekrar denerseniz.
son kodları değiştirdim tekrar denermisiniz. şimdi olması lazım eğer tekrar olmassa ben indirip bi düzenleme yaparım
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
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 :)
site adresinizi yazarsanız iyi olur sitenizde biinceleyelim
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:)
ben düzenleyip size gönderirim
https://app.box.com/s/k7ffyfnlmofmgrqsinaq temanızı burdan indirip bi denermisiniz.
Hocam sitem www.webbyn.org ekliyorum ancak sizin gibi çıkmıyor temaya yükliyip upload edip link atarsanız ben beceremedim
Hocam Çok süper bir Kod :) Deniyicem
https://app.box.com/s/k7ffyfnlmofmgrqsinaq burdan indirin ekledim bide bunu deneyin bakalım.
beğendiğinize sevindim yapamadığınız yerde yardımcı olmaya çalışırım.
Teşekkürler oldu olmasınada yorum alanı biraz kaydı :)))
css kodlarıyla sorun halledilebilir.
yada commets bölümünüzü komple değişerek yapa bilirsiniz.
yapamadım dostum.sana temayı versem, twitter ve facebook apilerinide versem halledebilir misin?
temanızı birde api leriniz bir yere upload edip bana gönderin size yardımcı olayım
iletişim bölümünden gönderdim.
ş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
mail adresine yolladım
Bu yorum bir blog yöneticisi tarafından silindi.
tekrar yolladım
mailden yolanmıyo nedense başka bi mail verin
facebook sayfasından bulun beni
FACEBOOK SAYFASINDAN BULDUM VE MAİL ATTIM SİZE...
sekmeleri nasıl sağa alırız
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 :)
Buma Twitter yerine nasıl google + koyaruz koddostunda var mesala her yerde çalışıyor
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 :)
ben bisey anlamadim facebookta yorum kutusu olustuyurouz, sonra kod vermissiniz onlari ekliyoruz, bu faceboktan kodu nereye ekliyoruz
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
süpermiş.bu çalışmada twitter yerine disqus u nasıl ekleyebiliriz.işte o zaman inanılmaz güzel olur.
bu konuda bu linkte bir çalışma gördüm.fakat .yapamadım.http://www.tipsviablogging.com/multiple-comment-system-blogspot/
o uygulamayı ben bir deneyip çalışıp çalışmadığına bakarım
Yorum Gönder
Kaydol: Kayıt Yorumları [Atom]
<< Ana Sayfa