kodaman.org

• 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

• 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

Twitter Anywhere uygulamasını kullanmak için öncelikle sitenize küçük bir javasript kodu eklemelsiniz. Kodumuz;

1

<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

1

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

kodunu eklemelisiniz. Bu şekilde sitenizde bulunan @twitter şeklinde yazılan bütün twitter profilleri twitter profil linklerine dönüşecektir.

Eğer sadece belirli bir alandaki profilleri linklere dönüştürmek isterseniz

1

<script type="text/javascript">twttr.anywhere(function (twitter) {twitter("#bu_icerigi_linkle").linkifyUsers({className:'twitter_ozel_sinif'});});</script>

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

Hovercards Örnek

Fonksiyonu kullanmak için

1

<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ı;

1

<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,

1

<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;

1

<a href="http://twitter.com/twitter>@brkzn; twitter'dan takip edin</a>

kodunun sayfanızdaki çıktısının üzerine geldiğinizde twitter profilini değil de benim (@brkzn) 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.

1

<script>twitter("img.twitter_image").hovercards({username: function(node) {return node.alt;}});</script>

kodu ile sitenizdeki twitter_image sınıfına sahip bütün resimleri yakalayıp resimlerin alt (alt özelliği ...return node.alt;}... kısmında belirleniyor, siz isterseniz title gibi başka özellikler kullanabilirsiniz.) özelliğinde kullanılan kullanıcı adına ait twitter profilini gösterebilirsiniz. Resim kodumuz ile şu şekilde olmuş oluyor;

1

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

Follow Buttons

Follow Button Örneği

1

<script>twitter('#follow_me').followButton({"brkzn"});</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({"brkzn"});... 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;

1

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

• 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.

1
2
3
4
5
6
7
8
9
10
11
12
13

<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. ;)