adobewordpress ~ güncel tasarım okulu
  • Adobe
    • Photoshop Dersleri
    • After Effects Dersleri
    • Illustrator Dersleri
  • WordPress
    • Eklentiler
    • Temalar
    • Güvenlik
  • Duvar Kağıtları
  • Tasarım Unsurları
    • PHP Dersleri
    • HTML5 Dersleri
    • CSS Dersleri
    • jQuery
    • Bootstrap
    • SEO Dersleri
    • Kaynaklar
    • İlham Verenler
    • Diğer Konular
  • Video Dersler
  • Yazarlar

Mobil Sitenize WhatsApp ve Diğer Sosyal Paylaşım Linkleri Ekleyin

Vatanay Özbeyli CSS3, HTML5, jQuery

mobile-social-shareBirçok popüler web sayfasının mobil versiyonunda karşımıza çıkan sosyal ağ paylaşım linklerini hatırlar mısınız? Özellikle Facebook, Twitter, LinkedIn gibi ağlar dışında mobil cihazlara özel WhatsApp‘ı da destekleyen bu yapılar sitenizin trafiğini ve bilinirliğini büyük bir hızla arttıracaktır.

Bugün sizlerle sadece HTML, CSS ve JavaScript yazarak sadece mobil cihazlarda gözüken şık bir sosyal ağ paylaşım barı oluşturacağız.

Hem de 1 satır programlama yazmadan!

ÖRNEĞİ GÖRÜNTÜLE

Mobil cihazlara özel sosyal paylaşım linkleri nasıl oluşturulur?

Yapmamız gereken şeyleri sıralandıralım :

  1. Siteye girilen cihazın mobil olup olmadığına bakmalıyız.
  2. İkonları göstermek için sitede Font Awesome yüklü mü değil mi diye kontrol etmeli, yüklü değilse JavaScript ile pageload’da yüklemeliyiz.
  3. Görüntülenen sayfanın başlığı ve URL’ini dinamik olarak kontrol etmeliyiz.
  4. Twitter paylaşımları için sitemizin kullanıcı adını (varsa) atılacak tweet içerisine eklemeliyiz.
  5. Bütün sosyal ağ linkleri ekledikten sonra sayfamız içerisine import etmeliyiz.

Adobewordpress Facebook sayfamızda sizlerden gelen bir soruda takipçimiz şu soruyu soruyor : “9GAG’de beğendiğimiz görselleri WhatsApp üzerinden arkadaşlarımızla paylaşabiliyoruz. Ve bu özellik sadece mobil cihazımda gözüküyor. Aynı yapıyı kendi siteme en kolay yoldan nasıl uygularım?”

Merak etmeyin. Bu işi sandığınızdan da kısa sürede halledeceğiz. En sonunda da aşağıdakine benzeyecek.


Tam sayfa görüntüle

Beğendiniz değil mi? Hazırsanız başlayalım.


HTML Kodları

Şaşıracak bir şey yok. Bu işlemleri yapmamız için bir HTML koduna ihtiyacımız yok. İlgili kodları JavaScript ile çağırıp web sitemizin belirli bölgelerine yerleştireceğiz.

Oluşturacağımız JavaScript HTML append işlemleri SEO kaygısı ile hazırlanmış, sitenizin iskeletine uyumlu olarak çalışmaktadır.

CSS Kodları

Web sitemizin tüm öğelerinin üstünde, sitenin en altında gözükmesini istediğimiz socialShare classına sahip barımızın temelini oluşturalım.

section.socialShare {
  padding: 0;
  margin: 0;
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 1999999999;
}

socialShare isimli barımızın içerisindeki tüm linklerde olmasını istediğimiz özellikleri belirtelim. 5 tane sosyal ağ linki paylaşacağımız için 100%’ü yakalamak için öğe başı %20’lik bir değer kullanıyoruz.

section.socialShare > a {
  display: inline-block;
  width: 20%;
  height: 45px;
  background: #333;
  text-align: center;
  line-height: 45px;
  -webkit-box-sizing: border-box;
  -khtml-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}

Şimdi de sosyal ağlarımızın renklerini ekleyelim.

section.socialShare a.facebook {
  background: #4a67b7;
}

section.socialShare a.twitter {
  background: #22b0f2;
}

section.socialShare a.linkedin {
  background: #007bb5;
}

section.socialShare a.whatsapp {
  background: #2ab200;
}

section.socialShare a.email {
  background: #bc1515;
}

Diğer sosyal ağların renklerini öğrenmek istiyorsanız : Sosyal Paylaşım Sitelerinin Renk Kodları

Bu da ilginizi çekebilir  En İyi Wordpress Sosyal Paylaşım Eklentileri

Son olarak sosyal ağ linklerimizin bağlantı stillerini düzenleyelim.

section.socialShare > a,
section.socialShare > a:hover,
section.socialShare > a:visited,
section.socialShare > a:active {
  color: white !important;
  text-decoration: none !important;
}

JavaScript Kodları

Öncelikle sayfanızda jQuery tanımlı olup olmadığına bakın. Eğer yoksa body‘nin bittiği yere, tanımının hemen öncesine jQuery’i ekleyerek devam edelim.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

Aşağıdaki kod kalıbını hiç bölmeden, sizlerin de işini zorlaştırmadan satır yanlarına yorumlar ekleyerek paylaşıyoruz.

// Mobil cihazdan girilip girilmediği kontrol eden bir if ile başlayalım.
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
var twitterUser = '@adobewordpress'; /* Twitter hesabınız */

var shareURL = window.location.href // Sayfa adresi 
var shareTitle = document.getElementsByTagName("title")[0].innerHTML; // Sayfa başlığı
var shareTweetdata = shareTitle + ' ' + twitterUser + ' '; // Atılacak tweet

// Eğer sitenizde Font Awesome bulunmuyorsa <head></head> içerisine dinamik olarak ekleyelim. 
document.fonts.ready.then(function() {
  if (document.fonts.check('1em "FontAwesome"') != true) {
    $('head').append('<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">');
  }
});

var dataList = '<section class="socialShare">' +
  '<a class="facebook" href="https://www.facebook.com/sharer/sharer.php?u=' + shareURL + '"><i class="fa fa-facebook"></i></a>' +
  '<a class="twitter" href="https://twitter.com/intent/tweet?text=' + shareTweetdata + '&amp;url=' + shareURL + '"><i class="fa fa-twitter"></i></a>' +
  '<a class="linkedin" href="https://www.linkedin.com/shareArticle?mini=true&amp;url=' + shareURL + '&amp;title=' + shareTitle + '"><i class="fa fa-linkedin"></i></a>' +
  '<a class="whatsapp" href="whatsapp://send?text=' + shareTitle + '%20' + shareURL + '"><i class="fa fa-whatsapp"></i></a>' +
  '<a class="email" href="mailto:?subject=' + shareTitle + '&amp;body=' + shareURL + '"><i class="fa fa-envelope"></i></a>' +
  '</section>';

$('body').prepend(dataList); // Sosyal ağ linklerini body elemanı içerisine yazdırıyoruz.
}

Böylece işlemi tamamlamış oluyoruz. Artık sadece akıllı cihazlarda görünen bir sosyal paylaşım barına sahipsiniz.


WordPress’e nasıl eklenir?

Bu tasarımı WordPress’e eklemek için ilgili kodları aşağıdaki dizinlere yerleştirmeniz yeterli.

CSS kodlarımızı wp-content/themes/temanız alanındaki CSS dosyasının en altına ekleyebilirsiniz.
HTML ve JavaScript kodlarını wp-content/themes/temanız/footer.php dosyasının en altına ekleyebilirsiniz.

Hazırladığımız kodlar sayfanızın adresini ve açıklamasını otomatik olarak alacağı için herhangi bir PHP geliştirme yapmanıza gerek yoktur.


Bitirmeden Önce

Yaşadığınız problemleri yorum alanında bizlerle paylaşarak bu tasarımı güçlendirmemize yardımcı olabilirsiniz.

İyi çalışmalar.

akıllı telefondan paylaş facebook paylaş linkedin paylaş mail at mobil cihazlara özel Social Share sosyal ağ paylaşım twitter paylaş whatsapp paylaş


Yazı navigasyonu

Yandex Partner ile Web Sitenizden Para Kazanın
15 Ücretsiz HTML5 Teması

SOSYAL

E-Posta Aboneliği

Güncel eğitimlerden haberdar olmak ister misin?




Arama

Benzer Yazılar

  • En İyi WordPress Sosyal Paylaşım Eklentileri

Popüler Örnekler

  • Ambilight ile Bootstrap Slider Kullanımı 17045
  • Sitenize Haber ve Duyuru Akışı Ekleyin 12732
  • Yukarı Scroll Edildiğinde Gözüken Header 12614
  • Material Design Öne Çıkarılmış Menü Tasarımı 11535
  • Mobil Sitenize WhatsApp ve Diğer Sosyal Paylaşım Linkleri Ekleyin 10993
  • Sitenize Kolayca Slider Ekleyin 10853
  • Sadece CSS ile Slider Yapımı 9725
  • CSS ve jQuery ile Dönen Menü 9555
  • Fareyle Birlikte Hareket Eden Arkaplan Resmi 9227
  • jQuery ile Scroll ve Arkaplan İlişkisi 7766

Kategoriler

  • Photoshop Dersleri97
    • Fotoğraf Efektleri
    • Yazı Efektleri
    • Actionlar
    • Fırçalar
    • Patternler
    • İpuçları
  • After Effects Dersleri4
  • Illustrator Dersleri4
  • WordPress84
    • Eklentiler
    • Temalar
    • Güvenlik
  • Tasarım Unsurları118
    • PHP Dersleri
    • Bootstrap
    • HTML5
    • CSS3
    • jQuery
    • SEO
    • Kaynaklar
    • İlham Verenler
    • Diğer Konular
  • Video Dersler57
  • Öne Çıkanlar110

Bağlantılar

  • Anasayfa
  • Hakkımızda
  • Reklam
  • Kullanım
  • Yazarlık Başvurusu
  • Arşiv
  • İletişim

Kategoriler

  • Tasarım Unsurları 396
  • Öne Çıkanlar 110
  • Photoshop Dersleri 124
  • WordPress 106
  • Video Dersler 57
  • Illustrator Dersleri 4
  • After Effects Dersleri 4
  • Sizden Gelenler 4

Adobe Download
Tasarım dünyasına detaylı bir giriş yapmak mı istiyorsunuz? Creative Cloud'u şimdi bilgisayarınıza kurun!

Download Adobe Photoshop CC
Download Adobe After Effects CC
Download Adobe Flash Pro CC
Download Adobe Dreamweaver CC
Download Adobe Illustrator CC
Download Adobe InDesign CC

Uyuya mı kaldın?

10 dakikadır bir işlem yapmadın. Yoksa uyuya mı kaldın?
ÖNE ÇIKANLAR
  • Photoshop ile T-Shirt Tasarımı
  • Photoshop ile Yüzeysel Makyaj ve Özgün Fotoğraf Efekti
  • Material Design Öne Çıkarılmış Menü Tasarımı
  • Birbirinden Kaliteli 10 Ücretsiz WordPress Teması
 

Yorumlar Yükleniyor...