Wysuwany panel z Facebookiem!

[TheShadooow]

Wysuwany panel boczny wygląda bardzo ładnie, aczkolwiek wiele osób nie wie jak go zrobić, a tak na prawdę jest on banalny do napisania.

 

 

 

1.

Na samym początku musimy upewnić się w na naszej stronie w sekcji "HEAD" znajduje się taka oto fraza:

 

 

Jeżeli nie, to należy ją dodać.

 

 

 

 

 

 

 

 

 

2.

Po czym najlepiej na samej górze w sekcji "BODY" wklejamy taki oto prosty skrypt.

 

Skrypt ten ma za zadanie aby po najechaniu myszą na znaczek facebooka, ten cały "kwadrat" z facebookiem "wyjeżdżał z boku strony.

 

 

 

 

 //<[!CDATA[

  jQuery.noConflict();

   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 );    

   });

 

  });   

 //]]>

3.  

W sekcji "BODY" wklejamy główny kod, który pozwoli nam połączyć za pośrednictwem HTML5 z Facebookiem.

 

  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'));

 

   

 

Teraz może wytłumaczę co i jak, czyli co możemy zmienić w kodzie.

 

 

 

12 linia - left:-33px;

 

- Jak bardzo ma być wychylona grafika (Ta, na którą będziesz najeżdżał) z boku strony,

 

12 linia - src="images/facebook.png"

 - Tutaj znajduje się link do obrazka, na który będziesz najeżdżał, aby wysunąć box'a,

 

13 linia - data-href="www.facebook.com/XYZ"

 - Tutaj znajduje się link do fanpaga, z którym ma być połączenie,

 

13 linia - data-width="300" data-height="550" 

- Tutaj znajdują się zmienne, dla wysuniętego już box'a, czyli jaką ma mieć szerokość i wysokość.

 

 

 

Resztę kodu radzę nie zmieniać, chyba że wiesz co robisz.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

[align=right]Kody które zostały tutaj udostępnione były po części brane z internetu.[/align]

 

 

 

 

 

[croxiuu]

Całkiem fajnie napisany poradnik dziękujemy za wspieranie działu Webmastering.

 

 

[croxiuu]

Całkiem fajnie napisany poradnik dziękujemy za wspieranie działu Webmastering.