Blogger'da Otomatik İnstagram Embedleri Nasıl Eklenir?

Her bir Instagram içeriğini tek tek embed etmek zaman alıcı olabilir. Neyse ki, bu makalede size web sayfanıza otomatik Instagram embedleri eklemek için kullanabileceğiniz bir kod örneği sunacağım.

Bunları anlamazsanız doğrudan gönderiye gelerek  gömme kodu isteyerek de yapabilirsinz. Bu bir alternatiftir. Şahsen ben kendim bile kullanmıyorum. Dürüst olmak gerekise bu yazıyı siteye ziyaretçi çekmek için oluşturdum. 

İnstagram Embedlerini Otomatikleştirmek

Web sayfanıza otomatik Instagram embedleri eklemek için aşağıdaki kod </body> etiketinden önce yazınız.

<div class="instagram"></div>

<script>
  function embedInstagram(url, container) {
var matches = url.match(/^(?:https?:\/\/)?(?:www\.)?instagram\.com\/p\/([^\/\?]+)/i);
    if (matches) {
      var postId = matches[1];
      var embedCode = '<iframe src="https://www.instagram.com/p/' + postId + '/embed/" frameborder="0" scrolling="no" allowtransparency="true"></iframe>';
      container.innerHTML = embedCode;
    } else {
container.textContent = "Instagram içeriği bulunamadı.";
    }
  }
  // Sayfa yüklendiğinde tüm instagram URL'lerini embed et
 document.addEventListener("DOMContentLoaded", function() {
    var instagramContainers = document.getElementsByClassName("instagram");
    for (var i = 0; i < instagramContainers.length; i++) {
      var container = instagramContainers[i];
      var url = container.dataset.url;
      embedInstagram(url, container);
    }
  });
</script>
<script async src="//www.instagram.com/embed.js"></script>

Kodun Web Sayfanıza Eklenmesi

Kodu Blogger veya herhangi bir web sayfanıza eklemek için aşağıdaki adımları izleyebilirsiniz:

  1. Blogger yönetici paneline giriş yapın ve düzenlemek istediğiniz şablonu seçin.
  2.  HTML düzenleyicisini açın ve yukarıdaki kodu `<script>` ve `<div class="instagram"></div>` etiketleri arasına yapıştırın.
  3. Web sayfanızda embed etmek istediğiniz Instagram URL'lerine sahip `div` elementlerini oluşturun ve her birine `instagram` sınıfını ekleyin. Örneğin:

  <div class="instagram" data-url="https://www.instagram.com/p/ABC123/"></div>

Bu basit adımları takip ederek, web sayfanıza otomatik Instagram embedleri eklemiş olacaksınız. 




Yorum Gönder