22/02/2015

TECHNICZNIE cz.3: Ikonki społecznościowe, like boxy i inne.

Cześć! To moje 3 podejście do napisania tej notki, blogger chyba bardzo nie chce żebym go dziś opublikowała bo kasuje całą moją pracę i jeszcze w dodatku zapisuje wszystko automatycznie, nie pomaga Ctrl+Z. Może jednak tym razem się uda. Dzisiaj chciałam kontynuować cykl postów technicznych i pokazać Wam jak utworzyć na Waszym blogu ikony społecznościowe, dodać gadżet like boxa, czy wyskakujące okno z Waszym fan page.
Zaczynam od ikonek społecznościowych. Co to jest? To grafika, która przenosi Was na fan page Waszego bloga na Facebooku, czy do profilu na Instagram, bądź pozwala na wysłanie do Was wiadomości za pomocą menadżera poczty. 

Proces tworzenia ikonek społecznościowych zaczynamy od znalezienia odpowiednich grafik, wszystkie powinny być w jednym wymiarze, najlepiej w formacie .png z przezroczystym tłem. Następnie wrzucamy je na jakiś serwer, tak aby każde zdjęcie miało osobny link, ja używam portalu Photobucket, po utworzeniu własnego konta możemy przechowywać tam swoje grafiki i bez problemu uzyskujemy link do konkretnego zdjęcia/obrazu.

Kiedy już mamy załatwioną sprawę grafiki przechodzimy do panelu Bloggera i klikamy:
Układ ⇒ Dodaj gadżet ⇒ HTML/JavaScript i w pole "treść" wpisujemy wg wzoru:
Linijkę:
powtarzamy tyle razy ile jest to konieczne.

Jeśli chcecie, aby ikonka np. z kopertą przenosiła Was do automatycznego tworzenia wiadomości email na Wasz adres (jeśli ktoś ma menadżera poczty) to konieczna jest taka linijka w kodzie:

Oczywiście już szybciutko objaśniam Wam co znaczą konkretne rzeczy w kodzie:
Link_Do_Przekierowania - link, na który zostaniemy przeniesieni po kliknięciu w grafikę,
Nazwa_Ikonki - będzie się wyświetlać po najechaniu na ikonkę myszką, np. "Facebook", "Instagram" itp.
Link_Do_Grafiki - link do grafiki, którą umieściliśmy na serwerze,
Adres_Email - Twój adres email.


Teraz czas na like boxy, są różne rodzaje, najlepiej tworzyć go przez TĄ stronę, mamy tam podgląd wszystkich zmian, które wprowadzamy.

Facebook Page URL - adres do Waszego fan page
Width - szerokość (najlepsza będzie troszkę mniejsza niż szerokość paska bocznego),
Height - wysokość,
Show Friends' Faces - po włączeniu tej funkcji będą wyświetlać się profile osób, które lubią tą stronę,
Show Posts - po włączeniu tej funkcji będą wyświetlać się będą najnowsze posty publikowane na fan page,
Show Header - jeśli włączymy tą opcję będzie się wyświetlał tekst "Znajdź nas na Facebooku",
Show Border - gdy jest włączona ta funkcja mamy ramkę dookoła gadżetu, jeśli ją wyłączymy nie mamy ramki.

Gdy wszystko już nam pasuje klikamy "Get code" i kopiujemy oba kody do schowka. Wchodzimy w panel Bloggera i klikamy Układ ⇒ Dodaj gadżet ⇒ HTML/JavaScript i w pole "treść" wpisujemy całość. Zapisujemy i mamy już wszystko gotowe.
Jeśli chcecie wyskakujące okno to polecam Wam TĄ stronę, gdzie uzyskujemy gotowy kod html, który wklejamy na bloga w sekcji body. Aby to zrobić wchodzimy w panel Bloggera:
Szablon ⇒ Edytuj kod HTML i odszukujemy tam następujący fragment kodu:
przed nim wklejamy otrzymany kod i zapisujemy zmiany.

14 comments:

  1. Spróbowalam tego wyskakującego okienka, ale nie wiem czy działa, bo mi nic nie wyskakuje:(
    Zapraszam do mnie na rozdanie z BIELENDA oraz do konkursu:)
    http://bluebrush87.blogspot.com/2015/02/konkurs-twoj-wiosenny-kolor-trend-2015.html

    ReplyDelete
    Replies
    1. Hmmm to jutro sprawdze czy wszystko dobrze opisalam. Teraz jestem na telefonie wiec ciezko mi to sprawdzic :* buziak

      Delete
    2. Kurcze wszystko jest okej napisane, nawet sprawdzałam czy mam w tym samym miejscu to wklejone.

      Delete
  2. Nic mnie tak nie wkurza jak wyskakujące okienko facebooka :/

    ReplyDelete
    Replies
    1. to sobie nie ustawiaj

      Delete
    2. Sobie nie ustawiam. Chodziło mi o ustawione już na blogach, które odwiedzam, a na to nie mam wpływu Anonimie ;)

      Delete
    3. Jesli klikniesz "juz lubie" to nie powinno sie ponownie pokazywac to okienko ;)

      Delete
    4. Pokazuje się zawsze jak wchodzę na Twój blog,a polubiłam już dawno temu ...

      Delete
    5. Zaakceptuj cookie, u mnie się nie pojawia ponownie.

      Delete
  3. Muszę pomyśleć nad ikonami społecznościowymi ;)

    ReplyDelete