Wysuwany pasek boczny na stronie Facebook Twitter Youtube

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

KTO KORZYSTA Z NASZYCH PASKÓW:

https://www.italomondo.cba.pl/
https://www.perfumerianiebieska.pl/
https://77gerda.blogspot.com/
https://www.klimacold.pl/
https://www.p4you.pl/
https://www.naprawykomputerowe.com.pl/
https://www.czarnowo.cba.pl/
https://www.ec.edu.pl/
https://nagranialektorskie.cba.pl/
https://zpp.net.pl/

Ważne - Zademonstruję w tym post-cie również jak umieścić wysuwane paski boczne na Swoim blogu w serwisie internetowym: blogger.com oraz jak na tym blogu używać biblioteki JQuery, które jest niezbędna do funkcjonowania wysuwanych pasków bocznych.
Jak sami widzicie u mnie już to funkcjonuje i nic nie stoi na przeszkodzie, aby u Was to też funkcjonowało.
Uwaga - gdy używamy pasków bocznych na blogger.com, w Swoim blogu, przeglądarka Internet Explorer, nie ma płynnej animacji wysuwania pasków, ale dotyczy to tylko serwisu blogger.com.

NO to zaczynamy!!!
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

Myśli czwartego po buddzie chrystusie_&_mahomedzie Marka Śmierć napisane czterowymiarowo

Wysuwany pasek boczny na stronie Facebook Twitter Youtube

403 komentarze - Zabacz wszystkie komentarze.