Mobil Sitenize Sosyal Paylaşım Linkleri Ekleyin - Php Html5 Css jQuery - Mobil, Android, ios, internet ve Teknoloji BLoGu

Mobil Sitenize Sosyal Paylaşım Linkleri Ekleyin Mobil Sitenize Sosyal Paylaşım Linkleri Ekleyin

Gönderen: Kaan   Tarih: 2018-09-05 16:05 Kategori: Php-Html5-Css-jQuery-Mysql | Okundu: 538 Onay sırasına at Düzenle Kopyası

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

Birç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!

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.

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.

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ğ linkipaylaş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;
}

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>

// 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 = '@Ntkaorg'; /* 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.



Yorumlar: (0)

Henüz yorum yapılmamıştır.

Yorum:

CAPTCHA