Twitter @Anywhere Servisini Kullanmak

Şimdi Herkez Merak Etmiş Anywhere nedir diye nedir size bir örnek
@MucOzeR @enesilhan @teknomobi @sessizcrew @TEAkolik @twitter ... diye uzayıp gider bakın linklerin üzerine geldiğinizde twitter profilleri küçük ve hoş bir kutucukta açılıyor

Twitter yakın zamanda özelliklerini daha etkin bir şekilde kullanıcılarının kullanmasını sağlayacak anywhere servisini duyurdu. Servisin amacı Twitter'ın özelliklerini daha etkin bir şekilde kullanıcıların hizmetine sunmak ve bunu da birkaç satır kod ile kolaylıkla yapılmasıydı. İlk etapta bazı sitelere sunulan bu özelliği artık isteyen herkes kullanabiliyor. Bu uygulama ile yapabileceklerimize bir göz atacak olursak;

• sadece @twitterkullanıcıadı yazarak o twitter profiline kolaylıkla link verebilir,
• aynı şekilde @twitterkullanıcıadı yazarak hovercards fonksiyonu sayesinde sitenizden ayrılmadan kullanıcının profiline kısaca göz atabilir,
• tek satır kod ile twitter takip butonu oluşturabilir,
• sitenizden tweet'leyebilirsiniz.

Uygulama Ekleme

Anywhere uygulamasını kullanmak için öncelikle yeni bir uygulama oluşturmalısınız. Linke tıklayarak ulaşacağınız sayfada yapmanız gerekenleri anlatalım hemen;

• Application Name kısmına uygulanızın adını,
• Application Website kısmına http://siteniz.com şeklinde uygulamanızı kullanacağınız websitesini yazmalısınız.
• Application Type kısmını ise sitenizde kullanacağınız için browser'ı seçin.
• Callback Url kısmına ise yine anywhere uygulamanızı kullanacağınız sitenin adresini yazmalısınız.
• Son olarak @anywhere uygulamalarının doğru bir şekilde çalışabilmesi için Default Access Type kısmında ise Read & Write seçili olmalı.

API Anahatarınız

Bütün bunları doğru bir şekilde yaptıktan sonra yapmanız gereken Register Application'a tıklamak ve anlaşmayı kabul etmek. Uygulamanız artık hazır ve inanın en zor kısmı bitti :). Şimdi açılacak olan sayfada size verilecek olan API anahtarınızı (API Key) bir yerlere kaydetmeniz gerekli ne olur ne olmaz diye. Twitter Anywhere uygulamasını kullanmak için öncelikle sitenize küçük bir javasript kodu eklemelsiniz. Kodumuz;

<script src="http://platform.twitter.com/anywhere.js?id=API_ANAHTARINIZ&v=1" type="text/javascript"></script>

Şeklinde. Dikka etmeniz gereken tek nokta API_ANAHTARINIZ yazan yere biraz önce uygulama oluşturduğumuzda aldığınız API Anahtarınızı yazmanız o kadar. &v=1 kısmı ise anywhere uygulamamızın versiyon bilgisi.
Linkify
Bu fonksiyon ile @twitter şeklinde yazılan twitter profillerini kolaylıkla http://twitter.com/twitter linklerine dönüştürebilirsiniz. Fonksiyonu kullanmak için sitenize

<script type="text/javascript">twttr.anywhere(function (twitter) {twitter.linkifyUsers();});</script>

kodunu kullanabilrsiniz. Bu şekilde sadece bu_icerigi_linkle id'sine sahip olan içerikteki twitter profilleri linklere dönüşecektir.
Oluşturduğunuz bu linkleri CSS ile daha kolay kontrol edebilmek için özel bir sınıf ataması da yapabilirsiniz. Üstteki kodda örneğini görebileceğiniz gibi className ile özel bir sınıf tanımlaması da yapabiliyoruz. Yukarıdaki koddaki örnekte bu fonksiyon ile oluşturulan linkler twitter_ozel_sinifi sınıfına sahip olacaklar.

Hovercards

İtiraf etmeliyim ki Anywhere uygulamasında benim en çok beğendiğim uygulama bu. Bu fonksiyon ile @twitter şeklinde yazdığınız profillere sitenizden hiç ayrılmadan küçük bir pencere ile gözatabiliyorsunuz. Ekran görüntüsünde de göreceğiniz üzere kullanıcı hakkında yeterli derece de bilgi alabiliyorsunuz. Bu şekilde ayrıntılı bilgileri görmek için more bağlantısına tıklamanız yeterli. Fonksiyonu kullanmak için

<script type="text/javascript">twttr.anywhere(function (twitter) {twitter.hovercards();});</script>

kodunu sitenize eklemelisiniz. Tahmin edebileceğiniz üzere profilleri @twitter şeklinde yazmanız yeterli bu hoş fonksiyonu kullanmak için. Bu fonksiyon ayrıca linkify fonksiyonunu da kullanarak twitter profillerini linklere de dönüştürüyor.
Yukarıdaki kod ile bütün sayfadaki profilleri linklere çevirecek ve hovercards fonksiyonunu etkin hale getirmiş olacaksınız. Ama siz sadece yazılarınızda yazdığınız twitter profillerini linklere çevirmek ya da hovercards fonksiyonunu etkinleştirmek istiyorsunuz. Tıpkı linkify fonksiyonunda olduğu gibi burada da belirli bir alanı seçebiliyoruz. Kullanım şekli ise linkify foksiyonu ile aynı;

<script type="text/javascript">twttr.anywhere(function (twitter) {twitter("#yazi").hovercards();});</script>

şeklinde kodunuzu yazarak sadece yazi id'sine sahip içerikteki linkler hovercards fonksiyonunu kullanacaktır.
Siz zaten sitenizde twitter profillerini linkler halinde yayınladıysanız bu seferde hovercards fonksiyonunun infer özelliği imdadınıza yetişiyor. Bu özellik ile zaten link olarak yayınlanmış twitter profillerini yakalayıp hovercards fonksiyonun kullanabiliyorsunuz. Kullanımı ise,

<script type="text/javascript">twttr.anywhere(function (twitter) {twitter("a").hovercards({infer:true});});</script>

şeklinde. Burada dikkat etmeniz gereken iki nokta var; ilki ...twitter("a").hover...
 ile bütün linkleri yakalamalısınız. Diğeri ise href 
özelliği ile verdiğiniz link değil de linkin içinde geçen kullanıcı adı 
daha önemli. Örneğin;

 @MucOzeR yazdığımda Profilim Açılacak

kodunun sayfanızdaki çıktısının üzerine geldiğinizde twitter profilini değil de benim (@MucOzeR) profilimi göreceksiniz.
Eğer sitenizden twitter profilinize yazı kullanmak yerine resim kullanarak link veriyorsanız böyle bir durum için de küçük bir fonksiyon tanımlaması ile sorununuzu çözebilirsiniz.

<img src="twitter.png" alt="MucOzeR" class="twitter_image"/>

Follow Buttons

Sadece tek satır javascript kodu ile suya sabuna dokunmadan, CSS'i hiç kurcalamadan twitter takip butonu yapmak birçoğumuzun kulağına hoş geliyordur sanırm. Anywhere uygulaması ile kolaylıkla bunu yapabiliriz. Sadece kulağınıza hoş gelmesiyle kalmamış olacak yani bu güzel özellik :). 

 

<script>twitter('#follow_me').followButton({"MucOzeR"});</script>

kodu ile kolaylıkla butonunuzu oluşturabilirsiniz. Biraz kodu açıklamak gerekirse ...twitter('p#followme')... kısmı butonun nereye ekleneceğini belirtiyor. Bizim kodumuzda followme id'sine sahip olan bir paragrafa eklenecek. Diğer ...followButton({"MucOzeR"});... kısmı ise hangi kullanıcı adı için buton oluşturacağınızı belirtmekte.
Tweet Box
Tweet Box uygulaması twitter kullanıcılarının sitenizden tweet'lemesine olanak sağlayan hoş ve kullanımı kolay bir uygulama. Twitter'ın Anywhere uygulamasındaki ana amaçlarından olan kullanıcıların daha fazla etkileşimi diğer bir deyişle janjanlı özellikleri kolaylıkla kullanmasının bir sonucu olarak bu uygulamayı da kolaylıkla sitelerimizde kullanabiliyoruz. Eklememiz gerek javascript;

<script>twitter('#tweet_box').tweetBox();</script>

kodundan ibaret. Tabii bu en basit hali ve birazcık ayarlama olanağına sahibiz. Önce yukarıdaki kodumuzu açıklayalım; ...twitter('#tweet_box')... kısmı twitter kutumuzun nerede olacağının bilgisini tutuyor. Bizim kodumuzda tweet_box id'sine sahip bir elemana eklenecek.
Yapacağımız ayarlamaları ise ..tweetBox({ayarlamalarınız});... kısmından yapabilirsiniz. Hangi ayarlamaları yapabiliriz bir bakalım;

• width; yazı yazma kutusunun genişliğini pixel olarak ayarlamak için kullanabilirsiniz. Değeri numerik olarak girmelisiniz.
• height; yazı yazma kutusunun yüksekliğini pixel olarak ayarlamak için kullanabilirsiniz. Değeri numerik olarak girmelisiniz.
• counter; yazı yazma kutusunda kalan karakter sayısını göstermek için kullanabilirsiniz. True, false değerlerini alabilir.
• label; yazı kutusunun başlığı olarak düşünebiliriz. Tırnak içinde başlığınızı girebilirsiniz.
• defaultContent; yazı kutusunun varsayılan içeriğini buradan yazabilir, kullanıcılarınıza fikir verebilirsiniz.
• onTweet; tweet'ledikten sonra ne yapılacağını buradan ayarlayabiliyorsunuz. Kullanımını ise aşağıda bütün ayarların kullanıldığı örnekte görebilirsiniz.

<script>
twttr.anywhere(function(twitter) {
        twitter(".comments").tweetBox({
                label: 'Bu yazı hakkında ne düşünüyorsunuz?',
                defaultContent: '@brkzn ',
                height: 100,
                width: 750,
                onTweet: function(html){
                        alert("Başarıyla tweet'lediniz. Tebrikler. :)"); 
                }
        });
});
</script>

Burada birkaç açıklama yapmak gerekli. Dikkat ettiyseniz counter ayarlamasını kullanmadık. Nedeni, varsayılan değerinin true olması. Yani bu ayarlamayı yapmasanız dahi kaç karakter kaldığı gözükecektir sağ üst köşede. onTweet fonksiyonunda ise başarıyla tweet'lediğiniz vakit bir uyarı penceresi görünmesini sağladık.
Son olarak bu uygulamanın daha ayrıntılı ve farklı kullanımlarını bulabileceğiniz bu adrese de bir göz atmayı unutmayın. Faydalı olması dileğiyle. Sağlıcakla kalın. ;)