jQuery Facebook Fotoğraf Galerisi Eklentisi

Facebook kalite hedefli trafik için bir numaralı kaynak olduğunu ortaya koymuş bir sosyal platform. Bugün bu yazıda size Nasıl Blogger'da bir jQuery Facebook Fotoğraf Galerisi Oluşturulur onu göstereceğim. Bu eklenti Facebook sayfanızda paylaştığınız tüm albüm ve fotoğraflarınızı web sitenizde, blogunuzda görüntülemeyi sağlar. Tüm sistem jQuery ile çalışır. Ayrıca Lightbox işlevselliği sayesinde sitenizin içinde fotoğrafları görüntüleyebilirsiniz. Farklı albümlerizi tarayabilir ve başladığınız yere geri yere gidebilirsiniz. Facebookta çok vakit geçiren ve çok fotoğraf paylaşan kullanıcılar için güzel bir eklenti.

Örnek jQuery Facebook Fotoğraf Galerisi Eklentisi

Blogger'da jQuery Facebook Fotoğraf Galerisi Nasıl oluşturulur?

Facebook fotoğraf galerisini yükleme:

Google hesabınıza giriş yapın.

Blogger > Şablon

Şablonunuzun yedeğini alın!

HTML'yi Düzenle > tıklayıp devam edin

</head> kodunu bulun ve hemen üstüne aşağıdaki komut dosyalarını kopyalayıp yapıştırın:

<link media="all" href="http://meftun-mede.googlecode.com/svn/trunk/Meftun-fancybox.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://meftun-mede.googlecode.com/svn/trunk/Meftun_fancybox.min.js"></script>

Şablonu Kaydet diyip bir sonraki adıma geçiyoruz.

Şimdi Facebook Sayfa profil kimliğini bulmak gerekiyor (şunu hatırlatayım; Herkeze açık profil sayfalarda çalışır).
Facebook Sayfa kimliği ID'sini bulmak için http://findmyfacebookid.com'a gidin.
Ve Sayfa URL'sini girin yani http://www.facebook.com/MeftunApart gibi.
Sayfanızın sayısal kimlik ID'sini almak için “Lookup Numeric ID” butonuna basın.

Şimdi Blogger kontrol panelinde Yerleşim sonra eklentiyi görmek istedigimiz yere Gadget ekle sonra HTML/JavaScript'i buluyoruz. Sonra aşağıdaki kodları Sayfa kimliği ID'nizi girdikten sonra kopyalayıp yapıştırın.

<div id="FB_Album_Frame"></div>
<script type="text/javascript" src="https://meftun-mede.googlecode.com/svn/trunk/MeftunMede_fancybox.js"></script>
<script>
$(document).ready(function ($) {
    $('#FB_Album_Frame').FB_Album({
        facebookID: 'Sayfa_kimliği_ID',
        responsiveGallery: false
   });
});
</script>

Tebrikler :
Herşey bittikten sonra, yayınlayabilirsiniz. Başarıyla Blogger'da bir Facebook jQuery Fotoğraf Galerisi oluşturduk. Şimdi düzgün bi şekilde çalışıp çalışmadığını kontrol edin.
Umarım hoşunuza gitmiştir. Kodu kopyalayıp bloğunuza yada websitenizin istediğiniz bölümüne yapıştırın.
Kodu denemek için Online html editor'ü kullanabilirsiniz. Yapamadığınız bir şey olursa "YORUM" kısmında belirtebilirsiniz. iyi bloglamalar...

SPAM Yorumlardan Kurtulmak İçin 2 Teknik

Blogların en keyifli ve faydalı yerlerinden biri yorum bölümleri. Blogların yorum bölümleri genelikle iyi niyetli, fayda sağlamayı, iletişim kurmayı veya yazı hakkında düşünceleri belirtmek amamçlı kullanılsa da, SEO yapmak isteyen kişilerin sadece backlink kazanmak için bıraktıkları anchor text üzerinden link içeren yorumlara da rastlıyoruz ne yazık ki. Özellikle de Blog Hocam gibi yorum moderasyonu olmayan, yani yorumların otomatik olarak onaylandığı bir blogunuz varsa, SPAM yorumlarla başınız bir hayli dertte olabilir.

Blogger tabanlı bloglar için SPAM yorumlara çözüm olabilecek 2 teknik paylaşmak istiyorum. Bu teknikler bir yorumun spam olup olmadığını anlamıyor ama yorum bölümündeki tüm linklere müdahele ediyor. Yani anchor text üzerinden link verilerek yapılan yorumlardaki linkleri kaldırıyor. Böylece spammerler emeline ulaşamıyor ve blogunuzu yorum listelerinden çıkarıyorlar. (Umarım…)

Teknikleri blogunuza nasıl uygulayacağınızı ve ne işe yardıklarını örneklerle açıklayayım.

 

Bir spammerın blogunuza “SPAM sitemize gitmek için buraya tıklayın” şeklinde bir yorum bıaktığını düşünelim. Burada spammer “buraya” kelimesi üzerinden kendi sitesine link vermiş. Amacımız ise uygulayacağımız tekniklerle spammerın linkini iptal etmek.



1. Teknik: Kelime Kalsın Ama Tıklanabilir Olmasın

Bu teknikle yorumdaki “buraya” kelimesine dokunmayacağız fakat buraya kelimesinin tıklanabilirliğini ortadan kaldıracağız. Yani yorum, linksiz bir yorum olacak.

Bu tekniği blogunuza uygulamak için Blogger kumanda panelinde Şablon > HTML’yi Düzenle yolunu takip edin ve </body> kodunun üzerine şu kodları ekleyin:

 

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
$('.comment-content a[rel$=nofollow]').replaceWith(function(){return ($(this).text());});
</script>

 

2. Teknik: Link Ve Kelime Tamamen Kalksın

Bu teknikte ise link ve linkin bağlı olduğu kelimeyi yorumdan tamamen kaldırıyoruz. Yani spam yorum örneğindeki “buraya” kelimesi hiç gözükmeyecek.

Bu tekniği blogunuza uygulamak istiyorsanız yine Şablon > HTML’yi Düzenle yolunu takip edin ve ]]></b:skin> kodunun üzerine aşağıdaki kodları ekleyin:

 

.comment-content a {
display: none;
}

 

Not: Bu kodları blogunuza uyguladığınız eski ve yeni tüm yorumları etkileyeceğini hatırlatmak isterim. Tabi bu durumda siz de artık yorum bölümünde link pylaşamayacaksınız.

 

Herkese bol yorumlu bloglar dilerim :)

YouTube Video Yayın Akışı Eklentisi

Biliyorsunuzki YouTube Şubat 2005'te kurulan ve milyarlarca kullanıcının orijinal olarak oluşturulmuş videoları keşfetmesine, izlemesine ve paylaşmasına olanak vermektedir. Bu yazıda Yotube videolarınızı küçük parçalar (snippet) halinde sidebarınızda nasıl yayınlayacağınızı gösterecem. Bu eklenti Jake Handling tarafından geliştirilmiştir. Web sitenizde bir widget yaratan yeni bir "Yunero" jQuery eklentisidir. Sadece Youtube kanal URL'sini belirtin ve bu widget kanaldan son yüklenenler videolarınızı gösterecektir. Ayrıca youtube çalma listenizin URL'sini belirtebilirsiniz ve video çalma listeniz ekrana gelecek. Videoya tıklandığında eklentinin kendi içinde hemen üst tarafta izlenilebilir özelliği var. Bu eklentiyi wesitenizde/blogunuzda kullanarak izleyicilerinizi/abonelerinizi arttırabilirsiniz.

Blogunuza / Websitenize YouTube Video Yayın Akışı Eklentisini Ekleme

1. Aşağıda gösterildiği gibi Youtube Kanalı veya Oynatma Listesi yazan yere youtube kanal URL'nizi yada Oynatma Listesi URL'nizi girin.
Örnek: (http://www.youtube.com/user/Meftun48) yada
(http://www.youtube.com/playlist?list=UUQY8ropVDUm_5w5XmqHnIgMQ-M) gibi...
2. Oluştur ve Önizleme'yi tıklayın.
3. Son olarak Blogger'a Ekle'yi tıklayın yada Aşağıdaki Oluşturulmuş Kodu kopyalayıp yapıştırın.

YouTube Video Yayın Akışı Eklentisi Widget Oluşturucu

YouTube Widget Oluşturucu yardımıyla kolayca blogunuza veya web sitenize YouTube Video Akışını gösterilmesini sağlayabilirsiniz.


Not: Widget Oluşturucuyu Kullanmadan Önce Blogger hesabınıza giriş yapın. Şimdi Blogunuzu kontrol edin. Eklentiniz hazır.
Yapamadığınız bir şey olursa "YORUM" kısmında belirtebilirsiniz. iyi bloglamalar...

Optimizasyon Değil, Hümanizasyon

Blog dünyası SEO, para kazanma, dijital pazarlama, pagerank, backlink gibi kavramlarla tanışmaya başladıktan sonra boyut değiştirdi bence. Anahtar kelime ve SEO kaygısıyla yazılan blog yazılarını okuduğunuzda sanki insanlar için değil de robotlar için yazıldığı hissine kapılıyorsunuz.  Artık kişisel bloglar bile “kişisel” olmaktan çıktı. Samimiyetten uzak, sırf ziyaretçi çekmeye yönelik içeriklerle dolmaya başladı.

Öyle ki tek bir kişinin yazdığı blogu okuduğunuzda “bizi takip edin, bize ulaşın, bize reklam verin, yorumlarınızı bekliyoruz” gibi ibareler yer alıyor. “Siz” kimsiniz?  Herkes biliyor ki o yazıyı “sen” yazıyorsun. Bu da işin ayrı bir boyutu.

Arama motoru optimizasyonu hakkında hem burada, hem de diğer sitelerde pek çok kaynak var, olmaya da devam edecek. Ancak söz konusu bloglar olunca markaların ve reklamverenlerin beklentileri farklı oluyor. “Engagement” dediğimiz okuyucuyla kurulan bağ ve etkileşimin gücü önem kazanıyor. İşte burada yüzlerce, binlerce lira harcanan optimizasyon tekniklerinin hiç bir önemi kalmıyor. Devreye ilişki kurmaya ve samimiyet dayalı bir kavram olan hümanizasyon giriyor.


Blog Hümanizasyonu Nedir?

Blogunuzu nasıl arama motorları için optimize ediyorsanız, insalar için de hümamize etmeli yani insancıllaştırmalısınız. Bazılarınıza saçma gelebilir ama başarılı blogların ve blog yazarlarının başarılarının altında yatan en büyük sırlardan biri budur.

Gelelim blogunuzu insancıllaştırmak için neler yapabileceğinize.

- Yorumları Yanıtlayın

Okuyucuyla en iyi iletişim kurabileceğiniz yer yorum bölümü. Yorum bölümünün yönetimine dikkat etmenizi öneririm. Spam ve reklam yorumları silip seviyeyi korumak, okuyucuyu yorum yazmaya teşvik edebilir. Yorumlara samimi bir dille cevap vermeli ve yazacağınız cevapla tatmin etmelisiniz.

- Erişilebilir Olun

”Hakkımda” sayfanıza ve blogunuzun muhtelif yerlerine profil resminizi, e-mail adresinizi, sosyal medya hesaplarınızı koymanız, samimiyet ve iletişim açısından çok önemlidir.  “Ben buyum, buralardayım, bana istediğin zaman ulaşabilirsin” mesajını vermiş olursunuz.

- Konversiyonal Bir Dil Kullanın

Yazılarınızda, yorumlarınızda, mesajlarınızda, kısacası okuycuyla iletişim kurduğunuz her platformda samimi, konuşkan, diyalog kurarcasına bir dil kullanın. Okuyucuya karşılıklı konuşuyormuş hissini vermelisiniz. Tabi laubaliliğe kaçmamak şartıyla.

- Hikaye Katın

Teknoloji, sanat, bilim, pazarlama, işletme vs. yazınızın konusu ne olursa mutlaka kendinizden ekleyeceğiniz bir şeyler vardır. Teknik bir bilgi paylaşırken bile o bilgiyle alakalı hayatanızdan küçük bir anekdot eklemek yazıyı özgün kılacağı gibi blogunuzu hümanize edecektir. Hatta son zamanlarda pazarlama dünyasına giren  “storytelling” kavramı en etkili satış & pazarlama stratejilerinden biri olarak görülüyor.

- Google Authorship’e Geçiş Yapın
 
Google Authorship’e geçiş yaptıktan sonra, arama sonuçlarında çıkan yazılarınızda o yazının tarafınızca yazıldığı belirtilecek ve profil resminiz gözükücektir. Google Authorship arama sonuçlarına arasında dikkat çekerek tıklanma oranını arttıracağı gibi blogunuzun hümanizasyonuna da katkı sağlayacaktır.

Not: Hümanizmi hepimiz biliyoruz fakat hümanizasyon kelimesi tamamen benim uydurmam. Literatürde böyle bir kavram var mı yok mu gerçekten bilmiyorum :)

Blog Yazılarının Altına Yazar Bilgi Kutusu

Blogunuzda, yazılarınızın/yayınlarınızın hemen altında, sizi yada blogunuzu tanıtan bir eklenti istermisiniz? Yazar bilgi kutusu, her blog yazısının sonunda yer alan ve yazarla ilgi kısa bilgiler ile iletişim bilgilerini içeren bir kutudur. Yazar hakkında eklentisi sayesinde kendiniz hakkında bilgi verebilir, ne ile uğraştığınızı, ilgi alanlarınızı vs. kendinizi ziyaretçilerinize kısaca tanıtabilirsiniz. Sade ve kullanışlı bu kolay eklenti sayesinde blogunuzda yazılarınızın altında kendi tanıtımınız ve resminizi ekleyebilirsiniz. Her renge ve boyuta ayarlanabilen bu eklenti kesinlikle çok işinize yarayacaktır.

• 4 Sosyal Ağ bağlantısı
• Uyumlu ve Esnek tasarım
• Yazar fotoğraflı
• Kısa Biyografi Özeti
• Özelleştirilebilir
• Uygulaması Kolay

Demo Görüntüsü

1. Blogger panelinize giriş yapın Şablon → HTML'yi Düzenle
2. Ctrl+F yardımı ile <b:includable id='post' var='post'> kodunu aratıp bulun.


Ve Genişletin (►).


Resimde görüldügü gibi post alanı </b:includable> ile bitiyor.
hemen üstüne aşağıdaki kodları kendinize göre düzenleyip, kopyalayıp yapıştırın.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="yazar-hakkinda">
<h3 class="kutubasligi">YAZAR HAKKINDA</h3>
<div class="yazarkutusu">
<div class="yazarsosyal">
<li><a class="fb" href="https://www.facebook.com/meftunmede.blogger" rel="nofollow"></a></li>
<li><a class="twitter" href="https://twitter.com/MeftunMEDE" rel="nofollow"></a></li>
<li><a class="google" href="https://plus.google.com/113884753756003696845" rel="author"></a></li>
<li><a class="in" href="http://linkedin.com/in/meftunmede" rel="nofollow"></a></li>
</div>
<div class="yazarinfo">
<img src="http://Profil-Resminiz.jpg" alt="Author"/>
<p>Yazar Hakkında kısa bilgi...<a href="http://meftunmede.blogspot.com">Devamını Oku</a></p>
</div>
</div>
</div>
</b:if>

Yukarıdaki kırmızı ile belirttiğim alanları kendinize göre düzenlemeyi unutmayın!

3. Şimdi CSS kodunu ekleyerek yazar kutusuna stil verelim. Tekrar ]]></b:skin>  kodunu aratıp bulun ve hemen üstüne aşağıdaki kodları kopyalayıp yapıştırın.

.yazar-hakkinda{width:100%;}
.yazarkutusu{overflow:hidden;background:#26292c;color:#ccc;padding:0;box-shadow:1px 3px 4px #bcbcbc;}
.yazarkutusu .yazarinfo{color:#ccc;}
.yazarkutusu .yazarsosyal{float:left;}
.yazarkutusu .yazarsosyal li{list-style:none;position:relative;margin:0;}
.yazarkutusu .yazarsosyal li a{width:32px;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV73ubASsgbdopbVn2nkNjQSVaGvrS1rz-3wqr_2as4Up5wT0cT0ZXt43y3d29c6gHp30vv9Hu4H41Mf6KEsu-g6oAeIOX85Jm1X3Zgkps-rHj_yk4FJpSOKZREb-fIwzuVx8ZvVj9MZk/s1600/yazarkutusu_social_logo.png);height:32px;margin:0;}
.yazarkutusu .yazarinfo img{float:left;border-radius:100%;width:17%;background:#fff;margin:4px 10px 4px 5px;padding:5px;}
.yazarkutusu .yazarinfo p{font-size:18px;line-height:25px!important;font:15px georgia, Arial;text-align:left;margin:0;padding:5px;}
.yazarinfo p a{text-decoration:none;color:#1BC3F8;-webkit-transition:.5s;-moz-transition:.5s;-o-transition:.5s;-ms-transition:.5s;transition:.5s;padding:2px 4px;}
.yazarinfo p a:hover{background:#2882b7;color:#fff;}
h3.kutubasligi{background:#26292c;color:#fff;text-align:center;width:25%;font:17px georgia, Arial;margin:0 auto;padding:2px 10px;}
.yazarkutusu .yazarsosyal li .fb{background-position:0 0;}
.yazarkutusu .yazarsosyal li .twitter{background-position:0 -32px;}
.yazarkutusu .yazarsosyal li .google{background-position:0 -64px;}
.yazarkutusu .yazarsosyal li .in{background-position:0 -96px;}
.yazarkutusu .yazarsosyal li .in:hover{background-position:-32px -96px;}
.yazarkutusu .yazarsosyal li .google:hover{background-position:-32px -64px;}
.yazarkutusu .yazarsosyal li .twitter:hover{background-position:-32px -32px;}
.yazarkutusu .yazarsosyal li .fb:hover{background-position:-32px 0;}
.yazarkutusu:hover img{background:#1BC3F8;}
.yazarkutusu .yazarinfo img,.yazarkutusu .yazarsosyal li a{-webkit-transition:.5s;-moz-transition:.5s;-ms-transition:.5s;-o-transition:.5s;transition:.5s;}

4. Şablonu Kaydet diyip çıkıyoruz.
Not: Bu eklenti tek yazarlı bloglar içindir.
Yapamadığınız bir şey olursa "YORUM" kısmında belirtebilirsiniz. iyi bloglamalar...