Jak dodać plugin Like do Bloggera? Okienko Facebook na blogu "Likebox"
Dodanie tej wtyczki jest niezmiernie prostym zadaniem, jednak komuś, kto jednak nie ma za wiele wspólnego z webmasterstwem, czy też programowaniem może to sprawić problem.
Właściwie wszystko sprowadza się do tego, aby wygenerować kod (jeśli nie potrafimy sami) na stronie facebooka
Jednak, nie dość, że jest to po angielsku to w dodatku trzeba to zrobić samemu ignerując w css szablonu, głównie Bloggera, bo to on sprawia przy tym problemy.
To musimy dodać wchodząc do kokpitu Bloggera > Szablon > Edytuj kod HTML.
Klikamy na pole, gdzie mamy te wszystkie dziwnie wyglądające literki, czyli kod źródłowy strony :)
Wciskamy CTRL+F i szukamy bezpośrednio: <body>
W sekcji <body> wklejamy ten kod (jeśli nie znajdzie <body> to oznacza, że szablon jest napisany w classach, trzeba wpisać <body lub <body class='main-body'> najczęściej):
Klikamy na pole, gdzie mamy te wszystkie dziwnie wyglądające literki, czyli kod źródłowy strony :)
Wciskamy CTRL+F i szukamy bezpośrednio: <body>
W sekcji <body> wklejamy ten kod (jeśli nie znajdzie <body> to oznacza, że szablon jest napisany w classach, trzeba wpisać <body lub <body class='main-body'> najczęściej):
UWAGA: jeśli zaś wyskakuje błąd:"<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/sdk.js#xfbml=1&version=v2.0";fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</script>
Error parsing XML : The reference to entity “version” must end with the ';' delimiter"
To zmieniamy linijkę:
js.src = "//connect.facebook.net/pl_PL/sdk.js#xfbml=1&version=v2.0";
na:
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.0";
Zapisujemy zmiany i gotowe!
Teraz przechodzimy do zakładki Układ. Tam dodajemy sobie gadżet noszący nazwę HTML/Javascript, w środku wklejamy kod wygenerowany na stronce wyżej, przykładowy kod:
<div class="fb-like-box" data-href="https://www.facebook.com/FacebookDevelopers" data-width="150" data-height="200" data-colorscheme="light" data-show-faces="true" data-header="true" data-stream="false" data-show-border="true"></div>I teraz uwaga, nie trudno się domyśleć, gdzie wstawić link do fanpejdża, jednak:
- szerokość zmieniamy za pomocą zmiany linijki data-width="liczba pikseli",
- wysokość zmieniamy za pomocą zmiany linijki data-height="liczba pikseli",
- data-colorscheme="light" - jasna wersja wtyczki oraz "dark" dla ciemnej strony świata ;)
- To tyle ;)
Subskrybuj:
Komentarze do posta
(
Atom
)
Jak wchodzę w kod niestety nie ywszkuje mi sie wiersz z el. body
OdpowiedzUsuńna poprzednich blogach jeszcze bez problemu moglam zainstalowac wtyczke, a na nowym jakos w kodzie mi tego nie wyszukuje. w którym mniej wiecej powinno byc to wierszu?
Ten komentarz został usunięty przez autora.
UsuńPrzepraszam, dodam to w spacjach, spróbuj < b o d y lub < b o d y c l a s s = ' m a i n - b o d y ' >
UsuńDzięki! Problem miałem z Error Passing XML :)
OdpowiedzUsuńMi nie działa, pokazuje się szpetny przycisk i tyle ;) Poprzedni kod działał bez zarzutu.
OdpowiedzUsuńdzięki, dzięki i jeszcze raz dzięki :* świetnie to wytłumaczyłeś, bo ja uważam się za totalnego laika w tych sprawach (grzebanie w kodach) a dałam sobie z tym radę i teraz na blogu mam piękny Page Plugin :D jeszcze raz wielkie dzięki ;)
OdpowiedzUsuńpozdrawiam :)