BLOGGER, TUTORIALE, tutoriale Blogger

Jak dodać wysuwany Facebook (czyli Facebook pop up box) na Bloggerze?

<script src=’https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js’ type=’text/javascript’/> – See more at: http://allbestuto.blogspot.fr/2012/07/comment-ajouter-le-gadget-flottant-fans.html#sthash.mcIitLNw.dpuf
<script src=’https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js’ type=’text/javascript’/>

– See more at: http://allbestuto.blogspot.fr/2012/07/comment-ajouter-le-gadget-flottant-fans.html#sthash.mcIitLNw.dpuf

<script src=’https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js’ type=’text/javascript’/>

– See more at: http://allbestuto.blogspot.fr/2012/07/comment-ajouter-le-gadget-flottant-fans.html#sthash.mcIitLNw.dpuf

<script type=”text/javascript”> //<!– 
$(document).ready(function() {$(„.w2bslikebox”).hover(function() {$(this).stop().animate ({right: „0”}, „medium”);}, function() {$(this).stop().animate({right: „-250”}, „medium”);}, 
500);}); //–> </script> 
<style type=”text/css”> 
.w2bslikebox{background: url(„http://1.bp.blogspot.com/-UuBsjDC5vSc/TuiSd0g9bHI/AAAAAAAAAyk/MqKt8IpiIVM/s1600/facebook1.png”) no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;} 
.w2bslikebox div{border:none;position:relative;display:block;} 
.w2bslikebox span{bottom: 10px;font: 9px „lucida grande”,tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} 
.w2bslikebox span a{color: #FF9D00;text-decoration:none;} 
.w2bslikebox span a:hover{text-decoration:underline;} 
</style><div class=”w2bslikebox” style=””><div>

<iframe src=”http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/AllBestTuto&amp;

width=245&amp;colorscheme=light&amp;show_faces=true&amp; connections=12&amp;stream=false&amp;header=false&amp;height=330″ scrolling=”no” frameborder=”0″ scrolling=”no” style=”border: medium none; overflow: hidden; height: 330px; width: 245px;background:#fff;”></iframe><span><a href=”http://allbestuto.blogspot.com/2012/07/comment-ajouter-le-gadget-flottant-fans.html” target=’_blank’>Avoir Ce Gadget</a></span></div></div>

– See more at: http://allbestuto.blogspot.fr/2012/07/comment-ajouter-le-gadget-flottant-fans.html#sthash.mcIitLNw.dpuf

jak dodać wyskakujący facebook

Zaklinałam się, że takiego wyskakującego, a raczej naskakującego Facebooka czyli fachowo Pop-up Box z Facebooka nie dodam. Ale dodałam. Póki co jako eksperyment, żeby sprawdzić czy mój facebookowy licznik zacznie bić trochę szybciej.

 

Dlaczego się na to zdecydowałam? Zdałam sobie sprawę, że czytając inne blogi na komórce, najczęściej zapominam o polubieniu ich strony facebookowej. Z drugiej strony, jak wyskakuje mi taki naskakujący pop-up box, dla świętego spokoju na niego klikam. No tak, żeby móc pójść dalej, póki mam połączenie. No cóż korzystam z komórki, może i nienajlepszej, stąd pewnie ta refleksja.

W internecie znajdziecie pełno wpisów o tym jak dodać takiego wysuwanego like boxa. Niemniej z kronikarskiego obowiązku wrzucam opis, jak ja to zrobiłam.

 

Zgodnie z mottem mojego bloga: „Wszystko jest trudne, nim stanie się proste”. Czyli diabeł nie taki straszny jak go malują. Tymbardziej, że wystarczy pobrać gotowy kod i wstawic do niego URL własnego fan paga. 

Ale zacznijmy krok po kroku.

Ponieważ będziemy musieli zrobić małą manipulację przy szablonie bloga, warto zrobić sobie przedtem (na wszelki wypadek) jego kopę zapasową. W tym celu wchodzimy w Szablon, a następnie klikamy na Utwórz/przywróć kopię zapasową.

jak dodać wyskakujący facebook na Bloggerze
  • Teraz wybieramy Pobierz pełny szablon, który zapiszemy na dysku twardym komputera. Pomyślcie o nadaniu mu takiej nazwy, by się Wam kojarzyła (i by w razie gdyby coś nie poszło jak po maśle, odpukać 3 razy w niemalowane, łatwo było ją odnalezć).
jak dodać wyskakujący facebook na Bloggerze
  • Teraz wchodzimy w Szablon, Formatuj szablon i za pomocą klawiszy CTRL + F szukamy  </head> (koniec sekcji head)  i tuż przed nią wklejamy  


<script src=’https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js’ type=’text/javascript’/>

 
 
jak dodać wyskakujący facebook na Bloggerze
 
  • To już koniec dłubania przy kodzie HTML. Resztę dodamy na poziomie Gadgetu. Wchodzimy w Układ, Dodaj Gadżet, z rozwijanej listy wybieramy HTML/Java Script.
jak dodać wyskakujący facebook na Bloggerze
  • Po wybraniu gadgetu HTML/Java Script,  wklejamy do niego następujący kod. Pamiętając o wrzuceniu do niego URL swojego fan paga w miejsce czerwonego tekstu.
<script type=”text/javascript”> //<!– 
$(document).ready(function() {$(„.w2bslikebox”).hover(function() {$(this).stop().animate ({right: „0”}, „medium”);}, function() {$(this).stop().animate({right: „-250”}, „medium”);}, 
500);}); //–> </script> 
<style type=”text/css”> 
.w2bslikebox{background: url(„http://1.bp.blogspot.com/-UuBsjDC5vSc/TuiSd0g9bHI/AAAAAAAAAyk/MqKt8IpiIVM/s1600/facebook1.png”) no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;} 
.w2bslikebox div{border:none;position:relative;display:block;} 
.w2bslikebox span{bottom: 10px;font: 9px „lucida grande”,tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} 
.w2bslikebox span a{color: #FF9D00;text-decoration:none;} 
.w2bslikebox span a:hover{text-decoration:underline;} 
</style><div class=”w2bslikebox” style=””><div>
<iframe src=”http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/suitedel’urlFanpagaWaszegobloga&amp;
width=245&amp;colorscheme=light&amp;show_faces=true&amp; connections=8&amp;stream=false&amp;header=false&amp;height=330″ scrolling=”no” frameborder=”0″ scrolling=”no” style=”border: medium none; overflow: hidden; height: 330px; width: 245px;background:#fff;”></iframe><span><a href=”http://blogger-au-bout-du-doigt.blogspot.com/2012/04/gadget-fans-sur-facebook-flottant-sur.html”>Avoir ce gadget</a></span></div></div>
 
Kod pochodzi z bloga Le blogger.

Macie wątpliwości co to jest URL Waszego Fan Paga? Po prostu wejdzcie na niego i skopiujcie adres u góry strony. Mój wyglada tak:

<script type=”text/javascript”> //<!–
$(document).ready(function() {$(„.w2bslikebox”).hover(function() {$(this).stop().animate ({right: „0”}, „medium”);}, function() {$(this).stop().animate({right: „-250”}, „medium”);},
500);}); //–> </script>
<style type=”text/css”>
.w2bslikebox{background: url(„http://1.bp.blogspot.com/-UuBsjDC5vSc/TuiSd0g9bHI/AAAAAAAAAyk/MqKt8IpiIVM/s1600/facebook1.png”) no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.w2bslikebox div{border:none;position:relative;display:block;}
.w2bslikebox span{bottom: 10px;font: 9px „lucida grande”,tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.w2bslikebox span a{color: #FF9D00;text-decoration:none;}
.w2bslikebox span a:hover{text-decoration:underline;}
</style><div class=”w2bslikebox” style=””><div>
<iframe src=”http://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/vademecumblogera?ref=bookmarks&amp;
width=245&amp;colorscheme=light&amp;show_faces=true&amp; connections=8&amp;stream=false&amp;header=false&amp;height=330″ scrolling=”no” frameborder=”0″ scrolling=”no” style=”border: medium none; overflow: hidden; height: 330px; width: 245px;background:#fff;”></iframe><span><a href=”http://blogger-au-bout-du-doigt.blogspot.com/2012/04/gadget-fans-sur-facebook-flottant-sur.html”>Avoir ce gadget</a></span></div></div>

Pozdrowienia
 
Beata

Zapisz się na newsletter i pobierz darmowy ebook: TWOJA MARKA NA INSTAGRAMIE

VADEMECUM BLOGERA NA YOU TUBE

O AUTORZE

Jestem blogerką, emigrantką, poczwórną mamą. Kobietą, która nie jednego w życiu doświadczyła, z niejednego pieca jadła chleb.

Od prawie 20 lat mieszkam na emigracji we Francji, w Paryżu.

Uważam, że emigracja to dobra szkoła życia i wymagająca, choć bardzo skuteczna lekcja pokory. Ale też wewnętrznej siły i zdrowego dystansu do samego siebie i momentami wystawiającej nas na próby codzienności.

Jestem tu po to, by pomóc Ci lepiej pisać, skuteczniej docierać do czytelnika, wywołać większe zaangażowanie w social mediach. Czasami rozśmieszę lub zmotywuję.

Ale równolegle do Vademecum Blogera jestem autorem kilku niezależnych miejsc w sieci.

Ponieważ wiele osób pyta się mnie, jak mimo 4 ciąży i 40 - stki na karku udało mi się zachować linię nastolatki, uruchomiłam kanał na YouTube o zdrowym gotowaniu - bezglutenowo - bezmlecznie.

Znajdziesz mnie również na blogu BeataRed.com i powiązanym z nim Instagramie, gdzie piszę bardziej osobiście o Paryżu i mojej pasji, jaką jest nauka języka francuskiego.

A jeżeli interesują Cię praktyczne porady o tym, jak budować swoją obecność w sieci zapraszam na mój kanał na You Tube z blogowymi tutorialami.

(12) Comments

  1. smallredcherry says:

    Dzięki wielkie, z Tobą grzebanie w kodzie html mi nie straszne! 🙂 W końcu coś mi wyszło dzięki Tobie, może czegoś się nauczę.

  2. dzięki 🙂 i zapraszam do siebie…..cały wieczór ja dzisiaj u Ciebie 😉

  3. Super wpis! Kolokwialnie mówiąc, „jak krowie na rowie” ale tak powinno być. Są zdjęcia, są kolorki – jest przejrzyście! Dodaje +1 w google nawet;)
    nadziewiatympietrze.blogspot.com

  4. Belle Femme says:

    Niestety nie działa poprawnie ;(

    1. Mi też. Jest zakładka z fb, ale nie wysuwa się.

  5. Udało się 🙂 Dzięki!

  6. Jasna i czytelna instrukcja,działa! Kapitalna pomoc! 🙂 Dzięki!

  7. Dziękuje bardzo! Super instrukcje 😉

  8. Witaj, A jak dodać taki pop up wyskakujący na środku?

  9. Chuda Maruda says:

    hej! mam problem z pierwszym krokiem, jak wklejam tą formułkę: to reszta kodu html robi się czarna i jak chce to zapisać to wyskakuje jakiś błąd, dokładnie taki: Błąd podczas analizowania pliku XML, wiersz 526, kolumna 15: Open quote is expected for attribute „{1}” associated with an element type „src”.

    Wiesz może jak mogę sobie z tym poradzić?
    Pozdrawiam i wkrótce zapraszam na swojego bloga!

    1. Błąd tkwi w tym, że po src= jest potrzebny podwójny cudzysłów czyli taki „, a nie taki, jaki jest w tym kodzie. Ten kod powinien wyglądać tak: . Ale nawet jeśli dobrze wkleisz ten kod, to w tym drugim kodzie do gadżetu też są niestety błędy i nie działa.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

Zapisz się na newsletter i zgarnij praktyczny ebook o Instagramie

X