Sosyal Medyadan Web Sitesine Eklentiler

Facebook, Twitter, GitHub, Blog gibi alanlardan içerikler web sitemize nasıl eklenir, nasıl bağlanır? Gelin öğrenelim…

Bu yazıda şu soruların cevapları örneklerle açıklanmıştır:

Facebook, Twitter, GitHub düğmeleri (ikonlar) ve bağlantılar nasıl oluşturulur?
Web sayfalarına sosyal medya paylaşım ikonları nasıl eklenir?
Facebook ve Twitter sayfalarından istediğimiz içerikler web sayfalarına nasıl alınır?

Örnek çözümü buradan JSFiddle-Netsentez inceleyebilirsiniz.

sosyal medya ikonları…

İkonlar ve Bağlantılar nasıl oluşturulur?

Bir web sitemiz, bir Facebook sayfamız, bir Twitter sayfamız, bir GitHub hesabımız ve çeşitli bloglarımız var. Sitemize önce bu içeriklerin ikonlarını almalı ve bağlantıları oluşturmalıyız. En kapsamlı ve yaygın kullanılan ikon kütüphanesi buradadır:

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css`

Web sayfasına bu bağlantıyı ekleyerek kütüphaneye erişim sağlıyoruz.

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
</body>
</html>

Kullanacağımız dört ikon tanımı:

GitHub yazılım bloğu için: <i class="fa fa-github-square"></i>
GitHub hesabı için: <i class="fa fa-git-square"></i>
Facebook için: <i class="fa fa-facebook"></i>.
Twitter için: <i class="fa fa-twitter"></i>

Bu dört ikonu ve bağlantılarını sayfamızın gövde <body></body> kısmında istediğimiz bir yere ekliyoruz.

Ek Açıklama:

Bu örnekte Bootstrap CSS stilleri kullanılmıştır. <head></head> kısmında şu bağlantılar verilir.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>

Şimdi devam edelim. Dört ikonu ve bağlantılarını sayfamızın gövde <body></body> kısmında istediğimiz bir yere ekliyoruz.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="container">
  <ul class="list-group">
    <li class="list-group-item">
      <i class="fa fa-github-square"></i> <a href="https://netsentez.github.io/"> Yazılım</a>
    </li>
    <li class="list-group-item">
      <i class="fa fa-git-square"></i> <a href="https://github.com/netsentez"> GitHub</a>
    </li>
    <li class="list-group-item">
       <i class="fa fa-facebook"></i> <a href="https://www.facebook.com/netsentez/"> Facebook</a>
    </li>
    <li class="list-group-item">
      <i class="fa fa-twitter"></i> <a href="https://twitter.com/netsentez"> Twitter</a>
    </li>
  </ul>
</div>  
</body>
</html>

İkonlar standart stillerde gelir, onları istediğimiz büyüklük, yerleşim ve renklere ayarlamak için CSS stillerini kullanırız. <head><style></style></head> etiketleri içinde stilleri tanımlarız.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.fa {
  padding: 5px;
  font-size: 20px;
  width: 30px;
  text-align: center;
  text-decoration: none;
  margin: 0px 8px 0px 0px;
}
.fa-facebook {
  background: #3B5998;
  color: white;
}
.fa-twitter {
  background: #55ACEE;
  color: white;
}
.fa-github-square {
  background: #804d00;
  color: white;
}
.fa-git-square {
  background:  #804d00;
  color: white;
}
.fa-file-text {
  background: #b33c00;
  color: white;
}
</style>  

</head>
<body>
<div class="container">
  <ul class="list-group">
    <li class="list-group-item">
      <i class="fa fa-github-square"></i> <a href="https://netsentez.github.io/"> Yazılım</a>
    </li>
    <li class="list-group-item">
      <i class="fa fa-git-square"></i> <a href="https://github.com/netsentez"> GitHub</a>
    </li>
    <li class="list-group-item">
       <i class="fa fa-facebook"></i> <a href="https://www.facebook.com/netsentez/"> Facebook</a>
    </li>
    <li class="list-group-item">
      <i class="fa fa-twitter"></i> <a href="https://twitter.com/netsentez"> Twitter</a>
    </li>
  </ul>
</div>  
</body>
</html>

Sayfa bu haliyle yayınlandığında ikonlar görünecek, bağlantılar çalışacaktır.

Sosyal Medya Paylaşım Düğmeleri Nasıl Eklenir?

En pratik yol AddToAny sitesine gitmek, Get The Share Buttons düğmesini tıklamak, Any WebSiteı seçmek, Get Button Codeu tıklayarak kodu almaktadır. Web sayfasında paylaşım düğmelerinin görünmesini istediğimiz alana bu kodu yapıştırıyoruz. Bu kadar!

<!-- AddToAny BEGIN -->
<div class="a2a_kit a2a_kit_size_32 a2a_default_style">
<a class="a2a_dd" href="https://www.addtoany.com/share"></a>
<a class="a2a_button_facebook"></a>
<a class="a2a_button_twitter"></a>
<a class="a2a_button_email"></a>
</div>
<script async src="https://static.addtoany.com/menu/page.js"></script>
<!-- AddToAny END -->

Twit İçeriği Web Sayfasına Nasıl Eklenir?

Twitter hesabımızda sitemize almak istediğimiz Twitin üst sağındaki oku tıklıyoruz, </> Twiti Katıştır seçeneğini seçiyoruz, kodu kopyalıyoruz, web sayfamızda uygun gördüğümüz bir alana yapıştırıyoruz. Bu kadar!

<blockquote class="twitter-tweet"><p lang="tr" dir="ltr">Herkese Merhaba. Blog yayın bağlantılarımı burada da paylaşıyorum. <a href="https://t.co/Qt7pC6tBBu">https://t.co/Qt7pC6tBBu</a> <a href="https://t.co/PFd2JW9hMv">pic.twitter.com/PFd2JW9hMv</a></p>&mdash; Nizamettin Kaya (@netsentez) <a href="https://twitter.com/netsentez/status/1212327989385613312?ref_src=twsrc%5Etfw">January 1, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Facebook Sayfası Web Sayfasına Nasıl Eklenir?

Ekleyeceğimiz Facebook sayfasının linkini panoya kopyalıyoruz, Facebook Plugin sayfasına gidiyoruz. Facebook Page URL alanına sayfamızın linkini yapıştırıyoruz, istediğimiz ayarları yaptıktan sonra GetCodeu seçerek kodu alıyoruz. Kod, step 1 ve step 2 olarak iki parçadır. Birincisi JavaScript kod erişimi, ikincisi html katıştırma kodudur. Her iki kodu da kopyalayarak sayfamızın uygun gördüğümüz alanına yapıştırıyoruz. Bu kadar!

Step 1:

<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/tr_TR/sdk.js#xfbml=1&version=v5.0"></script>

Step 2:

<div class="fb-page" data-href="https://www.facebook.com/netsentez/" data-tabs="timeline" data-width="" data-height="" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/netsentez/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/netsentez/">Netsentez</a></blockquote></div>

Sonuna kadar incelediğiniz için teşekkürler…