Teraz możesz mieć także wysuwany multi Facebook Likebox

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.