W tym wpisie postaram się pokazać, jak łatwo można umieścić na swoim blogu ruchome okienko udostępniania za pomocą kilku prostych kroków. Wytłumaczę Ci, gdzie, kiedy, dlaczego i po co dany kod wkleić, aby share box działał poprawnie.
Napisałem również wersję skróconą dla tych, których nie obchodzą szczegóły, lecz chcą dostać gotowe skrypty do wklejenia w odpowiednich miejscach.
Nauczysz się:
- Jak dodać do takiego okienka przyciski z Facebooka, Google Plus oraz Twittera.
- Jak sprawić, aby za każdym razem, niezależnie od wpisu, strony, czy kategorii, udostępniane były poprawne linki.
- Jak wyświetlać okienko w lewym dolnym rogu przeglądarki.
- Jak ustawić automatyczne ukrywanie okienka, jeśli przeglądarka czytelnika będzie zbyt mała (aby nie kolidowała z tekstem).
1. Kod wychwytujący poprawny tytuł oraz adres url wpisu
Na początku musisz troszkę pogrzebać w kodzie. W pliku footer.php w twoim szablonie – na samym końcu wklej poniższy kod (screenshot pod kodem):
KOD #1 – Aby zaznaczyć całość, kliknij 2 razy.
Zadaniem kodu jest wyłapanie poprawnego adresu url oraz tytułu artykułu za sprawą dwóch zmiennych ($url oraz $text)
2. Kody udostępniające twój kontent w serwisach Social Media
Następnym krokiem będzie zdobycie odpowiedniego kodu dla każdego przycisku udostępniającego artykuły z bloga. Możesz samodzielnie uzyskać kody na stronie każdego z serwisów, co oczywiście Ci pokażę, lub przejść do paragrafu Sposób automatyczny i skopiować przygotowany przeze mnie kod.
Sposób manualny:
KOD #2
W powyższym kodzie można łatwo zauważyć miejsce do wklejenia kodu z Twittera, Facebooka oraz Google +1.
TWITTER:
- Kliknij TUTAJ
- Wybierz button Share a link
- Znajdź w kodzie data-via=”netbloger” i podmień na: data-count=”vertical” data-via=”netbloger” data-url=”{C}” data-text=”{C}” (zamiast netbloger, będzie twoja nazwa)
- Zmodyfikowany kod wklej na miejsce Twitter’a
FACEBOOK:
- Kliknij TUTAJ
- W polu URL to Like wpisz http://google.com
- Odznacz „Send Button” oraz „Show Faces”, a następnie zmień szerokość (width) na 70 i kliknij GET Code
- Skopiuj i wklej w odpowiednie miejsce kod IFRAME i znajdź słowo height:
- Podmień wartość po dwukropku na 62px (chodzi o wysokość)
- Znajdź i podmień http%3A%2F%2Fgoogle.pl na: <?php echo urlencode($url); ?>
GOOGLE +1:
- Kliknij TUTAJ
- Z Size wybierz opcję „Tall”, później skopiuj kod i wklej w przeznaczonym dla Google +1 miejscu
- Wyszukaj size=”tall”, dodaj spację i wklej kod: href=”<?php echo $url; ?>”
I na tym koniec! Twój kod powinien wyglądać podobnie do mojego niżej.
Sposób automatyczny:
Skopiuj i wklej gotowy kod poniżej kodu pierwszego w pliku footer.php. Nie zapomnij zmienić TWOJ_LOGIN na swoją nazwę użytkownika w 3 linijce.
KOD #3
3. Czas na CSS
Za pomocą kilku linijek kodu możemy ustawić naprawdę dobrze wyglądające okienko. Dzięki pozycji fixed, nasze okienko będzie cały czas w lewym dolnym rogu (Wyłączając przeglądarkę Internet Explorer 6 – ale jej już prawie nikt nie używa 😉 Przygotowany kod wklej w głównym pliku stylów css. Prawdopodobnie będzie to style.css KOD #4
/**
* Plywajace Okienko Udostepniania
*/
#social-float {
position: fixed;
left: 10px;
bottom: 13px;
width: 78px;
padding: 10px 5px;
text-align: center;
background-color: #fff;
border: 5px solid rgba(180, 180, 180, .7);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
display: none;
}
.sf-twitter {
height: 62px;
margin-bottom: 10px;
}
.sf-facebook {
height: 60px;
margin-bottom: 10px;
}
.sf-plusone {
height: 60px;
}
Jak powyższy kod ustawić według własnych potrzeb? Patrz screenshot niżej:
Ważne: Na razie okienko nie może się wyświetlać, ponieważ wcześniej użyłeś atrybutu display: none; w kodzie. Czytaj dalej!
4. Ukryj okienko w mniejszych przeglądarkach
Bez sensu byłoby wyświetlanie okienka w mniejszych przeglądarkach, ponieważ kolidowałoby z treścią strony. Tego oczywiście nie chcesz. Dlatego aby rozwiązać problem, musimy uruchomić jQuery, aby sprawdzać rozmiar przegląraki. Wtedy okienko udostępniania będzie wyświetlać się poprawnie w każdych warunkach.
Po pierwsze, upewnij się, że na swoim blogu masz już uruchomiony jQuery poprzez dodanie kodu do pliku functions.php lub header.php przed tagiem wp_head();
Linijki 4 oraz 5 sprawdzają przeglądarkę przy pierwszym załadowaniu, czy jest wystarczająco szeroka. Linijka 8 wskazuje na to, że skrypt działa poprawnie również w przypadku, kiedy użytkownik sam zmieni rozdzielczość przeglądarki.
Domyślnie ustawiłem szerokość 1030 px, gdzie 980 px odpowiada ogólnie przyjętej szerokości strony + 150 px na okienko. Możesz oczywiście zmienić według własnego uznania szerokość. Lecz pamiętaj, że musisz zrobić to w obydwóch miejscach.
Jeśli wszystko umieściłeś w odpowiednim miejscu, powinieneś uzyskać oczekiwane efekty. Czuj swobodę do udoskonalania kodu po swojemu. Jeśli masz jakieś problemy, daj mi znać w komentarzach!
Bardzo dziękuję Michaelowi Martinowi za zgodę wykorzystania również jego doświadczenia w tym wpisie. Thanks Michael! 😉
Dodaj komentarz