Anasayfa     Güncel Sürüm   BlogEngineTR Ağı   Bize Destek Olun   Forum   Wiki   Eklentiler   Temalar   BasIn Bülteni   Arşiv   İletişim

EkleBunu ve AddThis Butonu

27. Ağustos 2008 16:56 tarihinde Alp Çoker tarafından BlogEngine.NET kategorisinde yazılmıştır.

       AddThis ve türkçeleştirilip , türk sitelerini de barındıran EkleBunu servisleri size tek bir butonda bütün link paylaşım ve sosyal sitelerine kendi ziyaretçilerinizin herhangi bir yazınızı veya tüm sitenizi o sitelerde kaydetmesini , paylaşmasını sağlayabilirsiniz. Böylece sitenize yazdığınız bir yazıyı kendi ziyaretçilerinizin yardımıyla , yazdığınız konuları seven ilgili kişileri sitenize çekebilirsiniz. Daha önce yayınladığımız Sosyal Etiketler Eklentisi ile aynı işlevi yapıyor , fakat hem çok daha fazla site sunuyor , hem de çok az bir yer kaplayarak. Kendi blogengine sitemde AddThis 'in kendime göre özelleştirdiğim versiyonunu görebilirsiniz , her yazının sağ altında "PAYLAŞ" yazılı butonuna tıklayarak göz atabilirsiniz. EkleBunu da tamamen aynı işlevi sağlıyor isim benzerliğinden de anlaşılıyor.

 

Hangisini Seçmeliyim ( AddThis || EkleBunu ) ?

       İki servis de ücretsiz üyeliklerle size özel kod yaratıp , sitelerindeki kendi sayfanıza girince istatistik sağlıyorlar. Hangi gün , hangi yazım , kaç kez tıklanmış grafiklerle inceleyebiliyorsunuz. EkleBunu 'nun avantajı türk sitelerine de kayıt olabilmesi. AddThis'in avantajı ise site isminizin yazdığı ve site logonuzu koyabileceğiniz bir yer sağlıyor. Özelleştirme yapmak için AddThis daha avantajlı.  Ama her ikisinde de üzerine bastığınız butonu kendi sitelerinde örnek verdiklerinden birini seçebilir veya o butonu kendiniz yaratabilirsiniz . Ve EkleBunu kaliteli olmayan türk siteleri koyarak bazı benim gözümde önemli olan yabancı siteleri atlamış Twitter , MySpace  gibi ama bunlar AddThis'de var. İkisini de denemenizi öneririm.

Kurulum: EkleBunu

       Siteye üye olduktan sonra buton al sayfasında hangi tür buton istediğinize eklebunu butonunu seçiyoruz. [ Diğer seçenek RSS Ekle butonu ise BlogEngine'daki Abone Ol ( Subscribe to my Feeds)  ile aynı işlevi görüyor. RSS'inizi kaydedenlerin İstatistiğini tutmak isterseniz RSS butonunu da kullanabilirsiniz. ] "Hangi Buton" bölümünde beğendiğiniz bir buton varsa seçebilirsiniz , yok ben kendi butonumu yaratmak istiyorum derseniz oluşan daha sonradan oluşacak kodda butonun her ayarını HTML kodlarıyla butonu değiştirebiliriz. Daha sonra "Nereye" dediği yerde "Blog Sayfalarına" seçeneğini daha sonra altında oluşan yere de "Diğer" seçeneğini seçip "Butonu Al" dediğinizde size özel kodunuz oluşacaktır.

       Oluşan kodu BlogEngine'a uyarlamamız için bir kaç işlem yapmamız gerekiyor. İşlemleri gösterirken kendime özel oluşan kodları sizle paylaşacağım. Kişiye özel olmasını sağlayan yer ise  benim kodlarımda  k=8935  yazan yer. Buradaki kodları kopyalarken üst tarafta anlatığım özel kodunuzda oluşan k= ? sayısını kendinizinkiyle değiştirmeniz gerekiyor. İşlevinde bir farklılık yaratmaz ama kendi istatistiğinizi tutmanıza yarıyor. Aşağıda örnek kodu veriyorum. Daha sonra değiştirdiğim yerleri nedenleriyle beraber sizlere anlatacağım.

<!-- EkleBunu Sosyal Paylaşım Butonu kodu başlangıcı -->

<a href="http://www.eklebunu.com/ekle.php" onmouseover="actionListener(this);" onclick="window.open(' http://www.eklebunu.com/ekle.php?k=8935& amp;u='+ encodeURIComponent('<% =Post.AbsoluteLink.ToString()  %>')+'&amp;t='+ encodeURIComponent( ' <%=Post.Title.ToString().Replace("'","^").Replace("\"","+") %> '), 'eklebunu', ' scrollbars=yes, menubar=no, width=620, height=520, resizable=yes, toolbar=no,  location=no, status=no, screenX=200, screenY=100, left=200, top=100'); return false;" title="Tüm link Paylaşım sitelerine ekleyin!" target="_blank"><img src="http://www.eklebunu.com/pub/eklebuton2.gif" width="125" height="16" border="0" alt="EkleBunu Sosyal Paylaşım Butonu" /></a>

<!-- EkleBunu Sosyal Paylaşım Butonu kodu sonu -->

       EkleBunu işlevini gerçekleştirebilmesi için iki parametre alması gerekiyor. Yazı'nın adresi ve yazı'nın başlığı. EkleBunu sitesinde oluşan kodunuzu incelerseniz bu parametrelerin ilkinde   encodeURIComponent(location.href)   kullanıyor. Bu da yazıyı nerede okuyorsanız direk o anki adresi parametre olarak geçiriyor. Bu BlogEngine için çalışmaz çünkü BlogEngine'da bir sürü yazıyı anasayfa üzerinde okuyoruz. Örneğin bir ziyaretçi bir yazınızı beğenip delicious ' da kaydetti diyelim ama kodunuz yanlış olduğu için sizin anasayfanızı kaydetmiş olacak , daha sonra o yazıya ulaşmak isteyenler o yazıya ulaşamayacaklar. Aynı sorun yazı'nın başlığı için de geçerli. Sıradaki kod ile encodeURIComponent(document.title)  anasayfanın başlığını almış olacak sitenin verdiği kod ile. EkleBunu butonunun basıldığı yerdeki yazının başlığını ve adresini almasını sağlamamız gerekiyor.

EkleBunu'nun Yarattığı Kodu BlogEngine'a Geçirmek İçin Gerekli Olan Değişiklikler

1-)   encodeURIComponent(location.href)      yerine 

encodeURIComponent('<%=Post.AbsoluteLink.ToString()%>')

2-)  encodeURIComponent(document.title)   yerine

encodeURIComponent( '<%=Post.Title.ToString().Replace("'","^").Replace("\"","+")  %>')

<% =     %>  ile C# gömülü kodlarını kullanarak BlogEngine objelerini kullandım. İkinci yaptığım değişiklikteki iki tane replace'in nedeni ise başlıktaki yazılabilecek olası tırnak karakterlerini başka bir karaktere değiştirmek. Çünkü fazladan  ' ve " işaretleri javascript kodunun çalışmamasına dolayısıyla EkleBunu butonunuzun çalışmamasına neden olur. Ben ' işaretini ^ ile " işaretini de + ile değiştirdim. Siz istediğiniz bir karakter veya sadece boşluk bırakabilirsiniz.

Butonu Nereye Eklemem Gerekiyor?

       Üstteki işlemlerle kodumuz hazır , yerleştirilmeyi bekliyor. Kullandığınız tema'nın klasörünü açın ve içindeki PostView.ascx dosyasını [ themes\(kullandığınız tema)\PostView.ascx ] herhangi bir yazı editörüyle açıp , istediğiniz yere yerleştirin. img ile oynayıp kendi butonunuzu yaratabilirsiniz.

Kurulum: AddThis

       Tamamen aynı işlemlerden oluşuyor. Kodları da tamamen aynı olmasına rağmen AddThis için BlogEngine'a uyarlanmış versiyonunu aşağıya kopyalıyorum. Yine kişiye özel kod olduğu için pub=alpcoker  yazan yeri kendi kullanıcı isminiz ile değiştirmeniz gerekiyor , eğer istatistikleri öğrenmek istiyorsanız.

 <!-- AddThis Button BEGIN -->
<a href="http://www.addthis.com/bookmark.php" onclick="window.open('http://www.addthis.com/bookmark.php? wt=nw &pub=alpcoker &url='+encodeURIComponent(' <%=Post.AbsoluteLink.ToString()  %> ')+'&title='+encodeURIComponent(' <%=Post.Title.ToString().Replace("'","^").Replace("\"","+")  %> '), 'addthis', ' scrollbars=yes, menubar=no,width=620,height=520,resizable=yes, toolbar=no, location=no, status=no, screenX=200, screenY=100, left=200, top=100'); return false;" title="Bookmark and Share" target="_blank"><img src="http://s9.addthis.com/button1-addthis.gif" width="125" height="16" border="0" alt="Bookmark and Share" /></a>
<!-- AddThis Button END -->

 

Özelleştirilebilir AddThis

       Bu sayfadan butonunuzun kendi blogengine sitemdeki gibi daha küçük bir pencerede fareyle üzerine gelince veya tıklayınca açılmasını sağlayıp en çok kullandığınız sekiz siteyi oraya ekleyip geriye kalan siteleri de "More" tuşuna basılarak açılmasını sağlayan butonun kurulumunun anlatıldığı dökümanı bulabilirsiniz. Ayrıca bir çok görünüm ayarını değiştirebilirsiniz. Eğer üstte yazdıklarımı çalıştırabildiyseniz kendi sitem için hazırladığım bu kodu da incelemenizi öneririm.

            <script type="text/javascript">
            addthis_pub             = 'alpcoker';
            addthis_logo            = 'http://www.alpcoker.com/themes/Monochrome/images/alpcokerLogo.gif';            

            addthis_logo_background = '000000';
            addthis_logo_color      = '666699';
            addthis_brand           = 'alpcoker.com';
            addthis_offset_left = -55;
            addthis_options         = 'favorites, email, digg, delicious, myspace, facebook, google, live, more';
            </script>
            <a href="http://www.addthis.com/bookmark.php" onmouseover="return addthis_open(this, '', '<%=Post.AbsoluteLink.ToString()  %>', '<%=Post.Title.ToString().Replace("'","^").Replace("\"","+")  %>')" onmouseout="addthis_close()" >
                <img id="Img1" runat="server" src="~/themes/Monochrome/images/paylas.gif" width="103" height="17" border="0" alt="Bu yazıyı diğer sitelerde paylaş" />
            </a>
            <script type="text/javascript" src="http://s7.addthis.com/js/152/addthis_widget.js"></script> 

 

Bu yazıyı diğer sitelerde paylaş

Etiketler: ,

Yorumlar


Yorum ekle


 

  Country flag ( Kendi Siteme Nasıl Ekleyebilirim? )

biuquote
  • Yorum
  • Canlı önizleme
Loading