23 Mayıs 2009

Sosyal Ağ Bağlantıları (Social Networking Buttons) yazılarınızı beğenen kişiler tarafından arkadaşları ve tüm dünya ile paylaşmasını sağlar. Paylaşmak güzeldir. Hele güzeli paylaşmak daha da bir güzeldir!

Yazdığınız yazıların başında yada sonunda isteğe göre konumlandırılabilecek olan bu sosyal ağ bağlantı tuşları sayesinde yazınızı beğenen kişiler yazınızı bu tuşlara tıklayarak o sosyal ağdaki kullanıcılar ile paylaşabilir.

En Yaygın kullanılan Sosyal ağlara örnek olarak;
Delicious
Digg
Facebook
Flickr
Friendfeed
LinkedIn
Stumbleupon
Technorati
Tumblr
Twitter
...

gibi örnekler verilebilir.

Sosyal Ağ Bağlantılarını Yazılarınızın Sonuna Nasıl Ekleyebilirsiniz?
Bunun için farklı yöntemler kullanılabilir. Ben 2 yöntemle bunu nasıl yapabileceğinizi anlatacağım. Birinci Yöntem olarak Addthis, Addtoany, EkleBunu gibi sosyal ağları tek tuşta toplayan sitelerden tuşlar kullanılabileceği gibi ikinici yöntem olarak ta her sosyal ağ için farklı bir tuş yerleştirilebilir.

Yöntem 1: Addthis sitesi yardımı ile Sosyal Ağ Bağlantıları Tuşu Ekleme
Addthis.com blogunuza kullanıcılarınız için eklediğiniz tüm sosyal ağ tuşlarını bir yerde toplamaya yarıyan tek bir tuştur.

1.1. Addthis sitesine gidin.
1.2. "Get Your Button" kısmına tıklıyoruz açılan sayfada üç farklı seçenek çıkacak.

* Where do you want to put your button?
(Birinci seçenek "Bu tuşu nerede kullanmak istiyorsunuz?" Sorusunun yanındaki kutucuktan bu tuşu kullanmak istediğiniz yeri secebilirsiniz. Örnek; Blogger)

* Which kind of button?
İkinci seçenekte "Ne tür bir tuş istiyorsunuz?" sorusunda "Bookmarking & Sharing Button" seçeneğine tıklanır. Diğer secenek seçilmek istenirse besleme adresi yazılmalıdır.

* Select a button style
Üçüncü seçenekte tuşun blogunuzda görüntüleneceği şeklini işaretlemenizi ister. Altı adet hazır seçenekten hoşunuza giden bir tanesini seçin.

1.3. Tüm bunları yaptıktan sonra Sosyal Ağ Tuşunu bloga eklemeye yarıyan kodu almak için "Get Your Button Code" yazısına tıklanır.

Açılan yeni sayfada iki seçenekle verilmiştir.

1.4. Install to Sidebar: Widget Ekleme seçeneği. Bu seçenek ile addthis sayfası blogunuzun sayfa ögleri kısmına yeni bir ekleme yapar. Install to Sidebar'a tıklandığında açılan pencere yardımı ile Sayfa Öğelerinize addthis Widget'i Eklenir. Ancak bu eklenti yazılarınızın sonunda görüntülenmesini sağlamaz.

1.5. Blog Post Button Instructions: Bu seçenek sayesinde her yazınızın altında bu tuş çıkacaktır. Bu adımın altında neler yapılması gerektiği adım adım anlatılmıştır.

Bu tuşa benzer olarak tamamen Türkçe olan EkleBunu tuşunuda kullanabilirsiniz. EkleBunu blogunuza kullanıcılarınız için eklediğiniz tüm sosyal ağ tuşlarını bir yerde toplayan bir tuştur. EkleBunu sitesine kayıt yaptırarak blogunuza ekleyebilirsiniz.

Yöntem 2: İstenilen her sosyal ağ için ayrı yarı tuş yapılması:
Bunun için öncelikle tuş olarak kullanılacak resimler belirlenmelidir.


Örnek Sosyal Ağ tuşları için; Yukarıdaki resimde görülen icon setinin 64x64 veya 128x128 büyüklüğünde icon setlerini toplu halde bilgisayarınıza indirebilirsiniz.

Bu örneklerden beğendiklerinizi yada kendi bulduğunuz sosyal ağ iconlarını photobucket.com, imageshack.us gibi sitelere yükleyin ve adreslerini not edin.

2.1. 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;
<data:post.body/>

bulduğunuz bu kodun altına alttaki kodu yapıştırın ve temanızı kaydedin;


<!--SOSYAL-AG-TUSLARI-BASLA-->
<b:if cond='data:blog.pageType == "item"'>
<!--Digg-->
<a expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Digg ile Paylaş' src='http://i620.photobucket.com/albums/tt289/bobokous/digg_64x64.png'/></a>
<!--Stumble-->
<a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Stumble ile Paylaş' src='http://i620.photobucket.com/albums/tt289/bobokous/stumbleupon_64x64.png'/></a>
<!--Delicious-->
<a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Delicious ile Paylaş' src='http://i620.photobucket.com/albums/tt289/bobokous/delicious_64x64.png'/></a>
<!--Technorati-->
<a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url' rel='external nofollow' target='_blank'><img alt='Technorati ile Paylaş' src='http://i620.photobucket.com/albums/tt289/bobokous/technorati_64x64.png'/></a>
<!--Twitter-->
<a expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url' rel='external nofollow' target='_blank'><img alt='Twitter ile Paylaş' src='http://i620.photobucket.com/albums/tt289/bobokous/twitter_64x64.png'/></a>
<!--Facebook-->
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Facebook ile Paylaş' src='http://i620.photobucket.com/albums/tt289/bobokous/facebook_64x64.png'/></a> </b:if>
<!--SOSYAL-AG-TUSLARI-BITIR-->
Yukarıdaki kodda yapılması gereken değişiklikler neler?

* Mavi ile renklendirilmiş olan resim internet adreslerini yüklemiş olduğunuz resimlerin internet adresleri ile değiştirin.

* Kırmızı ile renklendirilmiş olan kısım daha önce "Blogger Eklentilerinizi Sadece Anasayfada, Yazılarınızın Sayfasında ya da Arşiv Sayfalarında Nasıl Görüntüleyebilirsiniz?" konusunda anlattığım gibi bu tuşların sadece yazıların internet adreslerinde çalışmasını sağlıyor. Böylece tuşlar ana sayfanızda görüntülenmeyecektir. Ana sayfasında da görüntülenmesini isteyenler bu kısmı silebilirler.

* '... ile Paylaş' kısımlarını isteğe bağlı olrak değiştirebilirsiniz.

Bu işlemlerden sonra "Sosyal Ağ tuşlarınız" kullanıma hazır. Herhangi bir yazınızı ziyaret ederek görüntüleyebilirsiniz. Bununla beraber diğer merak edilen tuşlar şöyle;

* Reddit Sayısını Sayan Paylaş Tuşu
* Yahoo Hareketli ve Sabit Paylaş Tuşu
* Digg Sayısını Sayan Paylaş Tuşu
* Stumble Paylaş Tuşu
* Twetmeme, Twet Sayısını Sayan Paylaş Tuşu
* FriendFeed Paylaş Tuşu Ekleme

Kolay gelsin.
Yorum
futbol muhalifi dedi ki...
selam,
bir sürü sitede buna benzer kodlar bulunmakta ama maalesef hiçbiri benim blogumda çalışmadı. bu yöntemle oldu. çok teşekkür ederim.
Sade dedi ki...
Merhaba Hoşgeldin Futbol Muhalifi,
Kodların işe yaramasına çok sevindim. Hayırlı olsun:D
Adsız dedi ki...
Benim bir kaç tane sorunum var.Hepside yöntem 2'yle ilgili :D

1-)Verdiğin icon setini indirdim ancak rardan çıkarmak için şifre istiyor.Şifreyi de bulamadım

2-)Twitter'daki ''http://twitthis.com/twit?url'' bu linki FriendFeed,Design Float,Reddit,Furl gibi sitelerden nasıl bulacağız?? Yani yönlendirme linkini bulamıyorum,yardım edersen sevinirim...
Sade dedi ki...
1. Verilen adresteki icon setlerini tekrar indirdim ve kontrol ettim herhangi bir şifre yok. İndirme sırasında bi aksilik olduysa tam olarak dosyaları indirememiş olabilirsin. Tekrar indirmeni tavsiye ederim.

2. İstediğin sitelere ait paylaş linklerini de yeni bir yazı olarak yazmak daha uygun our. En kısa zamanda isteğine uygun bir yazı yazarım...
Metin dedi ki...
çok teşşekür ederim.Aradığım kodları buldum.
Sade dedi ki...
ne demek üşenmeden yorum bıraktığınız için ben de teşekkür ederim.
Delfina ; dedi ki...
Merhaba,

2.yönteme göre sosyal ağ tşlarını ekledim çok teşekkür ediyorum bunca emeğinize...e-mail ile paylaş veya friend feed de paylaş diyebilmek için

"<*a expr:href='""

ile başlayan yere ne yazmalıyız acaba?
Sade dedi ki...
çogunu anlattım esasında ama FriendFeed ve birkaç birşey daha kaldı. Onlarıda tek tek yeni yazı halinde yazacağım sanırım.
Adsız dedi ki...
Ben verdiğiniz icon setiyle ekledim toplamda 11 tane tuş kullandım ancak ben bu 11 tuşun hepsini bir kutu içinde toplayabilir miyim, böyle bir imkanım var mı?? Kutu içinde toplamassam çok karışık oluyor da
Sade dedi ki...
Tablo yapılabilir. Yukarıdaki kodda ilk kırmızı koddan sonra alttaki kodu ekleyin;

<table border="1">
<tr>
<td>

sonra kodlar yer alır ve en sonuncu kırmızından önce alttaki kodu yapıştırın;
</td>
</tr>
</table>

Böylelikle tüm tuşları bir tek kutuya sığdırmış olursunuz. Ancak görsel açıdan sizi ne kadar tatmin eder bilemem. Bence daha ufak resimler kullanmayı deneyebilir yada Yöntem 1'den faydalanabilirsiniz.
Çetin Demirci dedi ki...
çok teşekkürler...
Aydandanakan dedi ki...
ilk yöntemi kullandım, başarılı oldu. teşekkürler
KESKİNLER YAPI DEKORASYON dedi ki...
siteniz çok güzel olmuş hayırlı uğurlu olsun ve ürünlerde mükemmel gerçekten efendim
Tuba Anıl dedi ki...
merhaba ben hem sosyal ağ paylaşım tuşlarını ekleyemedim hemde wibiya denen şu toobları yükleyemedim bana yardımcı olurmusunuz.bunu öğren,rsem eşimin iş amaçlı kullandığı siteye yapıcam yani inşallah:) teşekkürler..
Tuba Anıl dedi ki...
merhaba ben paylaşım tuşunu yapamadım ve şu wibiya tooblar hakkında biginiz vardır herhalde ondada sorun yaşadım yardıcı olursanız çok sevinirim
Ahmet Çatı İzolasyonu dedi ki...
Serdar Keskin Kardeşimiz Doğru Söyler Gibi Geldi Bana Biraz Hinlik vardır İçinde Gerçi Ama Sitenizi Begenmesi İlginç Bende Begendim ÇOk Güzel
Ahmet SAĞLAM dedi ki...
Teşekkürler. Addthis işime yaradı. Bazı kodlar her blogda gözükmüyor sanki. Addthis işimi gördü diyebilirim. Çok iyi olmasa da yine de güzel. Sağolun. :)
Imam Caglar dedi ki...
Merhaba,

Siteniz cok güzel olmus.

Hayirli ugurlu olsun.


Selamlar
cericer dedi ki...
merhaba , ben facebooka twitter ikonu eklemek istiyorum nasıl yapabilirim