IDEĄ TEGO POSTA, jest pokazanie najprostszego możliwego rozwiązania na zaimplementowanie wysuwanych pasków bocznych osadzonych w dowolnej przeglądarce internetowej.
Paski boczne można wykorzystać w dowolny sposób!
Ja pokażę jak je połączyć z Facebook, Twitter, Google+, Youtube i NK.
Każdy, nawet nie znający się na programowaniu, w 15 minut może mieć 5 wysuwanych pasków bocznych współpracujących z najpopularniejszymi serwisami społecznościowymi: facebook, twitter, google+, youtube i nasza-klasa.
Narzędziem programistycznym będzie biblioteka jQuery w wersji 1.7.0 bazująca na JavaScript oraz język do tworzenia stron internetowych HTML w najnowszej wersji 5.
Kod jest powtarzalny dla każdego serwisu społecznościowego, nie ma znaczenia czy jest to: facebook, twitter, youtube, google+, czy też nasza-klasa.
Co więcej może służyć dla innych serwisów społecznościownych jak: linkedin (
https://www.linkedin.com), flickr (
https://www.flickr.com), myspace (
https://www.myspace.com), fotka (
https://www.fotka.pl), wykop (
https://www.wykop.pl), czy goldenline (
https://www.goldenline.pl) oraz wielu innych.
Kod można go również wykorzystać do zamieszczania Swoich wstawek programistycznych.
PONIŻEJ JEST W PEŁNI DZIAŁAJĄCY LINK DO TEGO CO OPISAŁEM POWYŻEJ
(tylko: HTML5 i XHTML - po najechaniu. Uwaga: Jak wykorzystujesz HTML 4.01 to skorzystaj z linku dla HTML 4.01) - gotowe rozwiązanie, wystarczy kliknąć i masz:
Patrz tutaj
PONIŻEJ JEST W PEŁNI DZIAŁAJĄCY LINK DO TEGO CO OPISAŁEM POWYŻEJ
(dla wszystkich: HTML5 i XHTML oraz HTML 4.01 - po kliknięciu) - gotowe rozwiązanie, wystarczy kliknąć i masz:
Patrz tutaj
Poniżej gotowy kod, który jest do wypróbowania w linku, który zamieściłem powyżej. Jest to ten sam kod.
Pod spodem kodu jest jego dokładny opis oraz inne zagadnienia, które stanowią jego rozszerzenie.
KOD HTML 5 i jQuery:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<!--WIDGET GOOGLE+-->
<!-- Place this tag in the <head> of your document -->
<link href="https://plus.google.com/108803486747646510695" rel="publisher" /><script type="text/javascript">
window.___gcfg = {lang: 'pl'};
(function()
{var po = document.createElement("script");
po.type = "text/javascript"; po.async = true;po.src = "https://apis.google.com/js/plusone.js";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(po, s);
})();</script>
<!--KONIEC WIDGET GOOGLE+-->
</head>
<body>
<script type="text/javascript">
//<[!CDATA[
jQuery.noConflict();
jQuery(document).ready(function() {
jQuery("#googleplus2_2").hover(function(){
jQuery(this).stop(true,false).animate({right: "0px"}, 500 );
},
function(){
jQuery("#googleplus2_2").stop(true,false).animate({right: "-304px"}, 500 );
});
jQuery("#facebook2_2").hover(function(){
jQuery(this).stop(true,false).animate({right: "0px"}, 500 );
},
function(){
jQuery("#facebook2_2").stop(true,false).animate({right: "-304px"}, 500 );
});
jQuery("#twitter2_2").hover(function(){
jQuery(this).stop(true,false).animate({right: "0px"}, 500 );
},
function(){
jQuery("#twitter2_2").stop(true,false).animate({right: "-300px"}, 500 );
});
jQuery("#youtube2_2").hover(function(){
jQuery(this).stop(true,false).animate({right: "0px"}, 500 );
},
function(){
jQuery("#youtube2_2").stop(true,false).animate({right: "-304px"}, 500 );
});
jQuery("#nk2_2").hover(function(){
jQuery(this).stop(true,false).animate({right: "0px"}, 500 );
},
function(){
jQuery("#nk2_2").stop(true,false).animate({right: "-300px"}, 500 );
});
});
//]]>
</script>
<!--WIDGET FACEBOOK-->
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/pl_PL/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div id="facebook2_2" style="right: -304px; z-index: 9999; background: #ffffff; padding: 0px; width: 300px; height:550px; position: fixed; top: 50px; border: 2px solid #3B95D8">
<a href="#"></a><img style="position: absolute; left:-33px;" src="facebook.png" />
<div class="fb-like-box" data-href="https://www.facebook.com/pages/KatMPBSoft/145582058840684" data-width="300" data-height="550" data-show-faces="true" data-stream="true" data-header="false"></div>
</div>
<!--KONIEC WIDGET FACEBOOK-->
<!--WIDGET TWITTER-->
<div id="twitter2_2" style="right: -300px; z-index: 9998; background: #ffffff; padding: 0px; width: 300px; height: 437px; position: fixed; top: 157px; border: 0px solid #FFFFFF">
<a href="#"></a><img style="position: absolute; left:-33px; top:3px" src="twitter.png" />
<div style='background-color:#809EFF;'>
<!-- STARY KOD TWITTER - już nie wspierany przez Twitter Widget
<script charset="utf-8" src="https://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 20,
interval: 6000,
width: 300,
height: 350,
theme: {
shell: {
background: '#809EFF',
color: '#ffffff'
},
tweets: {
background: '#ffffff',
color: '#000000',
links: '#ff0000'
}
},
features: {
scrollbar: true,
loop: false,
live: true,
hashtags: false,
timestamp: true,
avatars: true,
behavior: 'all'
}
}).render().setUser('KatMPBSoft').start();
</script>
-->
<!-- NOWY KOD TWITTER - wspierany przez Twitter Widget-->
<a class="twitter-timeline" href="https://twitter.com/KatMPBSoft" data-widget-id="278760694994837504">Tweets by @KatMPBSoft</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
</div>
<!--KONIEC WIDGET TWITTER-->
<!--WIDGET NASZA-KLASA-->
<div id="nk2_2" style="right: -300px; z-index: 9997; background: #ffffff; padding: 0px; width: 300px; height: 398px; position: fixed; top: 264px; border: 0px solid #FFFFFF">
<a href="#"></a><img style="position: absolute; left:-33px; top:3px" src="nk2.png" />
<div style='background-color:#2B608C;'>
<script type="text/javascript" src="https://0.s-nk.pl/script/nk_widgets/nk_widget_core"></script>
<script type="text/javascript" src="https://0.s-nk.pl/script/nk_widgets/nk_widget_code"></script>
<script type="text/javascript">
new NkWidgetSledzikShoutList({
user: {
uid: 4807950
},
theme: {
widget_border_color: '#2B608C',
widget_background_color: '#ffffff',
header_text_color: '#ffffff',
header_background_color: '#2b608c',
stripe_background_color: '#a1d262',
shout_text_color: '#475058',
shout_date_color: '#9aa7b2',
shout_link_color: '#2b74b0',
shout_border_color: '#e1e7ed'
},
count: 10,
width: 300,
height: 400
}).init()
</script>
</div>
</div>
<!--KONIEC WIDGET NASZA-KLASA-->
<!--WIDGET YOUTUBE-->
<div id="youtube2_2" style="right: -304px; z-index: 9996; background: #ffffff; padding: 0px; width: 300px; height: 104px; position: fixed; top: 367px; border: 2px solid #3C3C3C">
<a href="#"></a><img style="position: absolute; left:-33px;" src="youtube.png" />
<iframe id="fr" src="https://www.youtube.com/subscribe_widget?p=KatMPBSoft" style="overflow: hidden; height: 105px; width: 300px; border: 0;" scrolling="no" frameBorder="0"></iframe>
</div>
<!--KONIEC WIDGET YOUTUBE-->
<!--WIDGET GOOGLE+-->
<div id="googleplus2_2" style="right: -304px; z-index: 9995; background: #ffffff; padding: 0px; width: 300px; height: 118px; position: fixed; top: 474px; border: 2px solid #00569F">
<a href="#"></a><img style="position: absolute; left:-33px;" src="google.png" />
<!-- Place this tag where you want the badge to render -->
<div class="g-plus" data-href="https://plus.google.com/108803486747646510695" data-width="300" data-height="131" data-theme="light"></div>
</div>
<!--KONIEC WIDGET GOOGLE+-->
</body>
</html>
FACEBOOK - przygotowany dla paska bocznego
Linie kodu odpowiadające za połączenie z facebook dla HTML w wersji 5 (aby działało to dla Twojej strony facebook podmieniasz linię 14 [widoczną poniżej], a dokładnie atrybut data-href=""):
[Pamiętaj także o ścieżce do pliku ze zdjęciem dla wysuwanego paska bocznego]
Tylko w części BODY:
<!--WIDGET FACEBOOK-->
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/pl_PL/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div id="facebook2_2" style="right: -304px; z-index: 9999; background: #ffffff; padding: 0px; width: 300px; height:550px; position: fixed; top: 50px; border: 2px solid #3B95D8">
<a href="#"></a><img style="position: absolute; left:-33px;" src="facebook.png" />
<div class="fb-like-box" data-href="https://www.facebook.com/pages/KatMPBSoft/145582058840684" data-width="300" data-height="550" data-show-faces="true" data-stream="true" data-header="false"></div>
</div>
<!--KONIEC WIDGET FACEBOOK-->
Nastąpiła zmiana kodu Twitter Widget - globalnie w całym Internecie dla Twitter - nasz skrypt już jest do niego dostosowany.
Informacja dla Wszystkich tych, którzy korzystają ze starej wersji skryptu dla Twitter.
TWITTER - przygotowany dla paska bocznego
Linie kodu odpowiadające za połączenie z twitter dla HTML w wersji 5 (aby działało to dla Twojej strony twitter podmieniasz linię 36 [widoczną poniżej], a dokładnie atrybut setUser('')):
[Pamiętaj także o ścieżce do pliku ze zdjęciem dla wysuwanego paska bocznego]
To jest dla starej wersji widget twitter już nie wspieranej przez twitter widget.
Dla nowych wersji twitter widget stosujesz linie 40,41 i 42.
Oraz korzystasz z tego linku:
patrz - warunek musisz być zalogowany na Swoim konto twitter i musisz utworzyć Swój własny widget twitter na Swoim koncie twitter.
Tylko w części BODY:
<!--WIDGET TWITTER-->
<div id="twitter2_2" style="right: -300px; z-index: 9998; background: #ffffff; padding: 0px; width: 300px; height: 437px; position: fixed; top: 157px; border: 0px solid #FFFFFF">
<a href="#"></a><img style="position: absolute; left:-33px; top:3px" src="twitter.png" />
<div style='background-color:#809EFF;'>
<!-- STARY KOD TWITTER - już nie wspierany przez Twitter Widget
<script charset="utf-8" src="https://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 20,
interval: 6000,
width: 300,
height: 350,
theme: {
shell: {
background: '#809EFF',
color: '#ffffff'
},
tweets: {
background: '#ffffff',
color: '#000000',
links: '#ff0000'
}
},
features: {
scrollbar: true,
loop: false,
live: true,
hashtags: false,
timestamp: true,
avatars: true,
behavior: 'all'
}
}).render().setUser('KatMPBSoft').start();
</script>
-->
<!-- NOWY KOD TWITTER - wspierany przez Twitter Widget-->
<a class="twitter-timeline" href="https://twitter.com/KatMPBSoft" data-widget-id="278760694994837504">Tweets by @KatMPBSoft</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
</div>
<!--KONIEC WIDGET TWITTER-->
GOOGLE+ - przygotowane dla paska bocznego
Linie kodu odpowiadające za połączenie z google+ dla HTML w wersji 5 (aby działało to dla Twojej strony google+ podmieniasz linię 4 i 19 [widoczną poniżej], a dokładnie atrybuty href="" i data-href=""):
[Pamiętaj także o ścieżce do pliku ze zdjęciem dla wysuwanego paska bocznego]
W części HEAD:
<!--WIDGET GOOGLE+-->
<!-- Place this tag in the <head> of your document -->
<link href="https://plus.google.com/108803486747646510695" rel="publisher" /><script type="text/javascript">
window.___gcfg = {lang: 'pl'};
(function()
{var po = document.createElement("script");
po.type = "text/javascript"; po.async = true;po.src = "https://apis.google.com/js/plusone.js";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(po, s);
})();</script>
<!--KONIEC WIDGET GOOGLE+-->
W części BODY:
<!--WIDGET GOOGLE+-->
<div id="googleplus2_2" style="right: -304px; z-index: 9995; background: #ffffff; padding: 0px; width: 300px; height: 118px; position: fixed; top: 474px; border: 2px solid #00569F">
<a href="#"></a><img style="position: absolute; left:-33px;" src="google.png" />
<!-- Place this tag where you want the badge to render -->
<div class="g-plus" data-href="https://plus.google.com/108803486747646510695" data-width="300" data-height="131" data-theme="light"></div>
</div>
<!--KONIEC WIDGET GOOGLE+-->
YOUTUBE - przygotowany dla paska bocznego
Linie kodu odpowiadające za połączenie z youtube dla HTML w wersji 5 (aby działało to dla Twojej strony youtube podmieniasz linię 5 [widoczną poniżej], a dokładnie atrybut src=""):
[Pamiętaj także o ścieżce do pliku ze zdjęciem dla wysuwanego paska bocznego]
Tylko w części BODY:
<!--WIDGET YOUTUBE-->
<div id="youtube2_2" style="right: -304px; z-index: 9996; background: #ffffff; padding: 0px; width: 300px; height: 104px; position: fixed; top: 367px; border: 2px solid #3C3C3C">
<a href="#"></a><img style="position: absolute; left:-33px;" src="youtube.png" />
<iframe id="fr" src="https://www.youtube.com/subscribe_widget?p=KatMPBSoft" style="overflow: hidden; height: 105px; width: 300px; border: 0;" scrolling="no" frameBorder="0"></iframe>
</div>
<!--KONIEC WIDGET YOUTUBE-->
NK - przygotowana dla paska bocznego
Linie kodu odpowiadające za połączenie z nasza-klasa dla HTML w wersji 5 (aby działało to dla Twojej strony nasza-klasa podmieniasz linię 11 [widoczną poniżej], a dokładnie atrybut uid:):
[Pamiętaj także o ścieżce do pliku ze zdjęciem dla wysuwanego paska bocznego]
Tylko w części BODY:
<!--WIDGET NASZA-KLASA-->
<div id="nk2_2" style="right: -300px; z-index: 9997; background: #ffffff; padding: 0px; width: 300px; height: 398px; position: fixed; top: 264px; border: 0px solid #FFFFFF">
<a href="#"></a><img style="position: absolute; left:-33px; top:3px" src="nk2.png" />
<div style='background-color:#2B608C;'>
<script type="text/javascript" src="https://0.s-nk.pl/script/nk_widgets/nk_widget_core"></script>
<script type="text/javascript" src="https://0.s-nk.pl/script/nk_widgets/nk_widget_code"></script>
<script type="text/javascript">
new NkWidgetSledzikShoutList({
user: {
uid: 4807950
},
theme: {
widget_border_color: '#2B608C',
widget_background_color: '#ffffff',
header_text_color: '#ffffff',
header_background_color: '#2b608c',
stripe_background_color: '#a1d262',
shout_text_color: '#475058',
shout_date_color: '#9aa7b2',
shout_link_color: '#2b74b0',
shout_border_color: '#e1e7ed'
},
count: 10,
width: 300,
height: 400
}).init()
</script>
</div>
</div>
<!--KONIEC WIDGET NASZA-KLASA-->
Mając tak przygotowane serwisy społecznościowe umieszczone na odpowiednia
spreparowanych warstwach (div-ach), przystępujemy do użycia JQuery.
Linie kodu odpowiadające za obsługę jQuery dla HTML w wersji 5 służą do animacji wysuwanych poszczególnych pasków bocznych - każdego z osobna:
W części HEAD:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
W części BODY:
<script type="text/javascript">
//<[!CDATA[
jQuery.noConflict();
jQuery(document).ready(function() {
jQuery("#googleplus2_2").hover(function(){
jQuery(this).stop(true,false).animate({right: "0px"}, 500 );
},
function(){
jQuery("#googleplus2_2").stop(true,false).animate({right: "-304px"}, 500 );
});
jQuery("#facebook2_2").hover(function(){
jQuery(this).stop(true,false).animate({right: "0px"}, 500 );
},
function(){
jQuery("#facebook2_2").stop(true,false).animate({right: "-304px"}, 500 );
});
jQuery("#twitter2_2").hover(function(){
jQuery(this).stop(true,false).animate({right: "0px"}, 500 );
},
function(){
jQuery("#twitter2_2").stop(true,false).animate({right: "-300px"}, 500 );
});
jQuery("#youtube2_2").hover(function(){
jQuery(this).stop(true,false).animate({right: "0px"}, 500 );
},
function(){
jQuery("#youtube2_2").stop(true,false).animate({right: "-304px"}, 500 );
});
jQuery("#nk2_2").hover(function(){
jQuery(this).stop(true,false).animate({right: "0px"}, 500 );
},
function(){
jQuery("#nk2_2").stop(true,false).animate({right: "-300px"}, 500 );
});
});
//]]>
</script>
I to już wszystko, pozostaje jeszcze do omówienia kwestia osadzenia pasków bocznych w serwisie blogger.com, na Swoim blogu.
Robimy to w głównym szablonie Swojego bloga i postępujemy identycznie jak dla zwykłej strony www.
Blog w serwisie blogger.com jest zawsze zgodny z HTML w wersji 5, więc opisane powyższe kody sa jak najbardziej kompatybilne.
Wszystko co było opisane i co znajduje się w części HEAD umieszczamy w naszym szablonie bloga tuż przez końcem znacznika </head>.
Wszystko co było opisane i co znajduje się w części BODY umieszczamy w naszym szablonie bloga tuż przez końcem znacznika </body>.
Wyjątek stanowi część kodu jQuery, która na stronie www, nie powiązanej z blogger.com, była umieszczona tuż za znacznikiem <body>, w serwisie blogger.com na naszym blogu musi być w części HEAD, tuż przez końcem znacznika </head>
I to by było na tyle miłej zabawy, :)
Każdy mój post, dotyczący w mniejszym lub większym stopniu programowania internetowego jest zawsze kompatybilny z IE od wersji 7, z Firefox od wersji 3.6.3, z Opera od wersji 9.63, z Safari od wersji 5.x i z Chrome od wersji aktualnej
