Zawartość artykułu
Zmiany na Instragram.com
Niestety w myśl zmian na Instagramie – nie jest już możliwe pozyskiwanie tzw. CLIENT-ID a co za tym idzie – integrowania stron internetowych z kontem na tym portalu społecznościowym np. poprzez zewnętrze aplikacje albo moduły:
Czyli jeśli np. marzysz o sliderze z akutalnymi zdjęciami z @Insta – zapomnij o tym. Jedyne co możesz zrobić, to osadzić link do Instagrama na stronie czy też sklepie internetowym. Decyzję właściciela tego portalu (Facebook Inc.) pozostawiamy bez komentarza.
Wysuwany widget Instragram.com
Polecamy tutaj bardzo łatwy w osadzeniu wysuwany z boku widget, użyty np. na stronie: duschobad.se
Już pokazywaliśmy jak dodać podobny widget z profilu Facebook.com – zobacz!
W tym celu, przygotuj:
- Kwardratowy obrazek okładki profilu na Instagramie o wymiarach 320px na 320px i nazwie: logo_instagram.jpg (może mieć też wymiar 150px na 150px – taki jak na tym portalu)
- Nazwę Twojego uzytkownika w portalu Instagram.com
Osadzenie kodu widgetu Instagram.com w szablonie Prestashop
Dla wersji 1.7 otwórz plik:
themes/{SZABLON}/templates/layouts/layout-both-columns.tpl
Dla wersji 1.6 otwórz plik:
themes/{SZABLON}/footer.tpl
Następnie przed zamknięciem znacznika:
</body>
Wklej poniższy kod:
{literal} <div class="slideout-widget-insta slideout-big widget-insta"> <div class="slideout-widget-handler"> <i class="fa fa-instagram" aria-hidden="true"></i> </div> <div class="slideout-widget-content"> <a href="https://www.instagram.com/{NAZWA-UŻYTKOWNIKA-INSTAGRAM}/" target="_blank"> <img style="display: block; margin: 0 auto; border-radius: 50%; width: 30%; margin-bottom: 20px;" src="/img/logo_instagram.jpg" alt="insta"> <h3 style="text-align: center; color: #fff;">@{NAZWA-UŻYTKOWNIKA-INSTAGRAM}</h3> </a> </div> </div> <style type="text/css"> .slideout-widget { position: fixed; right: -15em; top: 300px; transition: right .4s; width: 15em; z-index: 5004; } .slideout-widget:hover { right: 0; } .slideout-widget-insta { position: fixed; right: -15em; top: 60%; transition: right .4s; width: 15em; z-index: 100000000; } .slideout-widget-insta:hover { right: 0; } .slideout-widget-handler, .slideout-widget-content { background: #eee; border: 1px solid #ddd; padding: 1em .5em; } .slideout-widget-handler { border-right: none; left: -3em; position: absolute; text-align: center; width: 3em; font-size: 15px; } .slideout-widget-content { border-width: 1px 0; overflow: hidden; width: 100%; z-index: 11; } .widget-facebook .slideout-widget-handler, .widget-facebook .slideout-widget-content { background: #3c5b9b; border: none; } .widget-insta .slideout-widget-handler, .widget-insta .slideout-widget-content { background: #f09433; background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); background: -webkit-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f09433', endColorstr='#bc1888', GradientType=1); border: none; } .widget-insta, .widget-insta a { color: #fff; } .slideout-big { right: -25em; width: 25em; } @media (min-width: 1024px){ .slideout-widget-insta { top: 56%; } } </style> {/literal}
Oczywiście w miejscu: {NAZWA-UŻYTKOWNIKA-INSTAGRAM} wklej nazwę Twojego loginu w tym serwisie, a przygotowany plik logo_instagram.jpg wgraj przez FTP bezpośrednio do folderu /img.
Nie zapomnij o wyczyszczeniu pamięci podręcznej / przebudowaniu cache w dziale „Wydajność„.
Widget nie ma powiązania z oprogramowaniem PrestaShop. Równie dobrze możesz go użyć na innej stronie wklejając go przed zamknięciem znacznika <BODY> 🙂
Wyczyszczenie pamięci podręcznej.
Musimy mieć jeszcze pewność, że zmiany są widoczne na stronie i odświeżony jest system pamięci podręcznej w sklepie. W tym celu w zależności od wersji wchodzimy:
Presta Shop 1.7
Konfiguruj » Zaawansowane » Wydajność » Wyczyść pamięć podręczną (przycisk u góry tej podstrony)
Presta Shop 1.6
Zaawansowane » Wydajność » Wyczyść pamięć podręczną (przycisk u góry tej podstrony)
Presta Shop 1.5
Zaawansowane » Wydajność » przycisk “Wyczyść cache Smarty i Autoload”
Możliwe błędy i ich rozwiązanie
Błąd #1 nie widać okładki z mojego Instagrama
W lokalizacji pliku http://[adres-twojego-sklepu]/img/logo_instagram.jpg umieść dowolny obrazek indentyfikujący Twój profil z @Insta – moze to być np. ta sama okładka co na tym portalu społecznościowym aby było to spójne wizualnie
Błąd #2 nie widać ikonki Instagrama na zakładce przed wysunięciem
Zapewne Twój szablon w PrestaShop nie ma dołączonej biblioteki FontAwsome. W tym celu przed ww. kodem do osadzenia wklej poniższy kod HTML + przeładuj cache szablonu:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
Jeśli podany link do pliku CSS nie działa – pozyskaj działający plik np, ze strony FontAwsome i przetestuj działanie.
Błąd #3 Widget nie linkuje do profilu na Instagramie.
Pozyskaj Twój login z Instagrama – jest to fraza po ukośniku: instagram.com/twoj_profil
I wklej w dwóch miejscach w ww. kodzie w miejscu kodu: {NAZWA-UŻYTKOWNIKA-INSTAGRAM} następnie przeładuj szablon (w tym przykładzie nazwą użytkownika będzie „twoj_profil”)
Jeśli to zadanie Cię przerasta – zapraszamy do skorzystania z naszych usług:)
grafika:alphacoders.com
posiadam prestashop 1.7.5.0. Wszystko wykonane według instrukcji. Niestety po aktualizacji pliku i wyczyszczeniu pamięci podręcznej strona jest niewidoczna.
@PrzeMo – uzupełniliśmy artykuł o kilka wskazówek, które powinny być dla Ciebie pomocne:) Sprawdz!
Osadziłem kod na stronie i nie wyświetla mi się ikona instagrama. Sam widget działa, ale mam zwykły prostokąt, nie widac loga instagrama
@Piotr – uzupełniliśmy artykuł o kilka wskazówek, które powinny być dla Ciebie pomocne:) Sprawdz!
[…] PrestaShop – wysuwany widget Instagram [AKTUALIZACJA] […]
[…] PrestaShop – wysuwany widget Instagram [AKTUALIZACJA] […]