2014/03/14

Akademia Blogera #3: Wtyczka społecznościowa Facebooka


W poprzednim poście z cyklu Akademia Blogera (który był wieki temu) zapytałam Was, jaki macie problem/pytanie o treści informatycznej związany z blogiem. Straw Cherry napisała taki o to komentarz (mam nadzieję, że mogę go zacytować):

Ja tam akurat na razie nie chcę rozwijanego menu, ale ładnie wszystko wyjaśniłaś, więc jak mi się zachce mieć rozwijane menu, z pewnością skorzystam :D Ja mam pytanie... Jak wstawić sobie jako gadżet wtyczkę społecznościową Facebooka? W sensie, żeby od razu było przejście do fanpage'a? (Wiem, jestem informatycznym antytalentem) :D

W tym poście postaram się odpowiedzieć na to pytanie i pomóc Straw Cherry oraz osobom, które borykają się z tym samym problemem. 


Otóż wtyczek społecznościowych możemy dodać kilka rodzajów. Podstawowe to:
  • Like Button
  • Like Box
  • Follow Button 
Te trzy powinny Was interesować najbardziej. Jest jeszcze jeden rodzaj - wysuwana wtyczka, ale o tym później.

Jak sprawić sobie taką wtyczkę?
1. Wchodzimy na stronę developers.facebook.com
2. Klikamy na dole witryny Przycisk "Lubię to" -> dowiedz się więcej
3. Wybieramy rodzaj wtyczki. U mnie jest to Like Button
4. Wchodzimy na swoją stronę na Facebooku i kopiujemy adres URL (www)
5. Wklejamy adres w wyznaczone do tego miejsce i klikamy ENTER, aby zobaczyć podgląd
    Możemy wybrać sobie różne opcje wyglądu naszego przycisku. 
6. Klikamy Get Code i kopiujemy kod IFRAME*
7. Otwieramy naszego bloga na Bloggerze -> Układ -> dodajemy gadżet w postaci kodu HTML/JavaScript i wklejamy tam nasz kod. 
8. Zapisujemy i wyświetlamy naszego bloga.

W wybranym przez nas miejscy powinna pojawić się wtyczka. Z każdym rodzajem wtyczki postępujemy podobnie.
*aby wykonać tę operację musimy być zalogowani na fb

Ten typ wtyczki jest powszechnie spotykany, bo jest dosyć prosty. 

Ale co zrobić, jeśli nie chcemy zaśmiecać paska z gadżetami na blogu, a chcielibyśmy mieć wysuwaną wtyczkę społecznościową? 


1. Otwieramy Szablon-> Edytuj kod HTML
2. Szukamy <head> i wklejamy tam poniższy kod:
<style type="text/css">
#wysuwane
{
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJwDbY8dnlQw8rJyge50n8h5DId00Ma57wRGFOyr4lxW94_ugz9ePhoBJAEEuGqLucERdlB4K-KsofalxFym0Yxlae8-NFZrz6KHJbraE3wZl0GjkYzxwQKH3CEcn3qWS0BvtDajJAWUnS/s1600/facebook.png") no-repeat scroll 0 0 transparent;
padding: 10px;
width: 235px;
height:402px;
position: fixed;
margin-top: -100px; /*połowa wysokości panelu w górę */ left: 0px;
top: 50%;
}
.zamknij
{
background-position: 0px 0px -242px 0px;
}
  </style>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  <script type="text/javascript">
$(function(){
$("#wysuwane").css("left","-216px");
$("#wysuwane").hover(
function () {
$("#wysuwane").animate({left: "0px"}, 400 );
$(this).addClass("zamknij");
}, function () {
$("#wysuwane").animate({left: "-216px"}, 400 );
$(this).removeClass("zamknij"); }
);
});
  </script>
<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script>
<![endif]-->

3. Następnie odnajdujemy znacznik </body> i wklejamy nad nim ten kod:
<div id="wysuwane">
<div id="wewnatrz" style="float: left; width: 216px; margin-left: 0px;">
<iframe allowtransparency="true" src="//www.facebook.com/plugins/likebox.php?href=ADRES TWOJEGOFANPAGE&amp;width=190&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false&amp;height=378" style="border: medium none ; overflow: hidden; width: 190px; height: 378px; background-color: rgb(243, 247, 255);" frameborder="0" scrolling="no"></iframe></div>
</div>

W miejscu ADRES TWOJEGO FANPAGE wklejamy adres URL (www) naszej strony. Zapisujemy szablon i wyświetlamy bloga. Efekt powinien być taki:

Mam nadzieję, że w przypadku obu wtyczek Wam wyszło :D
Nie znam innych rodzajów wtyczek niż te, które Wam podałam. Co prawda instrukcje dotyczą tylko dwóch, ale tak jak napisałam, pierwsza jest taka sama w przypadku każdego rodzaju wtyczek z tej strony. 
Nie wiem, jak Wy, ale ja - idąc za tym postem - dodałam sobie wysuwaną wtyczkę. Pamiętam, że kiedyś już ją miałam, jednak wraz ze zmianami w szablonie, wtyczka gdzieś znikła i od tej pory żyję bez :P
Przydał się post? 
Macie jeszcze jakieś problemy, chcecie poruszyć jakieś tematy? Nie musza być związane z informatyką, może szukacie dobrych stron, z których chcecie pobrać obrazki? Piszcie w komentarzach. 

Jak już mowa o wtyczkach i Facebooku to zapraszam Was na mojego: www.facebook.com/ZaczytaneZwariowane i zachęcam do kliknięcia "Lubię to". 

Etykiety: