Quantcast
Channel: WebTuts » wordpress
Viewing all articles
Browse latest Browse all 10

Przycisk Google Plus One – kreatywne zastosowania

$
0
0

Google Plus powoli przeciera szlaki w Internecie. O ile sam serwis nie tętni jeszcze życiem tak jak Facebook, a znajomi dopiero zakładają swoje profile, o tyle przycisk polecający treści – Google Plus One już zrobił karierę. Od Facebookowego Like różni się tym, że przekłada się na wyniki wyszukiwania w Google, co czyni go niezwykle atrakcyjnym narzędziem promocji.

Wstawienie guzika Google Plus One jest bardzo proste, podstawową instrukcję oraz kreator znajdziesz na oficjalnej stronie - http://www.google.com/intl/pl/webmasters/+1/button/. Do wyboru mamy przycisk w czterech rozmiarach oraz możemy wybrać język, a całość sprowadza się do wstawienia dwóch linijek kodu. Nie wyczerpuje to jednak w pełni możliwości, jakie daje przycisk Google +1. Jeśli nie boisz się odrobiny kodu, możesz dostosować przycisk +1 jeszcze bardziej, m.in możesz wywołać swoją funkcję JavaScript, w momencie gdy ktoś kliknie przycisk. Brzmi to niepozornie, ale w praktyce otwiera nowe atrakcyjne możliwości.

Zanim jednak puścimy wodze fantazji – szklanka zimnej wody, czyli zasady Google :)

Wydawca nie może bezpośrednio zachęcać użytkowników do klikania przycisku +1, jeśli działanie takie jest mylące dla użytkowników. Wydawca nie może oferować nagród, pieniędzy ani równowartości pieniężnej w zamian za kliknięcie przycisku +1.

Ale na osłodę:

Aby uniknąć wątpliwości – Wydawca może kierować użytkowników do przycisku +1, aby umożliwić im korzystanie ze swoich treści i funkcji oraz powiązań społecznościowych użytkowników.

Co to oznacza dla właściciela strony?

Wpływanie na wyniki wyszukiwania za pomocą guzika +1 jest kuszące, nie można jednak przesadzać. Z zasad jasno wynika, że w zamian za kliknięcie +1 nie można oferować produktów ani usług za które normalnie pobierana jest opłata, ani oferować ich w formie nagród za kliknięcie (sądzę że wszelkie konkursy z nagrodami dla osób które klikną +1 odpadają).

W drugim akapicie czytamy jednak, że można użytkowników „kierować do przycisku +1,  aby umożliwić im korzystanie ze swoich treści i funkcji” – z czego wnioskuję, że akceptowalne jest oferowanie darmowego raportu, badania, ebooka albo innej treści, którego nigdzie nie sprzedajesz osobom które klikną +1 na Twojej stronie.

Z pomocą JavaScript można również dotrzeć do osób, które usuną przyznane +1. Można na przykład zapytać, co je do tego skłoniło, czy możesz coś poprawić – oczywiście tutaj też nie można przesadzać, aby nie być zbyt natrętnym dla użytkowników.

Jak wstawić przycisk Google +1 na swoją stronę?

  1. Pierwszy krok polega na wstawieniu odpowiedniego kodu do nagłówka (sekcja <head>, plik header.php):
    <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
  2. Następnie przycisk Google +1 wstawiamy w treść strony (w WordPress np. do pliku single.php), za pomocą specjalnego tagu, który w wersji podstawowej wygląda tak:
    <g:plusone></g:plusone>
  3. Jeśli wszystko poszło dobrze, na stronie powinien wyświetlać się guzik +1, tak jak ma to miejsce na końcu tego wpisu.

Wykorzystanie parametru callback

Tag <g:plusone></g:plusone> przyjmuje szereg parametrów, np. size który określa rozmiar guzika, href czyli url którego guzik dotyczy, czy wreszcie parametr callback, który pozwala na wywołanie funkcji JavaScript. Pełna lista parametrów, dostępna jest pod adresem http://developers.google.com/+/plugins/+1button/.

Tag guzika Google +1 z parametrem callback wygląda tak:

<g:plusone callback="mojaFunkcja"></g:plusone>

W parametrze callback podałam nazwę funkcji JavaScript – tutaj jest to mojaFunkcja(), która zostanie wywołana, gdy ktoś kliknie przycisk +1. Po wywołaniu funkcja ta otrzyma obiekt JSON, zawierający dwa parametry:

  • href, który zawiera adres URL dla którego kliknięty został guzik +1
  • state, który zawiera informację o stanie i przyjmuje wartości „on” gdy ktoś dodał +1 i „off” gdy wcześniej przyznane +1 zostało usuniete.
Domyślam się, że dla osób nie obeznanych z JavaScript na razie niewiele z tego wynika. :) Przejdźmy zatem do przykładu praktycznego.

Przykład: darmowy raport pdf

Tutaj naszym celem jest wyświetlenie na stronie komunikatu z podziękowaniem po kliknięciu +1 oraz linkiem do darmowego raportu pdf.
Na początek krótka uwaga techniczna – aby testować działanie funkcji z poniższego przykładu, musisz być zalogowany na swoje konto w Google +.

  1. Przygotuj sobie dokument pdf i wgraj go na serwer. Zanotuj sobie link do tego pliku.
    Następnie wstawiamy ukryty div, który będzie zawierał nasze podziękowanie oraz link. Myślę, że najlepiej wstawić go gdzieś w pobliżu (pod lub nad) guzika +1. Poniżej masz kod, który powinieneś wkleić w treść dokumentu, np. plik single.php (łącznie z kodem przycisku +1):
    <g:plusone callback="mojaFunkcja"></g:plusone><br /> <!-- kod wyświetlający guzik +1 -->
    <div id="secret" style="display:none;border:1px solid #CADCEA; background:#CAE9FD; padding: 10px;"> <!-- ukryty div z linkiem i odrobiną styli: tło i ramka oraz padding -->
    Cieszę się, że podobał Ci się ten wpis. Mam dla Ciebie również ciekawy raport na ten temat, który <a href="http://mojastrona.pl/sciezka/do/pliku.pdf" title="Tytuł">pobierzesz tutaj</a>.
    </div>
    
  2. Teraz pora na przygotowanie odpowiedniego kodu JavaScript. Wstawiamy go do nagłówka (plik header.php) najlepiej tuż przed </head>. Kod powinien wyglądać tak:
    <!-- załączamy skrypt pd Google -->
    <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> 
    
    <!-- nasza funkcja która obsługuje kliknięcie guzika +1 -->
    <script type='text/javascript'>
    function mojaFunkcja(gpo) {
    	if (gpo.state == "on") {
    		$('#secret').fadeIn(3000);
    	}
    }
    </script>
    

    Kliknij poniższy przycisk, aby zobaczyć powyższy przykład w akcji:

    Jedna uwaga – powyższy kod korzysta z biblioteki jQuery do wyświetlenia ukrytej treści, zatem musi ona być również dołączona w nagłówku. Wiele szablonów WordPress, w tym twentyeleven wykorzystuje jQuery i w takim wypadku biblioteka będzie już załączona. Aby się upewnić, wyświetl źródło swojej strony w przeglądarce (Ctrl + U w Firefoxie) i wyszukaj w frazę „jQuery”. Jeśli się okaże, że twój szablon nie korzysta z jQuery, tutaj możesz pobrać skrypty.

    Powyższy przykład obsługuje tylko dodanie (kliknięcie) +1 na stronie. Gdyby odwiedzający po chwili zmienił zdanie i usunął +1, div z komunikatem pozostał by nadal widoczny.

Na koniec zaznaczę, że jest to dość prosty przykład i link do pobrania pdf nie jest tutaj zabezpieczony w żaden wyszukany sposób – znajduje się on w naszym dokumencie HTML, z tym że jest niewidoczny, do momentu gdy guzik +1 zostanie kliknięty. Nie zmienia to faktu, że osoba sprytna na tyle żeby wyświetlić sobie kod źródłowy strony, będzie w stanie odczytać adres naszego pliku pdf i pobrać go sobie nie klikając +1 na stronie.

Więcej informacji dla developerów na ten temat znajduje się pod adresem http://developers.google.com/+/plugins/+1button/

Podsumowanie

Zadaniem tego wpisu miało być pokazanie możliwości przycisku Google +1. Przykłady podane we wpisie miały za zadanie pokazanie konceptu oraz być inspiracją dla własnych rozwiązań. Mam nadzieję że wszystko jest jasne i zrozumiałe, a jeśli nie to zapraszam do zadawania pytań w komentarzach.

PS. Jeśli podobał Ci się ten wpis, kliknij przycisk +1 poniżej :)


Viewing all articles
Browse latest Browse all 10

Trending Articles


TRX Antek AVT - 2310 ver 2,0


Автовишка HAULOTTE HA 16 SPX


POTANIACZ


Zrób Sam - rocznik 1985 [PDF] [PL]


Maxgear opinie


BMW E61 2.5d błąd 43E2 - klapa gasząca a DPF


Eveline ➤ Matowe pomadki Velvet Matt Lipstick 500, 506, 5007


Auta / Cars (2006) PLDUB.BRRip.480p.XviD.AC3-LTN / DUBBING PL


Peugeot 508 problem z elektroniką


AŚ Jelenia Góra