Ostatnio pisałem o tym, jak zrobić wysuwany LikeBox Facebooka, jak się okazuje czasem jedna zakładka jest niewystarczająca. Obecnie prawie zawsze obok widgetów Facebooka pojawiają się również guziki z Google +, dlatego większość z nas chciałaby promować swoje wpisy na tych portalach równolegle.
Chociaż nie ma dużego zapotrzebowania na tego typu gadżety, to uważam, że przedstawiony tutaj sposób jest jak najbardziej przyjazny użytkownikom – można na jego podstawie zrobić tylko jedną zakładkę i tak zostawić, albo dodawać kolejne w miarę potrzeb.
Kod HTML social slidera
Tym razem, zakładka jest oparta na nieuporządkowanej liście HTML z zagnieżdżonym blokiem div, który będzie służył za 'ciało’ zakładki. Spójrzmy na ten kod:
<ul id="multitab"> <li> <img src="img/facebook-slider.png" /> <div>TUTAJ NP KOD Z FACEBOOKA</div> </li> <li> <img src="img/googleplus.png" /> <div style="border: solid #cd3c2a 3px;">TUTAJ NP KOD Z GOOGLE PLUS</div> </li> <li> <img src="img/rozne.png" /> <div style="border:solid #46832c 3px;">Treść zakładki z różnościami :-)</div> </li> </ul>
Wysokość i szerokość elementu listy, równe są wymiarom grafiki, które będą imitować zakładki.
Bezpośrednio wewnątrz elementu listy umieszczamy obrazek, oraz blok z kodem zawartości, który będzie wyjeżdżał po najechaniu kursorem nad dany element listy.
Co tutaj musimy zrobić sami? Analogicznie do poprzedniego wpisu należy przejść pod adres https://developers.facebook.com/docs/plugins/page-plugin i wygenerować kod dla pluginu Facebooka, albo tutaj https://developers.google.com/+/web/badge/ w przypadku Google+.
Opcjonalnie, aby uzyskać ładny, spójny efekt, należy zmienić kolor ramki bloku w którym znajduje się plugin, w sposób przedstawiony poniżej, chodzi o ten fragment:
<div style="border:solid #46832c 3px;">Treść zakładki z różnościami :-)</div>
CSS multi social slidera
#multitab{ position:fixed; right:0px; top:190px; z-index:100; } #multitab li{ cursor:pointer; width:35px; height:110px; margin-bottom:1px; position:relative; } #multitab > li > div{ padding:5px; border: solid #0170cf 3px; background: #fff; float:left; width:286px; height:296px; -moz-border-radius: 0 0 0 8px; -webkit-border-radius: 0 0 0 8px; border-radius: 0 0 0 8px; position:absolute; top:0; left:35px; z-index:100; }
jQuery – wysuwany likebox Facebook w akcji
W sekcji head strony umieszczamy snippet dołączający bibliotekę jQuery do naszego dokumentu:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Następnie, w sekcji head
, albo gdzieś w sekcji body
umieszczamy poniższy kod jQuery, który będzie odpowiadał za obsługę slidera, animował wysuwanie zakładek.
<script> $(function(){ $('#multitab li').hover( function(){ $(this).stop().animate({"right": "302px"}, 1000); } , function(){ $(this).stop().animate({"right": "0"}, 1000); } ); }); </script>
Demo
I to właściwie już wszystko, trochę długa nazwa, ale nasz Mutli PagePlugin Facebook Tab Slider jest już gotowy! Tutaj znajduje się demo właśnie stworzonego slidera.