Sosyal ağ sitelerinin bookmark’ları nasıl eklenir?

Bir, iki haftadır, daha önce hiç üzerinde çalışmama rağmen kendimi html, php, css ve wordpress kodlarının içinde yüzerken buldum. Aslında çok daha önce girmem gereken bir alandı. Cem, sağ olsun, şu zamana kadar kahrımı çekti ama onun da işleri yüzünden yeni tasarımımı entegre etmekle uğraşamadığından ben de öğrenmek zorunda kaldım bazı şeyleri.

Tabii ki şu anda bilgilerim biraz araştırıp uygulama şeklinde, ama mantığını kavramaya başladım diyebilirim. Tabii daha kırk fırın ekmek yemem gerekiyor. Neyse konumuza dönelim. İnternette onlarca site var şu anda anlattıklarımı anlatacak ama, o kadar sitede çok fazla gereksiz bilgi var. Mesela Türkiye’de çok fazla kullanılmayan sosyal ağ sitelerinin kodları var. Bu yazıda çoğumuzun kullandığı ya da kullanacağı sosyal ağ siteleri ile sitenizi nasıl entegre edeceğinizi anlatacağım. Yani bu yazının en altında gördüğünüz bu sitelerde bu yazıyı paylaşma özelliğini nasıl ekleyeceğinizi anlatacağım. Aynı zamanda facebook like özelliğini de nasıl ekleyeceğinizi göreceksiniz.

Öncelikle bu yazının WordPress tabanlı bir site için olduğunu söylemeliyim. Kullanılan fonksiyonlar vs. wordpress ile çalışıyor olacaklar.

Ben sitemde bu bookmark’ları yazının en altına koydum. Böylelikle gereksiz yer kaplamalarının önüne geçmeyi amaçladım. Tabii ki siz bunu çok daha farklı yerlere koyabilirsiniz. Ayrıca ben direk yazıların bulunduğu php dosyası olan single.php’ye koydum. Siz isterseniz function.php içine koyarak direk istediğiniz yerden bu fonksiyonu da çağırabilirsiniz. Ama yazının sonuna koymak hem kullanışlılık hem de okuyucu kitleniz açısından daha iyi olacaktır. Keza üste koysanız, yazıyı okumadan paylaş demiş olacaksınız ya da okuduktan sonra üste çıkmaları gerekecek ve bunu yapmayacaklar 🙂 Sidebar’a koysanız yine aynı sorun, sirekli orada kalacak ve anasayfa’da bile gereksiz yere yer işgal edecekler. Hadi bunu hallettiniz, sadece yazıya girince sidebar’da çıkmasını sağladınız ama yazıya odaklanan kişi, bunları görmeyecektir bile. Bu sebepten yazının sonuna koymak konusunda anlaşalım 🙂

Haydi başlayalım,

Bir ftp programı ile single.php’yi indirin ya da wordpress admin panelden Görünüm/Editör altındaki single.php’yi seçin. Her iki durumda da mutlaka yedeğini alın. Bu arada, ftp’den indirirken wp-content/themes’in altında kendi temanıza tıklayıp bu dosyayı bulabilirsiniz. Size tavsiyem bilgisayarınıza indirip bir text düzenleme programı ile bunu yapmanız. Çünkü renklendirmeleri baya işinize yarıyor, hatanızı daha rahat görebiliyorsunuz. Mac OS X kullanıcılarına textmate, smultron ve textwrangler’ı tavsiye ederim. İçlerinde textmate ücretlidir ama en iyisi de odur. Windows kullanıcıları da varsa kullandıkları bir text programı, onu kullansınlar, şu anda aklıma gelmedi, çok uzun zaman oldu Windows’ta kod yazmayalı.

Burada artık sizin biraz php bilginiz konuşmalı ya da html. Comment’in başladığı kod ile yazının bittiği kodun tam arasında aşağıda yazdıklarımı kopyalıyorsunuz.

<div class=”social”>
<!–E-posta ile paylaş–>
<a href=”mailto:?subject=<?php the_title(); ?>&amp;body=Bu yazıyı okumanı tavsiye ederim: <?php the_permalink();?>” title=”E-Posta ile paylaşın”> <img src=”<?php bloginfo(‘template_directory’); ?>/images/email.png” alt=”E-Posta ile paylaşın” /> </a>
<!–Twitter–>
<a href=”http://twitter.com/home/?status=<?php the_title(); ?> : <?php echo get_tiny_url(get_permalink($post->ID)); ?>” title=”Bu yazıyı tweet’leyin”> <img src=”<?php bloginfo(‘template_directory’); ?>/images/twitter.png” alt=”Bu yazıyı tweet’leyin” /> </a>
<!–Facebook–>
<a href=”http://www.facebook.com/sharer.php?u=<?php the_permalink();?>&amp;title=<?php the_title(); ?>” title=”Facebook’ta paylaşın”> <img src=”<?php bloginfo(‘template_directory’); ?>/images/facebook.png” alt=”Facebook’ta paylaşın” /> </a>
<!–Friendfeed–>
<a href=”http://www.friendfeed.com/share?title=<?php the_title(); ?>&amp;title=<?php the_title(); ?>: <?php the_permalink(); ?>” title=”FriendFeed’de paylaşın”> <img src=”<?php bloginfo(‘template_directory’); ?>/images/friendfeed.png” alt=”FriendFeed’de paylaşın” /> </a>
<!–MySpace–>
<a href=”http://www.myspace.com/Modules/PostTo/Pages/?u=<?php the_permalink(); ?>&amp;title=<?php the_title(); ?>” title=”MySpace’te paylaşın”> <img src=”<?php bloginfo(‘template_directory’); ?>/images/myspace.png” alt=”MySpace’te paylaşın” /> </a>
<!–Linked in–>
<a href=”http://www.linkedin.com/shareArticle?mini=true&amp;url=<?php the_permalink(); ?>&amp;title=<?php the_title(); ?>” title=”Linked in”> <img src=”<?php bloginfo(‘template_directory’); ?>/images/linkedin.png” alt=”Linked in” /> </a>
<!–Delicious–>
<a href=”http://del.icio.us/post?url=<?php the_permalink(); ?>&amp;title=<?php the_title(); ?>” title=”Delicious’ta işaretleyin”> <img src=”<?php bloginfo(‘template_directory’); ?>/images/delicious.png” alt=”Delicious’ta işaretleyin” /> </a>
<!–RSS Beslemeleri–>
<a href=”<?php bloginfo(‘rss2_url’); ?>” title=”RSS Beslemeleri’ne abone olun”> <img src=”<?php bloginfo(‘template_directory’); ?>/images/rssfeedicon.png” alt=”RSS Beslemeleri’ne abone olun” /> </a>
</div>

Gördüğünüz üzere, facebook, twitter, friendfeed, linked in, myspace, delicious gibi sosyal ağ sitelerine link vermiş olduk. Bunun yanında e-posta ile paylaşmayı ve RSS Beslemelerine abone olmayı da yazdım ki bunlar da önemli.

/images/twitter.png bu kod yerine siz o sosyal ağ sitesinin ikonunu nereye koymuşsanız ve hangi isimle koymuşsanız onu yazabilirsiniz. Genellikle sade isimler kullanmak ve WordPress’te images’ın altına koymak idealdir. Ama tabi siz bilirsiniz. İkon dosyalarını vermiyorum, benim sitemdekilerle aynı boyutta yapmak zorunda değilsiniz. Google’dan istediğiniz boyutta png dosyasını bulabilirsiniz, o site için.

Bu arada unutmadan bir işlem daha yapacağız. Dikkat ettiyseniz Twitter’ın kodu biraz daha farklı. Bunun sebebi de Twitter’ın karakter sınırı olmasından dolayı bizim tiny url kullanmamız. Bu sayede uzun linklerimiz kısalacak ve sorunsuz tweet’leyebileceğiz. Aşağıdaki txt dosyasının içindeki kodu function.php’nin içine diğer fonksiyonların parantezlerine karışmadan ekliyoruz. Sonra bunu da kaydedip yeniden indirdiğimiz yere upload ediyoruz ya da admin panelden yaptırsanız direk kaydetmeniz yeterli. (txt dosyasına koymamın sebebi bir türlü yazıya eklemeyi başaramamam. Diğer kodlarda sorun çıkmamasına karşın bunda php-html kodlarından biri buna izin vermiyor. Araştırmaya da şu anda üşendim açıkçası 🙂 )

tiny_url_kodu

Facebook ‘Like’ özelliği

Bunun yanında facebook’un ‘like’ özelliğini de entegre edelim. Bunu yapmak çok basit. İsterseniz facebook’tan kendi tasarımınızı yaratabilirsiniz ama şimdilik ben kendi kullandığımı paylaşacağım.

<iframe src=”http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&amp;layout=standard&amp;show_faces=true&amp;width=250&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=80″ scrolling=”no” frameborder=”0″ style=”border:none; overflow:hidden; width:500px; height:80px;” allowTransparency=”true”></iframe>

Bu kodu direk üsttekinin altına kopyalayabilirsiniz. Eğer yazının üstünde olmasını istiyorsanız ki hala tavsiye etmiyorum, oraya da kopyalayabilirsiniz.

Böylelikle sitemizi sosyal ağ platformlarına bir adım daha yaklaştırmış olduk. Tabii ki sizin kullandığınız farklı sosyal ağ siteleri olacaktır. Bunları da social class’ının </div>’inden önce yerleştirmeniz yeterli olacaktır. Fakat ben bu kadarını uygun buldum. Çok fazla olduğu zaman da görsel olarak çok kötü bir görüntü olacaktır, kirlilikten öteye gitmeyecektir.

Şimdi isterseniz bu bookmark’ların ne yaptıklarına bakın ve uygulamaya başlayın. Yani aşağıdaki çalışan versiyonlarını deneyin 🙂

Düzeltme: İsteyenler aşağıdaki CSS kodlarını style.css’in sonuna kopyalayabilirler. Bu bookmarklarınızı daha düzenli gösterecek ve altındaki facebook like’ı ile biraz daha yaklaşmasını sağlayacaktır.

.social img{
margin:-1;
padding:0;
}
.social {
margin: 0 0 0 0;
padding:0px;
}
.social h3 {
margin: 0 0 0 0;
padding:0px;
}