Przyciski PIN IT – instalacja

utworzone przez | Piękny biznes i blog, Uncategorized | 41 Komentarze

Każdej z nas przyjemność sprawia dodawanie ładnych elementów do naszej strony czy bloga. Takie drobiazgi składają się na całość i tworzą ogólne wrażenie. Pozwalają również stworzyć spójny wizerunek. Dzisiaj proponuję oprócz upiększenia coś co jest przy okazji funkcjonalne oraz pozwoli dotrzeć do większej ilości czytelników oraz klietów – takie rozwiązania lubię najbardziej.

Przygotowałam dla Ciebie przyciski PIN IT! i instrukcję jak go zamieścić na swoim blogu. Przycisk taki pojawia się po najechaniu kursorem na zdjęcie, a kliknięcie w niego pozwali od razu czytelnikowi przypiąć Twoje zdjęcie do jego tablicy na Pinterest.

przycisk pin it blogger wordpress

Pin it! Przypnij powyższą grafikę, aby łatwo wrócić do artykułu lub podzielić się nim z innymi.
Bez względu na to czy prowadzisz blog na WordPress czy na Bloggerze będziesz potrzebowała własnego przycisku Pin it. Możesz zaprojektować go sama, pobrać jeden z darmowych dostępnych w mojej bibliotece (tu możesz zapisać się do biblioteki) lub przygarnąć pakiet w którym jest do wyboru aż 60 przycisków oraz zestaw szablonów do tworzenia grafik przyjaznych Pinterest.

[accordion title=’WORDPRESS – INSTRUKCJA (klik)’]

1. ZAINSTALUJ WTYCZKĘ

W celu dodania własnego przycisku Pin it! zainstaluj wtyczkę jQuery Pin It Button For Images. Przejdź do wtyczki>dodaj nową i w polu wyszukiwania wklej jej nazwę, a następnie wciśnij enter. Kliknij zainstaluj, a po zakończonej instalacji odnajdź wtyczkę na liście w zakładce wtyczki>zainstalowane wtyczki i pod jej nazwą kliknij włącz.

2. ZMIEŃ USTAWIENIA WTYCZKI

Po włączeniu wtyczki wybierz settings i w pierwszej zakładce selection, w sekcji On which pages the “Pin it” button should be shown zostaw ptaszek tylko przy pozycji single post. To uchroni Cię częściowo przed pokazywaniem się przycisku w niepożądanych miejscach.

Warto również określić jaka ma być minimalna wielość zdjęć na których pojawi się przycisk. To uchroni Cię przed pojawianiem się przycisku np na ikonach i innych zdjęciach, które nie chcesz, aby były przypinane. W tym celu wystarczy, że w sekcji Minimum resolution that should trigger the “Pin it” button to show up wpiszesz minimalną wysokość (height) i szerokość (width) zdjęć na których ma pojawiać się przycisk. Oznacza to, że jeżeli w tych polach wpiszesz np. 250 px i 250 px to przycisk Pin it! nie pojawi się na obrazkach mniejszych niż ta wartość.

Przejdź do zakładki visual w której zaznacz ptaszka przy sekcji Linked page.

3. DODAJ WŁASNY PRZYCISK PIN IT

Za chwilę będziesz potrzebowała swojej grafiki z przyciskiem. Możesz zaprojektować go sama, ale pamiętaj, że czekają na Ciebie 3 darmowe przyciski Pin it! w mojej bibliotece (tu możesz zapisać się do biblioteki)  oraz pakiet w którym jest do wyboru aż 60 przycisków oraz zestaw szablonów do tworzenia grafik przyjaznych Pinterest.

W zakładce visual znajdź sekcję Custom “Pin It” button. Klikając na przycisk upload an image using media library możesz dodać swój przycisk Pin It. Jeżeli nie masz go jeszcze w swojej bibliotece, możesz go teraz wgrać tak jak to robisz ze zdjęciami w postach.

Po wgraniu własnego przycisku koniecznie zaznacz ptaszek przy opcji use custom image.

W tej sekcji możesz również określi rozmiar swojego przycisku, a w sekcji Pin it button position wybrać w jakiej części zdjęcia ma się pojawiać, odpowiednio:

Top right – górny prawy narożnik
Top left – górny lewy narożnik
Bottom left –  dolny lewy narożnik
Bottom right –  dolny prawy narożnik
Middle – środek

[/accordion]

[accordion title=’BLOGGER INSTRUKCJA (klik)’]

(Zanim dokonasz jakichkolwiek zmian w kodzie szablonu pobierz jego kopię szablon>utwórz/przywróć kopię zapasową>pobierz pełny szablon )

1. UMIEŚĆ PRZYCISK W INTERNECIE
W pierwszej kolejności musisz znaleźć dla swojego przycisku jakiś wirtualny dom, czyli umieścić go np w albumie google lub innym miejscu, gdzie przechowujesz swoje pliki w sieci. Musisz zrobić to dlatego, ponieważ za chwilę będziesz potrzebowała adres url do niego.
2. WSTAW KOD DO SZABLONU
Zaloguj się do bloggera, wybierz zakładkę szablon i kliknij Edytuj kod HTML.
Postaw kursor w dowolnym miejscu kodu i jednocześnie wciśnij klawisze CTRL oraz F. Pojawi się okienko wyszukiwania w którym wpisz </body> i wciśnij enter.
Poniżej odnalezionej frazy wklej ten kod (aktualizacja 05-2016):
<script>
//<![CDATA[
var bs_pinButtonURL = "adres url przycisku PIN IT";
var bs_pinButtonPos = "topright";
var bs_pinPrefix = "";
var bs_pinSuffix = "";
//]]>
</script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>
<script id='bs_pinOnHover' src='https://googledrive.com/host/0B40RQ963OElISE9lY1E1YS1lU28/bs_pinOnHoverv1_min.js' type='text/javascript'>
// This Pinterest Hover Button is brought to you by bloggersentral.com.
// Visit http://www.bloggersentral.com/2012/11/pinterest-pin-it-button-on-image-hover.html for details.
// Feel free to use and share, but please keep this notice intact.
</script>

3. SPERSONALIZUJ PRZYCISK

Zastąp czerwony fragment kodu (adres url przycisku PIN IT), adresem url swojego przycisku Pin it! Jeżeli wcześniej wgrałaś przycisk do albumu google, kliknij na niego, a następnie gdy już jest na środku ekranu, ponownie kliknij na niego, tym razem prawym przyciskiem myszy i wybierz opcję kopiuj adres obrazu.

Jeżeli zakończysz zmiany w kodzie na tym etapie wówczas przycisk Pin it! będzie pojawiał się na najechaniu kursorem na zdjęcie w jego prawym górnym rogu. Możesz to zmienić zastępując fragment kodu zaznaczony na zielono (topright) jedną z poniższych opcji:

center      (środek zdjęcia)
topleft      (lewy górny narożnik)
bottomleft      (lewy dolny narożnik)
bottomright      (prawy dolny narożnik)
4. ZAPISZ ZMIANY I SPRAWDŹ REZULTAT
 Kliknij na Zapisz szablon, wejdź na swój blog i sprawdź czy wszystko dobrze działa:)

[/accordion]

[Tweet “Zainstaluj Pin it i zwiększ ruchna swoim blogu”]

Koniecznie pochwalcie się efektami!
Ściskam!
Karolina

 

Zarezerwuj termin współpracy

Napisz kilka słów o swoim projekcie i jak mogę Ci pomóc.