W dzisiejszym wydaniu pod tytułem "darmowy szablon Shoper" rozwiniemy jeden ze stosunkowo prostych błędów do naprawy, jakim jest błędne zaczytywanie losowego obrazu z artykułu jako obraz główny.
W tym momencie mamy dwa zagadnienia - sam Shoper, który w swoich szablonach nie zaimplementował znacznika, by wyeliminować taki problem oraz Facebook, który po przeanalizowaniu całego bloga nie chce zaczytać obrazu artykułu (otwierającego) tylko czyta najczęściej pierwsze zdjęcie występujące we wpisie.
Przejdźmy zatem do roboty.
Jak zmienić zdjęcie udostępniania na Facebooku w sklepie Shoper?
Przed przystąpieniem do modyfikacji w swoim sklepie, pamiętaj o wykonaniu kopii zapasowej obecnego szablonu. Jeśli nie wiesz jak to zrobić, sprawdź ten artykuł.
Po wykonaniu kopii zapasowej masz dwie opcje: używasz wykonanej kopii jako zapasówki i jej nie ruszasz działając na oryginalnej wersji, albo na odwrót. Wybór pozostawiam Tobie.
W panelu sklepu przejdź pod "Wygląd i treści" -> "Wygląd sklepu" -> "Twoje szablony graficzne". W tym miejscu najedź na szablon, który chcesz edytować (kopię lub oryginał) i znajdź drugi z kolei ołówek. Pierwszy oznacza same "Edytuj", za to drugi otworzy nam bezpośrednio edytor plików TPL i CSSa.
Po kliknięciu otworzy Ci się nowe okno edytora. Po lewej stronie nawiguj kolejno z otwartego folderu "Scripts" -> "News" -> "Index.tpl"
W sklepie masz łącznie kilka plików o nazwie index.tpl więc nie idź na łatwiznę korzystając z wyszukiwarki w lewym górnym rogu i nie klikaj losowo znalezionego pliku o tej nazwie. Kliknij dokładnie ten opisany w ścieżce powyżej, w końcu edytujemy blog, a nie stronę główną sklepu.
Teraz musimy trochę nadpisać / oszukać to, w jakiej kolejności są zaczytywane elementy sklepu. Musisz postawić entery przed pierwszym znakiem w tym pliku. Zróbmy sobie miejsce.
Nic nie usuwamy, nic nie modyfikujemy poza wstawieniem enterów. W tak przygotowanym miejscu wklej nasz kod:
<meta property="og:url" content="{$request_uri}" />
<meta property="og:type" content="article" />
<meta property="og:title" content="{$article->article->name|escape}" />
<meta property="og:description" content="{$seo_description|escape}" />
<meta property="og:image" content="{$shop_url}{baseDir}/{$article->image}" />
Kliknij zapisz w prawym górnym rogu.
Po tak przygotowanych modyfikacjach natychmiast możesz przejść do weryfikacji.
Z łatwych rozwiązań, po prostu dostępnij wpis na Facebooku (uwaga, przy pobieraniu podglądu Facebook może zaczytać stary obraz bez zmian. Dobrze jest użyć innego, nowego postu do testów, żeby mieć pewność).
Z profesjonalnych narzędzi Facebook daje Ci do użytkowania https://developers.facebook.com/tools/debug/
Tu możesz zaczytać dany URL (adres do naszego bloga - artykułu) i kliknąć "Debug" aby zmusić Facebooka, by ten ponownie zaczytał nasze zmiany. Na czerwono pojawia się ostrzeżenie (w sumie to po co?), że naszego świeżego artykułu nikt jeszcze nie udostępnił (właśnie go piszę...).
Klikamy "Fetch new information" i Facebook pobierze sobie najnowsze dane prosto z naszej strony. Pamiętaj, że jeśli masz Facebooka w innym języku, to komunikaty mogą brzmieć podobnie, ale przycisk powinien być w tym samym miejscu. Klikaj śmiało, w tym narzędziu od Facebooka nic nie zepsujesz.
Po chwili Facebook wypluje taki oto raport.
Jak widać bez problemu zaczytał opis (jako nagłówek SEO z ustawień Shopera), zaczytał tytuł artykułu i nasze zdjęcie otwierające. Jeśli od razu po podaniu URL wyskoczyła Ci ta karta, to może ona zawierać stare dane. Kliknij w takim przypadku na "Scrape Again".
Na górze zdjęcia widać jeden "błąd", który wprowadza odrobinę zamieszania. Tak długo jak nie tworzysz nowej super mega aplikacji działającej z API Facebooka (A gdzie tam my żywi będziemy takie rzeczy robić?!), tak długo nie musisz nic z tym komunikatem robić. Nie jest to błąd krytyczny i nie powoduje żadnych problemów.
Jeśli mimo szerokiego opisu będą jakieś błędy z wykonaniem instrukcji z tego poradnika - daj nam znać w komentarzu poniżej lub na [email protected]
W formie autoreklamy dodam, że te i wiele więcej elementów schemy (bo tak profesjonalnie nazywa się edycja kodu jaką wykonaliśmy) są od razu zaszyte w naszym szablonie Modern 3.0, na którym przeglądasz obecnie tego bloga. Kliknij tutaj jeśli chcesz poczytać więcej o szablonie.
Powodzenia w waszych modyfikacjach!
