CodeCillop > jQuery Plugin > InstaShop
codecillop-instashop-plugin

InstaShop

CodeCillop InstaShop : Instagram fotoğraflarınızı hesabınızdan otomatik çekin ve web sitenizdeki ürünlere / kategorilere / sayfalara bağlayın.

Instagram hesabınız ile web sitenizi eşzamanlı hale getirin. Paylaştığınız fotoğraflarla ilgili detay sayfaları oluşturun ve bu eklenti ile web sitenizden fotoğraflara / ürünlere / sayfalara / kategorilere bağlantı atayın.

Özellikler

  • Instagram hesabınızdan otomatik olarak fotoğrafları ve bilgileri çeker (beğeni sayısı, açıklamalar, #etiketler v.b.)
  • İster popup içinde gösterebilir (Muhteşem Popup), isterseniz ilgili alanda animasyonlu olarak gösterebilirsiniz.
  • Bir fotoğrafa bir yada birden fazla bağlantı atanabilir. Ana Buton ve resimli bağlantılar. Her butonun metni farklı ayarlayanabilir
  • Responsive & Fluid uyumludur
  • Yeniden boyutlandırmaya uyumludur
  • Esnek ve kolay kullanım
  • CSS ile kişiselleştirebilirsiniz

Varsayılan kullanım

Sayfanızda <head> </head> aralığına aşağıdaki gibi scripti yerleştirmeniz gerekir. Ayrıca CSS gereksinimi de vardır.
Hesabınız herkese açık olmalıdır. Gizli hesabınız varsa zaten aradığınız şey bu değildir :)

<script src="js/codecillop-muhtesempoap.v1.4.1.js"></script> (Popup istenirse)
<script src="js/instafeed.min.js"></script>
<script src="js/codecillop-instashop.js"></script>
<link rel="stylesheet" type="text/css" href="css/cc-instashop.css">
<link rel="stylesheet" type="text/css" href="css/codecillop-mp.css"> (Popup istenirse)

Gereksinimler

İndirme dosyasında tüm gereksinimleriniz vardır.

Örnek Kullanım

Standart Kullanım: Detay sayfası görsellerin hemen üzerinde açılır ve pencere açılan kutuya odaklanır. Standart Kullanım Gör

Popup Kullanım: Detay sayfası lightbox popup içinde açılır, sayfaya ortalanır. Popup Kullanım Gör

Instagram Hesabınızı Kullanıma Açma (API)

Instagram API oluşturmayı bilmiyorsanız size yardımcı olalım. Rehber bilgiler için tıklayın… Göster

Sayfaya Yerleştirme

Instagram API İşlemlerini gerçekleştirdikten sonra aşağıdaki örnekte olduğu gibi temin ettiğiniz verileri HTML’de ilgili alanlara yazın, scriptleri ve css’leri yerleştirin. CSS dosyasını düzenleyerek görünümü kişiselleştirebilirsiniz. (Responsive’e göre görünüm sayıları, genişlikler, renkler v.s.)

<div class="CC-InstaShop">
<div id="instafeed" data-instaname="INSTAGRAM_USERNAME" data-instaid="INSTAGRAM_USER_ID" data-key="ACCES_TOKEN_KODU" data-limit="15" data-buttontext="İNCELE" data-popup="false"></div>
<div class="cc-insta-extra"><a href="http://instagram.com/INSTAGRAM_USER_NAME" target="_blank" class="instausername">@INSTAGRAM_USER_NAME</a></div>
</div>

Fotoğraflara bağlantı ve çeşitli ürün / sayfa / kategori linkleri ekleyelim. Bunun için aşağıdaki örnekte benzer kodu kullanabilirsiniz. Instagram’da son paylaştığınız fotoğraf burada ilk sırada çıkar. Bu bağlantılar çekilen fotoğraf sayısı adedince olmalıdır. Aynı sırayla takip eder. Her yeni fotoğraf eklemenizde bu sıranın en üstüne bir <a> etiketi ile bağlantıyı eklemeniz gerekmektedir. Instagram herhangi bir bağlantı paylaşmanıza izin vermez.

Her bir <a> etiketi ana butonu ayarlar. Eğer birden fazla bağlantı verilmek istenirse; “data-titles data-images data-links” seçenekleri kullanılmalıdır. Bu seçeneklerin içindeki verileri pipe “|” ile ayırmanız gerekmektedir. Örneğin; data-titles’da 3 tane girdiğinizde diğerlerinde de 3’er tane olmalıdır ve aynı sırada girilmelidir. İstediğiniz sayıda girebilir ya da hiç girmeyebilirsiniz. Canınız nasıl isterse :)

<div class="CC-InstaLinks">
<a href="DÜĞME_ANA_BAĞLANTI" data-titles="BAŞLIK_1|BAŞLIK_2|BAŞLIK_N_TANE" data-images="IMG_SRC_1|IMG_SRC_2|IMG_SRC_N_TANE" data-links="LINK_1|LINK_2|LINK_N_TANE">DÜĞME LİNK METNİ</a>
<a href="DÜĞME_ANA_BAĞLANTI" data-titles="BAŞLIK_1|BAŞLIK_2|BAŞLIK_3|BAŞLIK_N_TANE" data-images="IMG_SRC_1|IMG_SRC_2|IMG_SRC_3|IMG_SRC_N_TANE" data-links="LINK_1|LINK_2|LINK_3|LINK_N_TANE">DÜĞME LİNK METNİ</a>
<a href="DÜĞME_ANA_BAĞLANTI_2">BENİ TIKLA</a>
<a href="DÜĞME_ANA_BAĞLANTI_3">BENİ İNCELE</a>
<a href="DÜĞME_ANA_BAĞLANTI_4">DAHA FAZLA</a>
....
....
</div>

Hepsi bu kadar. Instagram Shop animasyonlu eklentinin tadını çıkarın :)

WordPress Eklentisine mi ihtiyacınız var?

Widget eklentisi için şurayı ziyaret edin: http://www.codecillop.com/instashop-instagram-wordpress-widget/

Seçenekler

Seçenekler html kodunda <div id=”instafeed”></div> etiketine atanmalıdır. Bu etiket yoksa çalışmayacaktır. Aşağıdaki değerleri dikkatlice girmelisiniz. Örneğin: <div id=”instafeed” data-instaname=”INSTAGRAM_USER_NAME” data-instaid=”INSTAGRAM_USER_ID” data-key=”ACCES_TOKEN” data-limit=”15″ data-buttontext=”İNCELE” data-popup=”false”></div>

Özellik Değer türü Açıklama
data-instaname metin Instagram’daki kullanıcı adınız. Kullanıcı adınız herkese açıktır.
data-instaid metin Instagram kullanıcı numaranız (id). Şuradan kolayca bulun. Ya da google’dan başka seçeneklere bakın
data-key metin Hesabınızdan fotoğraf ve veri çekebilmek için gerekli access token kodu. Kısıtlı/gizlenmiş bir hesaptan çekiyorsanız bunu kullanmayın
data-limit sayı Bir seferde çekilecek fotoğraf sayısı. En fazla 20 girebilirsiniz.
data-popup true,false Tıklamaların popup içinde açılmasını istiyorsanız “true” değeri girin. Bunun için Muhteşem Popup eklentisi gereklidir, paket içerisinde vardır. Varsayılan bırakılırsa görsel büyütme penceresi ilgili alanın üzerinde açılır
data-buttontext metin Dizilen fotoğrafların üzerine gelince görünecek metindir. “İNCELE” ya da “YAKINDAN BAK” gibi, sizin tercihinize kalmış

İNDİR...

İNDİR...

Kişisel kullanımlar için ücretsizdir.
Ticari kullanımlar için lisans almanız gerekmektedir.
Lisans ücrete tabi olabilir.

InstaShop : İndir

Dosyanız iniyor... Bağış yapmak ister misiniz?

Bağış yaparak yeni ve daha güzel kodlar geliştirmemize yardımcı olabilirsiniz.
PayPal üzerinden güvenli ödeme ile bağış yapabilirsiniz.

“InstaShop” için 3 yorum

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir