10 Şubat 2010

Eğer yazılarınızın sosyal medya ortamlarında da görünütlenebilmesini istiyorsanız. Yazı alanınızın uygun yerlerinde sosyal medya tuşlarını kullanmanızı öneririm. Yazılarınızın altına sosyal medya tuşlarını ekleme konusunda daha önce de birkaç örnek vermiştim. Şimdi de sosyal medya tuşlarını bir tablo içerisinde yazı altına nasıl yerleştirebileceğinizi açıklamaya çalışacağım.

Sosyal-Medya-Tuş-Tablosu

Öncelikle, temanızın yedeğini alın. Ve Yerleşim > HTML'yi Düzenle > Widget Şablonlarını Genişlet' e tıklayın. Ve "Ctrl+F" yardımı ile aşağıdaki kodu aratın;

<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Yukarıda bulduğunuz koddan hemen sonra alttaki kodu yapıştırın;
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<big><big><big> Yazıyı Paylaş! </big></big></big>
<div class='spacer' style='margin-top:10px;margin-bottom:10px;border-top:solid 1px #DEDEDE;'/>
<div class='social-table'>
<table border='0' cellpadding='0' cellspacing='0' width='100%'>
<tr>
<td valign='top' width='50%'><table border='0' cellpadding='0' cellspacing='0' width='222'>
<tr>
<td height='24' width='24'><img border='0' height='16' src='http://lh3.ggpht.com/_TqPdHmAEwTM/SgxdHoRIprI/AAAAAAAAEC4/UOmW1Zfg04I/facebook.png' width='16'/></td>
<td height='24'><a expr:href='&quot;http://www.facebook.com/share.php?u=&quot; +data:post.url'><strong> Facebook ile Paylaş</strong></a>
</td>
</tr>
<tr>
<td height='24'><img border='0' src='http://lh4.ggpht.com/_TqPdHmAEwTM/SgxdH2E0JsI/AAAAAAAAEDE/HTXaxE7_KaU/twitter.png'/></td>
<td height='24'><a expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title'><strong> Twitter ile Paylaş</strong></a>

</td>
</tr>
<tr>
<td height='24'><img border='0' height='16' src='http://lh3.ggpht.com/_TqPdHmAEwTM/SgxiZxfvTGI/AAAAAAAAEDU/AvuLyM_PGa4/stumble.png' width='16'/></td>
<td height='24'><a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; +data:post.url'><strong>StumbleUpon ile Paylaş</strong></a></td>
</tr>
<tr>
<td height='24'><img border='0' height='16' src='http://lh6.ggpht.com/_TqPdHmAEwTM/Sgxdp40mQUI/AAAAAAAAEDM/_Nee9ul6zpc/s128/delicious.png' width='16'/></td>
<td height='24'><a expr:href='&quot;http://del.icio.us/post?url&quot; +data:post.url'><strong>Delicious ile Paylaş</strong></a></td>
</tr>
<tr>
<td height='24'><img border='0' height='16' src='http://lh4.ggpht.com/_TqPdHmAEwTM/SgxjIHpTaiI/AAAAAAAAEDY/pZtBL9woxzw/reddit.png' width='16'/></td>
<td height='24'><strong><a expr:href='&quot;http://www.reddit.com/submit?url=&quot; +data:post.url'>Reddit ile Paylaş</a></strong>
</td>

</tr>
</table></td>
<td valign='top' width='50%'><table border='0' cellpadding='0' cellspacing='0' width='222'>
<tr>
<td height='24' width='24'><img border='0' height='16' src='http://lh4.ggpht.com/_TqPdHmAEwTM/SgxkjUlW8eI/AAAAAAAAEDc/iDE9H_-vX9w/digg.png' width='16'/></td>
<td height='24'><a expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><strong>Digg ile Paylaş </strong></a></td>
</tr>
<tr>
<td height='24'><img border='0' height='16' src='http://lh5.ggpht.com/_TqPdHmAEwTM/Sgx1uAMIp7I/AAAAAAAAEDk/UvMj9nzDyJI/design_float.png' width='16'/></td>
<td height='24'><a expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot; +data:post.url'><strong>DesignFloat ile Paylaş</strong></a></td>
</tr>
<tr>
<td height='24'><img border='0' height='16' src='http://lh4.ggpht.com/_TqPdHmAEwTM/Sgxdp80sUoI/AAAAAAAAEDQ/3eYyxtWAGpM/s128/technorati.png' width='16'/></td>
<td height='24'><strong><a expr:href='&quot;http://technorati.com/faves/?add=&quot; +data:post.url'>Technorati ile Paylaş</a></strong></td>

</tr>
<tr>
<td height='24'><img alt='Feeds RSS' border='0' height='16' src='http://lh5.ggpht.com/_TqPdHmAEwTM/SgxdH0I91sI/AAAAAAAAEDA/cDcvpz3WJug/feed.png' width='16'/></td>
<td height='24'><a href='http://feeds2.feedburner.com/takiplistem'><strong>RSS Beslemeye Üye Ol!</strong></a>
</td>
</tr>
<tr>
<td height='24'><img alt='Myspace ile Paylaş !' border='0' height='16' src='http://img706.imageshack.us/img706/6606/myspacee.gif'/></td>
<td height='24'><a expr:href='&quot;http://www.myspace.com/Modules/PostTo/Pages/?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' target='_blank' title='Myspace ile Paylaş !'><strong>Myspace ile Paylaş</strong></a>
</td>
</tr>
</table></td>
</tr>
</table>
</div>
<div class='spacer' style='margin-top:10px;margin-bottom:10px;border-top:solid 1px #DEDEDE;margin-bottom:10px;'/>
</b:if>
<div style='clear: both; height:30px;'/>

Temanızı görüntüleyin. Bir sorun ile karşılaşmadan görüntüleniyorsa şablonunuzu kaydedin. Kırmızı ile renklendirilmiş kısıma kendi besleme adresinizi yazın. Ekstradan isteyenler resimleri de değiştirebilir.

Farklı tuşları tek tek eklemek isterseniz; Share Button etiketi ile etiketlediğim yazıları okuyabilirsiniz.

Hepsi bu kadar kolay gelsin...

Not: Myspace, istek üzerine, sonradan eklenmiştir. Örnek resimde görünmüyor, ancak sağ altta, son tuş olarak görüntülenecektir.
Yorum
sinemaniam dedi ki...
teşekkürler çok güzel oldu
Ufuk Canlı dedi ki...
Yazı ile etiketler arasında bir boşluk oluşuyor bende onu nasıl giderebilirim?
Sade dedi ki...
hangi yazı hangi etiket? tam anlayamadım.
tyler78 dedi ki...
Bunu bloguma uyguladım. Diğer facebook paylaşım tuşları gibi bu da konudaki yazıyı alıntılamak yerine meta taglardaki Description'ı alıyor. Konuyu almasını nasıl sağlarım biliyor musunuz? 2 gündür bununla uğraşıyorum.
tyler78 dedi ki...
Sorunu çözdüm. Meğer meta taglardaki description'ı silmem gerekiyormuş.
Sade dedi ki...
:) bana ihtiyaç kalmamış. kolay gelsin...
gez-ye-ic dedi ki...
Merhaba,
Ben uyguladım fakat, hata da vermiyor, sosyal tuşlar da çıkmıyor.
Ben deki kod bu şekilde idi:
div class='entry'>
data:post.body/ >
div style='clear: both;'/>
div class='clear'/>
/div>
(not: tag başlangıçlarını buraya koyabilmek için kaldırdım.)
Bunun hemen altına ekledim, verdiğiniz kodu.
Nerede hata yapmış olabilirim acaba?
Sade dedi ki...
Merhaba, Selahattin Bey, birde <div class='post-footer'> kodunun hemen üstüne yerleştirmeyi deneyin.
gez-ye-ic dedi ki...
Merhaba Sade,
Dediğiniz yere koydum gene olmadı, hata vermiyor ama paylaşım tuşlarını da göstermiyor.
Benim kodlarda bir problem var herhalde; Daha önce favicon eklemek istedim gene olmadı, halbuki bir satırlık bir link komutu. Ayrıca, search boxı da çalıştıramadım, hem blogum üzerindeki search boxı hem de blogger temel gadgetin de bulunan Google un arama kutusunu çalıştıramadım. Benim kodda garip bir durum var ama nasıl bulacağımı bilmiyorum. İlginize teşekkürler
Sade dedi ki...
Hata vermiyorsa, olması lazım. Önizlemede tuş tablosu görüntülenmez zaten! Belki, önizleme ile görmediğiniz için olmuyor diye kaydetmeden çıkmışsınızdır diye düşünüyorum.

Search box'ınızın kodlarını temayı yapan kişi sanırım biraz karıştırmış. Ya da sonradan yanlışlıkla karışmış gibi. Ben daha önce anlatmıştım bu konuyu bir kontrol edin isterseniz. "Blogger da Site İçi Arama Nasıl Yapılır?" ismindeydi. İşe yaramazsa, temanızı yollayın ben düzeltirim.

Ancak google'ın site içi arama gadget'inin çalışmaması ilginç. eklerken 3 kutucuguda işaretleyin bakalım sadece sizin sitedemi yapmıyor yoksa google'a da mı bağlanmıyor anlaşılır tahminim.
gez-ye-ic dedi ki...
Çok teşekkürler Sade,
Benim şablonda veya IE8 de birşeyler var gibi, unstable bir durum içeriyor. Bir yerde bir bug olabilir. Benim yayındaki üç blog dan başka bir de deneme blogum var, aynı şablon orda da yüklü, herhangibir özelliği canlı yayına vermeden önce ilkin burda deniyorum. Mesela, sizin paylaşım tuşları bunda yüklü, bazı kayıtlar da gözüküyor ,bazılarında gözükmüyor. Şablondaki search box çok yeni tarihli kayıtları-1 haftalık gibi- buluyor, eski tarihli - 2009 falan- kayıtları bulamıyor. Google Gadget search box ise, "bu blog da ara" çalışmıyor, diğer iki yerde arıyor. IE8 deki uyumluluk görünümü birşeyleri karıştırıyor mu diye düşünüyorum. Uyumluluk görünümünü açıp kapamaya göre, post.title daki sadece başlık yazısının yeri kayıyor, yazar ismi falan aynı yerde kalıyor. aynı zamanda IE8 kilitleniyor ve yükleme çok yavaş oluyor.
Sizin bu siteye de şu hatayı veriyor:
İleti: Sözdizimi hatası
Satır: 1133
Karakter: 1
Kod: 0
URI: http://takipteyiz.blogspot.com/2010/02/sosyal-medya-tus-tablosu.html ; siz mozilla kullanıyorsunuz galiba, IE8 de uyum problemi olabilir belki.

Sizin daha evvel bana mail ile ilettiğiniz slideshow kodunun da çalışmama böyle bir olaydan olabilir. Onu daha sonra tekrar deneyeceğim.

Ben de birşeyler eksik mi diye de düşünüyorum. İyi çalışmalar
gez-ye-ic dedi ki...
Merhaba, sizin eski yazınızı http://takipteyiz.blogspot.com/2009/06/farkl-web-tarayclar-ile-web-sayfanzn.html incledim, çok hoşuma gitti. Ancak, sistemin Vista'yı desteklememesi kötü.
Ben de böyle bir test yapmak istiyordum. IE8 in uyumluluk görünümüne göre post title ın yerinin düşey değiştiğini tespit etmiştim. diğer text lerde oynuyor ama title önemli tabii.Gördüğüm kadarıyla; IE8 ile Firefox 3.5 aynı etkiyi yapıyor. IE7 ile de firefox 3.0 aynı görüntüyü veriyor hemen hemen. Sıkıntı, tasarımı hangisine göre yapalım veya aradaki farkı nasıl yok edebiliriz?
Diğer taraftan bir tespit daha yaptım: Sizin bu sosyal paylaşım tuşlarını footer a yüklemiştim. Blog a ilk giriş de tuşları göstermiyor, sonra blog içinde farklı kayıtlarda gezince tuşları göstermeye başlıyor. Garip bir durum :(
Sade dedi ki...
Ben halen önceki yorumunuza yorum yazmaya çalışıyordum. :D

IE8'i kullanmayı uzun süre önce bıraktım. Çok nadir bazen kullanmak zorunda kalıyorum.

Farklı tarayıcılarda görüntü testleri için http://browsershots.org/ sitesini de kullanabilirsiniz.

Kendi kullandığınız tarayıcıya göre yapmak en güzeli. Buna uygunda bir uyarı yzabilirsiniz siteye. Ya da ziyaretçilerinizin daha çok hangi tarayıcıyı kullanıyorsa ona uygun yapabilirsiniz.

Sosyal paylaş tuşlarının anasayfada görüntülenmemesi ve yazı sayfalarında görüntülenmesi normal. Yazının footer alanına yerleştirdik zira onları. Anasayfada tümünü bir kerede göstermek görsel açıdan iyi olmaz diye düşünüyorum. Ancak anasayfada da görünütlenmesini istiyorsanız; Bence hepsini eklemek yerine tek tek kullanılmasında en çok size fayda sağlayacağını düşündüklerinizi kullanın. Yada addtony, addthis tuşlarını da ekleyebilirsiniz.
TwiTequila dedi ki...
Bende arattım fakat şöyle bir kod çıktı ve muallakta kaldım neresine gömeyim kodu acep ?


div class='entry'
data:post.body/>
div style='clear: both;'/>

Bir kaç kodun köşeli parantezini iptal etmek zorunda kaldım yoksa yorumu gönderemiyordum =)
div style='clear'/
/div

style>.fullpost{display:none;}/style>

div class='entry'>
data:post.body/>
div style='clear: both;'/>
div style='clear'/>
/div
Sade dedi ki...
Selahattin beye öneridiğim yere yapıştırabilirsiniz. <div class='post-footer'> kodunun hemen üstüne yerleştirmeyi deneyin. Yine bulamazsanız lütfen kullanmak istediğiniz blogun adresini verin.
TwiTequila dedi ki...
Teşekkürler oldu =) Fakat açık bir şekilde oldu yani burdaki gibi yazıyı paylaş linkine bastığımızda açılır pencere tarzında olmadı onu nasıl yapabiliriz peki ?
Sade dedi ki...
Kodlarda target='_blank' kullanılabilir. Myspace tuşunda kullanmıştım. Diğerlerine de eklenebilir.
II.Jean Pool dedi ki...
teşekkürler dostum harika =)
caaglarr dedi ki...
Mükemmel oldu çok teşekkürler.
Murat Mutlu dedi ki...
Evet, sonunda oldu. Üstelik tam istediğim gibi. Ne kadar teşekkür etsem az valla. Düzenli olarak takip edeceğim 3. blog olacak bu. Tekrar tekrar teşekkürler :)
sema dedi ki...
Ben yapamıyorum.kodu sayfaya yerleştirdiğimde vede kaydettiğimdede görünmüyor..