Nisan 09, 2012

Sosyal Ağ Bağlantıları Tuşu Ekleme (Social Networking Buttons)

Sosyal Ağ Bağlantıları Tuşu Ekleme (Social Networking Buttons)


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, Ekle Bunu 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?
* Kırmızı ile renklendirilmiş olan resim internet adreslerini yüklemiş olduğunuz resimlerin internet adresleri ile değiştirin.

* '... 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.

Konu alıntıdır..

0 yorum :

Yorum Gönder



Bloglama Zamanı'nda yayınlanacak yeni yazılar e-mail adresinize gelsin.


Google Arkadaşım Ol
Bloglama Zamanı
Bloglama Zamanı

Google+ paylaşımlarımı takip etmek için çevrelerinize ekleyin.