Przewijany pasek społecznościowy Facebook, Twitter, Google Plus

W tym pasku umieszcza się linki do Facebooka, Twittera i na przykład Google Plus. Wymieniam tylko te najpopularniejsze, moim zdaniem. Skoro tylu blogerów umieszcza tego typu dodatek na blogu to widocznie jest to użyteczne. Poprawia interakcję, bo użytkownik może polecić treść znajomym i zwiększa oglądalność bloga. Jak więc zrobić taki pasek?

Korzystam z WordPressa i muszę przyznać, że jest dużo tego typu wtyczek możliwych do pobrania. Jedna z nich wysuwała panel z boku strony, druga dodawała tylko linki pod treścią, a trzecia przewijała się ale nie działała poprawnie pod każdą rozdzielczością ekranu. Dlatego też pomyślałem, że warto zrobić coś takiego (przykład działania jest tutaj na itporady.pl). Wbrew pozorom nie jest to nic skomplikowanego, bo wystarczy kilka linijek kodu aby coś takiego sklecić.

Będzie nam potrzebna biblioteka jQuery lightBox. Zaczynamy od stworzenia bloku, nazwiemy go "bokslikes":

<div id="bokslikes">
	<div class="facebook"><fb:like send="false" layout="box_count" show_faces="false" font="tahoma"></fb:like></div>
	<div class="google"><g:plusone size="medium"</g:plusone></div>
	<div class="twitter"><a href="http://twitter.com/share" class="twitter-share-button" data-count="none">Tweet</a></div>
</div>

Do tego należy dodać kod CSS:

#bokslikes {
display:none;
width:70px;
position:fixed;
top:152px;
}

#bokslikes .facebook, #bokslikes .google, #bokslikes .twitter{ margin:0 0 8px 0; }

Pierwsza linijka kodu CSS sprawia, że blok nie będzie wyświetlany (to zostawiamy do wykonania dla JS). Ustawiamy szerokość na 70 pikseli, oraz ustawiamy pozycję na fixed. Jest to bardzo ważny parametr, bo to on sprawi, że nasz pasek społecznościowy nie będzie się przesuwał (treść będzie się przewijać, a pasek zostanie w tym samym miejscu). Dzięki temu możemy skorzystać z parametru top, czyli odległość od górnej krawędzi strony.

Następnie dodajmy odwołanie do biblioteki jQuery lightBox:

<script type="text/javascript" src="jquery-lightbox-0.5/js/jquery.lightbox-0.5.min.js"></script>

<script type="text/javascript">
jQuery(document).ready(function($) {
  
  $('a[rel*=lightbox]').lightBox();
  
  var body_width = $("body").width();
  $('#bokslikes').css('left',body_width / 2 - 545);
  $('#bokslikes').css('display','block');
  
  
})
</script>

Powyższy skrypt odwołuje się do bloku bokslikes, bez tego odwołania nasz pasek nie będzie działał. Dodamy również odwołanie do portali społecznościowych, które mają również własne skrypty:

<div id="fb-root"></div>
<script>
	window.fbAsyncInit = function() {
	FB.init({
		appId  : '',
		status : true,
		cookie : true,
		xfbml  : true
	});
	};
	(function() {
		var e = document.createElement('script');
		e.src = document.location.protocol + '//connect.facebook.net/pl_PL/all.js';
		e.async = true;
		document.getElementById('fb-root').appendChild(e);
	}());
</script>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">{lang: 'pl'}</script>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

Nie potrzebowaliśmy wtyczki, wielu plików, katalogów, by stworzyć pasek społecznościowy na naszą stronę. Pasek przylega do krawędzi strony, a jeśli tak nie jest należy zmienić parametry przy skrypcie jQuery lightBox (body width / 2 - 545).

Data publikacji: Niedziela, 7.04.2013. Tagi: css, facebook, google plus, html, skrypty, twitter.