Wpis archiwalny. Treść może być nieaktualna.

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.

W tym wpisie 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 motywie – na samym końcu wklej poniższy kod (screenshot pod kodem):

KOD #1

<?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');
}
?>

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>

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 style="border: none; overflow: hidden; width: 50px; height: 62px;" 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" frameborder="0" scrolling="no"></iframe>
</div>
<div>

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

</div>
</div>

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ądarki. 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ść 1030px, gdzie 980px odpowiada ogólnie przyjętej szerokości strony +150px 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 się swobodnie ze zmianą kodu i udoskonalaniem po swojemu. Jeśli masz jakieś problemy, daj mi znać w komentarzach!

Bardzo dziękuję Michaelowi Martinowi(aktualizacja 2025: blog już nie istnieje) za zgodę wykorzystania również jego doświadczenia w tym wpisie. Thanks Michael! 😉