Jak dodać gadżet Instagram na bloga?

8/16/2015 05:25:00 PM

Z uwagi na zmiany na Instasive, wpis stał się nieaktualny! Kiedy znajdę alternatywę dla Instasive, przygotuję nowy!

Od niedawna mam profil na Instagram i postanowiłam go do bloga, żeby odwiedzające blog osoby mogły znaleźć mój profil na IG i zdjęcia, które tam zamieszczam.


W tej chwili możemy przebierać wśród stron, na których można wygenerować skrypty gotowe do zaimplementowania w kodzie bloga. W Internecie znalazłam ich sporo.

Najpopularniejsze i najczęściej spotykane na blogach to SnapWidget i Instagme. Mają one jednak tę wadę, że jeśli ktoś kliknie zdjęcie, wyświetlane przez gadżet, nie przekierowują go one na to zdjęcie na instagramowym profilu danej osoby. Najpierw trafia się na stronę SnapWidget lub Instagme i dopiero stamtąd na instagramowy profil danej osoby.

Inną bardzo znaną na polskich blogach opcją jest Iconosquare i początkowo tam zrobiłam sobie gadżet. Wygenerowany przez Iconosquare gadżet ma ten plus, że umożliwia podanie. Nazwy konta, czy liczby obserwatorów, zawiera jednak reklamę Iconosquare.

Zaintrygowało mnie to, że na wielu blogach (głównie zagranicznych) są gadżety Instagram, ale nieopisane. I kierujące wprost na Instagram, bez „pośredników”.

Sęk, że skoro są nieopisane, nie wiadomo, skąd się wzięły. ;-) 

Trzeba sobie poszukać, ale kto szuka, ten znajduje i tak właśnie znalazłam i mam gadżet. A nawet dwa. ;-) Wygenerowałam sobie aż dwa różne gadżety Instagrama, bo nie wiem, który będzie lepszy, wypróbuję oba i się dowiem.

Jeden gadżet znalazł się na dole bloga i wygląda tak:


Drugi: znalazł się na pasku bocznym, wygląda tak i „animuje się” (na zdjęciu widać jak odbywa się animacja - zdjęcia się przesuwają w bok).


Obydwa są niepodpisane, przekierowują wprost na Instagram.

No i właśnie... skąd wzięłam takie cuda?

Obydwa gadżety szybko zaintrygowały osoby, zaglądające tutaj. Najpierw Ania spytała, jak zrobiłam ten „ruszający się”, potem kolejne pytania przyszły w mailach.

No to powiem Wam (i zaraz wszyscy będą mieli takie gadżety, a moja oryginalność i unikatowość pójdą się bujać ;-)).

Skorzystałam z Instansive.com.

Ta strona wygląda obecnie tak.


Jej twórcy są bardzo hojni: dali nam gadżet bez reklam i bez konieczności przeklikania się przez ich serwis (i wyświetlenia reklam, na których zarobiliby). To wszystko w wersji bezpłatnej, z której skorzystałam.

Jest jeszcze wersja płatna, która umożliwia np. dodawanie nowych zdjęć do gadżetu na bieżąco, zaraz po tym, jak pojawią się na Instagramie. Myślę, że to dobra opcja dla osób, które każdego dnia wrzucają wiele zdjęć.

Sama nie planuję zasypywania profilu licznymi zdjęciami. Na razie pokazuję tam ciekawe, czy ładne rzeczy, jakie widziałam, nie „migawki z życia”, itp. Dodaję więc zwykle nie więcej niż 1 zdjęcie dziennie.

Nie wiem, jak to się rozwinie, ale nie sądzę, abym zaczęła być tam bardziej aktywna, bo brak mi na to czasu. Gdybym jednak potrzebowała częstych aktualizacji, wykupię wersję płatną, bo myślę, że zostanę przy Instansive.

Możemy wygenerować kod gadżetów o praktycznie dowolnych rozmiarach, pasujące do miejsca na blogu. Możemy też wybrać gadżet w postaci siatki (jak ten na dole bloga) lub „animacji” (jak ten z boku).

W dodatku wygenerowanie kodu jest dziecinnie proste.

Robi się to tak:

Wchodzimy na stronę Instansive.

Wybieramy nazwę konta, z którego mają być zaciągane zdjęcia i / lub hashtag. Ja wybrałam tylko nazwę konta (swojego).

Wpisując nazwę konta, pamiętajcie o poprzedzeniu jej znakiem @. A wpisując hasztag, pamiętajcie o... # ;-)


Od razu możecie podejrzeć efekt, klikając „Preview” na dole. Podgląd szybko się załaduje.

U mnie wyglądało to tak:


Do wyboru mamy trzy rodzaje gadżetów:
  • - Grid (siatkę) czyli coś takiego jak efekt powyżej albo gadżet na dole na moim blogu,
  • - Slideshow (slajdy) czyli coś takiego jak gadżet na pasku bocznym na moim blogu,
  • - Columns (kolumny) w stylu Pinterest. Takiego gadżetu już nie robiłam (i tak mam o jeden za dużo), ale wygląda to tak, jak gadżet Pinterest, widoczny na wielu blogach.


Jeśli wybieramy siatkę, trzeba ustalić liczbę kolumn (columns) i rzędów (rows).


Powyżej widać, jak to wygląda, jeśli wybierzemy 3 na 3.

Jeśli będzie to 5 na 5, efekt będzie taki:


Możemy też wybrać Slideshow, wtedy zdjęcia będą się animować. Należy wówczas ustalić liczbę zdjęć.


Bez względu na to, jaką postać ma nasz gadżet, można też wybrać efekt, co będzie się działo, jeśli najedziemy na zdjęcie.

Do wyboru mamy:

None (nic)
Fade In (zdjęcie się rozjaśnia – tak, jak na mich gadżetach)
Fade Out (wtedy wszystkie zdjęcia są jasne, to, na które najeżdżamy odzyskuje pełnię kolorów).


Możemy też skorzystać z „preloadera”, zaznaczając opcję „Use Image Preloader”.



Wygląda on tak:


Kolejna możliwość to podpisy pod zdjęciami. Pojawią się, jeśli zaznaczymy „Show captations”.


A oto efekt:


Jeśli nasz gadżet ma postać siatki, możemy usunąć przerwy pomiędzy obrazkami. Wystarczy zaznaczyć „Remove photo padding”.

Tak wygląda efekt:


Niezwykle proste jest też dopasowanie wymiarów do miejsca, jakie gadżet zajmie na blogu. Dopasuje się on automatycznie.

Bardzo mi się podoba to rozwiązanie i je polecam.


Choć oczywiście możecie poszukać innych stron, na których można wygenerować takie kody.

Miłego generowania i implementowania na stronie i niech Wam gadżety dobrze służą! :-)


Zobacz też:

23 komentarze

  1. No dobra - zrobiłam:). Jest czad i extra!

    OdpowiedzUsuń
  2. jak dopasować to bo mam problem mam podgląd instagrama i wychodzi mi po za ,,obwód " bloga

    OdpowiedzUsuń
    Odpowiedzi
    1. A samo się nie dopasowało?

      Podaj namiar na Twój blog, to zajrzę i zobaczymy, co się stało!

      Usuń
  3. Baaardzo dziękuje, za ten post, zawsze gdy chciałam dodać instagrama na bloga to byli ci straszni pośrednicy, ale jak widać nie jest to takie straszne i da się to obejść ;P

    OdpowiedzUsuń
  4. Dzięki Kasiu to działa!!! Pozdrawiam!!!

    OdpowiedzUsuń
  5. Jak cudownie, że trafiłam na Twojego bloga :) dopiero zaczynam swoją przygodę na instagramie i to jak "ulokować go" na blogu wydawało mi się na początku czarną magią :) wielkie dzięki.

    Pozdrawiam serdecznie

    OdpowiedzUsuń
  6. Dzięki za podpowiedź. Używałam intagme, ale ostatnio po prostu przestał wyświetlać. Ten jest bardzo elegancki. :)

    OdpowiedzUsuń
  7. w końcu się udało ! dziękuję bardzo ;)

    OdpowiedzUsuń
  8. U mnie z tej strony nie ma ikony "get code" więć niemożliwe jest pobranie kodu przy próbie "preview" prosi o czekanie i czekanie trwa tak jakby coś mu brakowało (oczywiście jestem zalogowana na instagram) co może być przyczyną?

    OdpowiedzUsuń
  9. Nie udało mi się wyskakuje mi jakiś problem.

    OdpowiedzUsuń
  10. A ja muszę zapłacić 10 $ za upgrade na https, o co chodzi?

    OdpowiedzUsuń
  11. Cześć, idąc za Twoją radą rzeczywiście udało mi się zrobić grid w bocznej jolimnie jednak nadal mam problem z wynonaniem takiego taska instagramu da dole, czy masz może jakieś rady by ustawić tę galerię instagramu jak u Ciebie lecz tylko jeden wiersz? Pozdrawiam Laura

    OdpowiedzUsuń
  12. Hej.. a ja mam taki problem, że wszystko ładnie się generuje ale po wklejeniu na bloga, pokazuje że dla stron https nie jest dostępna darmowa wersja:/ mam normalnego blogspota, widzę, że Ty także, więc o co chodzi... ? :(

    OdpowiedzUsuń
    Odpowiedzi
    1. A już widzę, że Tobie też tak pokazuje i nie działa :/ coś musieli zmienić

      Usuń
    2. Czy możesz napisać, gdzie co pokazuje i co nie działa?

      PS. Na samej górze napisałam, że tekst stał się nieaktualny, bo pozmieniali, ale wydaje mi się, że gadżet jakoś działa.

      Usuń
  13. Fajny post ciesze się że trafiłam na Twojego bloga gdyż dopiero zaczynam poznawać instagrma. Mam jednak mały problem na blogu instagram wygląda Ładnie ustawiłam sobie siatkę 2x2 jednak po wstawieniu nowego zdjęcia na instagramie nie pokazuje się ono w owej siatce na blogu.

    OdpowiedzUsuń
  14. Super porada dzięki :) a czy może zdradzisz jak zrobić ramki wokół całego gadżetu w kolumnie po prawej stronie tak jak u Ciebie? :)

    OdpowiedzUsuń
  15. Super!! Bardzo przydatne informacje!

    OdpowiedzUsuń
  16. Bardzo mi pomogłaś :) Dziękuję :)

    OdpowiedzUsuń
  17. Bardzo dziękuję za cenne informacje i w ogóle za chęć podzielenia się tym z nami (czytelnikami). <3
    Pozdrawiam serdecznie :)

    OdpowiedzUsuń

Spam będzie usuwany.