Social Media: Jak zrobić pływające okienko udostępniania?

utworzone przez | Lut 7, 2012 | Social Media, Wordpress | 5 Komentarze

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.

Pływające okienko – Przykład


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ę:

  1. Jak dodać do takiego okienka przyciski z Facebooka, Google Plus oraz Twittera.
  2. Jak sprawić, aby za każdym razem, niezależnie od wpisu, strony, czy kategorii, udostępniane były poprawne linki.
  3. Jak wyświetlać okienko w lewym dolnym rogu przeglądarki.
  4. Jak ustawić automatyczne ukrywanie okienka, jeśli przeglądarka czytelnika będzie zbyt mała (aby nie kolidowała z tekstem).

Demo możesz zobaczyć tutaj.

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.


Pływające okienko – SCREENSHOT #1


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: 

  1. Kliknij TUTAJ
  2. Wybierz button Share a link
  3. 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)
  4. Zmodyfikowany kod wklej na miejsce Twitter’a

FACEBOOK:

  1. Kliknij TUTAJ
  2. W polu URL to Like wpisz http://google.com
  3. Odznacz „Send Button” oraz „Show Faces”, a następnie zmień szerokość (width) na 70 i kliknij GET Code
  4. Skopiuj i wklej w odpowiednie miejsce kod IFRAME i znajdź słowo height:
  5. Podmień wartość po dwukropku na 62px (chodzi o wysokość)
  6. Znajdź i podmień http%3A%2F%2Fgoogle.pl na: <?php echo urlencode($url); ?>

GOOGLE +1: 

  1. Kliknij TUTAJ
  2. Z Size wybierz opcję „Tall”, później skopiuj kod i wklej w przeznaczonym dla Google +1 miejscu
  3. 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:

Pływające Okienko – SCREENSHOT #2


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! 😉

5 komentarzy

  1. Tomasz Dyduch

    Świetna robota 🙂
    Okienko pływa po blogu 🙂
    Dzięki.

    Odpowiedz
  2. kk

    Tłumaczyłeś to z angielskiego? Stylistyka jest angielska nie polska we wpisie 🙂

    Odpowiedz
    • Szymon Janik

      Z tego co widzę, źródło mojego wpisu pochodzi od niejakiego Michaela, zatem większość tekstu była tłumaczona. Druga sprawa – publikacja tego wpisu miała miejsce, kiedy praktycznie cały biznes prowadziłem w języku angielskim, stąd taki wygląd wpisu.. Byłem zbyt młody, by utworzyć swój styl ;))
      Pozdrawiam!

      Odpowiedz
  3. Jędrzej

    Przydatny wpis, właśnie skorzystałem z porady i wstawiłem sobie takie pływające okienko udostępniania.

    Odpowiedz

Wyślij komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

Subskrybuj Newsletter

Otrzymuj najnowsze treści prosto na skrzynkę email: