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

by | Lut 7, 2012 | Social Media, Wordpress | 4 comments

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.

<?php
// URL to share
if( is_singular() ) {
    $url = get_permalink();
    $text = the_title('', '', false);
} else if ( is_category() || is_tag() ) {
    if(is_category() ) {
        $cat = get_query_var('cat');
        $url = get_category_link($cat);
    } else {
        $tag = get_query_var('tag_id');
        $url = get_tag_link($tag);
    }
    $text = single_cat_title('', false) . ' on ' . get_bloginfo('name');
} else {
    $url = get_bloginfo('url');
    $text = get_bloginfo('name') . ' - ' . get_bloginfo('description');
}
?>

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

<div id="social-float">
    <div class="sf-twitter">
        <!-- KOD z Twittera TUTAJ -->
    </div>
 
    <div class="sf-facebook">
        <!-- KOD z Facebooka TUTAJ -->
    </div>
 
    <div class="sf-plusone">
        <!-- KOD  z Google +1 TUTAJ -->
    </div>
</div>
<!-- /social-float -->

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

<div id="social-float">
    <div>
        <a href="http://twitter.com/share" data-count="vertical" data-via="TWOJ_LOGIN" data-url="<?php echo $url; ?>" data-text="<?php echo $text; ?>">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
    </div>
 
    <div>
        <iframe src="http://www.facebook.com/plugins/like.php?app_id=186708408052490&amp;href=<?php echo urlencode($url); ?>&amp;send=false&amp;layout=box_count&amp;width=50&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=62" scrolling="no" style="border:none; overflow:hidden; width:50px; height:62px;" allowtransparency="true" frameborder="0"></iframe>
    </div>
 
    <div>
        <!-- Place this tag in your head or just before your close body tag -->
        <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
 
        <!-- Place this tag where you want the +1 button to render -->
        <g:plusone size="tall" href="<?php echo $url; ?>"></g:plusone>
    </div>
</div>
<!-- /social-float -->

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(); 

<script type="text/javascript">
    jQuery(document).ready(function($) {
        // Show social voter only if the browser is wide enough.
        if( $(window).width() >= 1030 )
            $('#social-float').show();
 
        // Update when user resizes browser.
        $(window).resize(function() {
            if( $(window).width() < 1030 ) {
                $('#social-float').hide();
            } else {
                $('#social-float').show();
            }
        });
    });
</script>

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

4 komentarze

  1. Tomasz Dyduch

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

    Reply
  2. kk

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

    Reply
    • 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!

      Reply
  3. Krzysztof Skrzypiec

    Wszystko świetnie, śmiga idealnie w moim WordPress. Dziękuję.

    Reply

Submit a Comment

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:

Optin
Zamknij Okienko