Beauty

Wyskakujące okienko Facebook Like Box po wciśnięciu przycisku

Demo
W niniejszym tutorialu przedstawimy sposób, w jaki możesz umieścić nasz nowy widżet - wyskakujące okienko Facebook Like Box na Bloggerze. Owo okienko nie pojawia się samo, lecz czytelnik musi wyrazić chęć jego zobaczenia, poprzez kliknięcie na przycisk. Blokotek nie jest zwolennikiem samoistnych wyskakujących okien, i co gorsza na każdej podstronie, ponieważ zniechęcają one do przeglądania bloga, gdyż ciągle trzeba je zamykać. Stworzony przez nas widżet na pewno spodoba się waszym czytelnikom, gdyż jest prosty, estetyczny, a przede wszystkim nie nachalny! Zapraszamy do instalacji!

Umieszczanie widżetu na Bloggerze

Zaloguj się do panelu admina, wejdź w menu Układ i dodaj gadżet tam, gdzie chcesz, by się wyświetlał przycisk.
Wybierz HTML/JavaScript.
W tytuł możesz wpisać Facebook Like Box, lub inny własny tekst, a w treść wklej skopiowany kod widżetu. Na koniec Zapisz.

Kod widżetu

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<style>
.modal-header .close {
margin-top: -10px!important;
font-size: 20px!important;
}
.buttonfb {
background: #2D609B url(http://3.bp.blogspot.com/-oiM2ViPzvuA/VFI7Vn8Z2WI/AAAAAAAAFTg/VVRY5-w7VY8/s1600/facebook-square-white.png)no-repeat left;
color: #fff!important;
padding: 15px 15px 15px 30px;
margin:10px;
display:block;
text-align:center;
font-weight: bold;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
font-size: 16px;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
cursor: pointer;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.buttonfb:hover {
text-decoration: none;
color: #fff;
background: #333 url(http://3.bp.blogspot.com/-oiM2ViPzvuA/VFI7Vn8Z2WI/AAAAAAAAFTg/VVRY5-w7VY8/s1600/facebook-square-white.png)no-repeat left;
}
.copyright {
float: right;
font-size: 11px;
color: #fff;
}
.copyright a {
  color:#ff0;
}
.copyright a:hover {
  text-decoration: none;
  color: #ff0;
}
.modal-title {
font-size: 20px;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
color: #333;
}
</style>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<a href="#likebox" class='buttonfb' data-toggle="modal" title="Kliknij, by otworzyć okienko">
Dołącz do nas na FB
</a>
<!-- Modal -->
<div id="likebox" class="modal" tabindex="-1" role="dialog" aria-labelledby="signin-title" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" style="cursor:pointer" data-dismiss="modal" aria-hidden="true" title="Zamknij okienko">
×
</button>
<h4 class="modal-title">
Dołącz do nas na Facebooku
</h4>
</div>
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fblokotek&amp;width=600&amp;height=300&amp;colorscheme=light&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false&amp;appId=352396781595730" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:600px; height:300px;" allowtransparency="true">
</iframe>
</div>
<!-- /.modal-content -->
<div class="copyright">
Widget powered by 
<a href="http://www.blokotek.pl">
Blokotek
</a>
</div>
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->

Dostosowywanie widżetu

Tekst zaznaczony na pomarańczowo zamień na id swojej strony na Facebooku. Znajdziesz ją w pasku adresu przeglądarki, po wejściu na swój FanPage.

Instagram