Czego szukasz?

Jeżeli szukasz odpowiedzi na pytania związane z SEO lub Wordpressem wpisz frazę i czekaj na podpowiedzi lub kliknij enter! Wyniki pokazują także linki do zewnętrznych źródeł.

11830 artykułów w bazie

Pokaż na blogu swoje profile z social media bez użycia wtyczki

Social media weszło już do naszej codzienności dawno temu. Kto nie ma konta na Facebook’u, Twiter. Instagramie czy innym portalu społecznościowym? Prawie każdy posiada swoje konto na przynajmniej na jednym portalu. Social media zostały również wykorzystane w biznesie. Powstają nowe szkolenia, kursy o strategii budowania relacji czy budowaniu biznesu właśnie na portalach społecznościowych.

Pewnie nie raz będąc na jakimś blogu widziałeś ikonki skocznościowe w sidebarze czyli w prawej kolumnie bloga z wezwaniem np. Znajdź mnie na .. lub Śledź mnie na..

Dzisiaj pokaże jak możemy to zrobić na naszym blogu w bardzo prosty sposób.

Sposób 1. Wtyczki wordpress i połączenie naszych kont z social media

Wydaje się, że najprostszym sposobem na dodanie ikonek social odsyłających do naszych profili z portali społecznościach jest właśnie wykorzystanie wtyczek WordPress. Pomimo tego, ze jest to szybkie i proste ma pewną wadę. Musisz pamiętać, że im więcej masz zainstalowanych wtyczek na blogu tym może się on dłużej ładować tym bardziej gdy wtyczka zawiera o wiele więcej funkcji niż nam jest potrzebne. Co to oznacza? Czytelnik, który będzie musiał długo czekać aż wczyta się twój blog, może go opuścić, bo będzie tą sytuacją zirytowany. Szybkość ładowania strony ma również wpływ na pozycjonowanie (więcej możesz przeczytać tutaj: http://www.seowordpress.pl/odchudzamy-wordpressa-zwiekszamy-predkosc-seo/).

Sposób 2. Wbudowane ikony social w szablonie.

Coraz więcej szablonów ma już wmontowane funkcje, które pozwalają nam dodać swoje profile i wyświetlić je w sidebarze. Wybierając szablon tylko dla skorzystania z tej możliwości byłoby bez sensu. Rezygnujemy, zatem z wtyczek social media i z szablonów. Zrobimy to wklejając odpowiedni kod HTML.

Sposób 3. Dodanie ikonek social media z naszymi profilami bez wtyczek.

Wybieramy icony social media i tworzymy kod HTML do wyświetlania ich

Krok 1. Na początku będą nam potrzebne ikonki społecznościowe, które chcemy dopiąć do naszego bloga. Możemy znaleźć pliki graficzne w Internecie i to zupełnie za darmo. Polecam ci przeszukanie i wybranie ikonek z tej strony www.iconfinder.com/. 

Jak znaleźć i zapisać ikony na dysku.

  1. Wpisz w wyszukiwarkę na stronie „social media”
  2. Znajdź ikonę i kliknij na nią
  3. Poszukaj takich, które mają do zapisu 32×32, 48×48 i 64x64px.
  4. Wybierz rozmiar i kliknij na przycisk PNG, otworzy się okno do pobrania ikony.

social-media-zapis

Musimy sprawdzić, który rozmiar będzie najlepiej się prezentować w sidebarze, z reguły najlepiej wygląda ikona 64×64, jeśli mamy 3 ikonki koło siebie. Jeśli tych ikon ma być więcej to lepiej będą się prezentować w mniejszej skali tak, aby wszystkie mieściły się poziomo w jednej linii.

Moja rada. Dobierz ikonki stylistyczne do siebie pasujące, czyli przykładowo

social-media-ikony

Wszystkie ikony są w tym samym kształcie. Zamiast takiego zestawu:

social-media-ikony-1

Każda z innej parafii pod względem typografii czy kształtu. Kiedy w wyszukiwarce, któryś styl ci przypadnie do gustu to po kliknięciu na grafikę zostaną pokazane wszystkie inne powiązane ikony.

Pamiętaj! Wizerunek bloga jest bardzo ważny, dlatego dobrze dobierz ikony

Krok 2. Wgraj ikonki na swojego bloga. Jak to zrobić?

  1. Wybierz zakładkę media => dodaj nowe
  2. Wgraj wybrane wcześniej pliki graficzne ikon.

Krok 3. Skopiuj i zapisz gdzieś linki do grafik, które wgrałeś. Skąd wziąć linki?

Otwórz grafikę np. w nowym oknie i skopiuj jej adres, który się znajduje w polu URL po prawej stronie. Kliknij w nazwę adresu i wciśnij kombinację ctrl+a wtedy zostanie zaznaczony cały link, który jest dłuższy niż pokazany na obrazku. Zapisz wszystkie linki np. w notatniku, bo będą nam potrzebne później.

link-do-ikony

Krok 4. Przygotowanie kodu HTML – wyświetlanie ikonki

Teraz naszym zadaniem jest napisać kod, który będzie wyświetlał ikonkę social media, a po kliknięciu na niej otwierał nową stronę z profilem do wskazanego portalu.

  1. Wyświetlenie obrazka ma taką składnie
  2. Podaj rozmiar ikonek, standardowo dodałam je w wielkości 68×68. Jeśli wybrałeś inną to podmień dane wpisując swój rozmiar np. 32 w height i width.
  3. Musimy pomiędzy src=”….” Wkleić link do ikonki np. Twitter
  4. W paremetrze alt zamiast „tekst” możemy wpisać np. „Konto twitter”
  5. W parametrze tittle wpisz np. Znajdź mnie na Twitterze
  6. Całość powinna wyglądać tak dla pojedynczego profilu social media

Teraz twoim zadaniem jest przygotowanie takiego kodu dla pozostałych ikon, które chcesz wyświetlić.

Krok 5. Przygotowanie odnośnika do profili.

Teraz musimy przygotować kod HTML, który będzie odpowiadać za funkcję kliknięcia na ikonkę i otwarcia profilu social media w nowej zakładce. Dodajemy link do profilu społeczniościowego zamiast url np. do google+ oraz parametr odpowiedzialny za otwarcie profilu w nowym oknie _blank. Całość powinna wyglądać tak:

Teraz Twoim zadaniem jest stworzenie pozostałych odsyłaczy dla wszystkich wybranych przez ciebie ikonek społecznościowych.

Krok 6. Łączymy kod wyświetlania obrazka z odnośnikiem do profilu

Teraz twoim zadaniem jest złączenie kodów img i a href dla wszystkich ikon. Najtrudniejszy kawałek pracy jest za nami. Teraz już będzie maga prosto.Dodajemy kod html ikon social media do widgetu na blogu. Wybierz z menu po lewej stronie zakładkę Wygląd => widgety.

wyglad-widgety

Wybierz widget Tekst i przeciągnij go do sidebar’a po prawej stronie. Aby ładnie wyglądały ikony zamieścimy wszystko między znacznik <p> </p>

social-media-widget

Wklej cały kod html, który wcześniej stworzyliśmy , dopisz tytuł widgetu i zapisz. Gotowe! Końcowy efekt wygląda tak jak na moim blogu:

social-media-sidebar

O Kamila Nitschka

Od kilku lat pasjonuje mnie blogowanie, a przede wszystkim stawianie blogów na platformie WordPress. Cały czas poszerzam swoją wiedze o WordPressie, pozycjonowaniu, seo. Od niedawna zajmuje się marketingiem internetowym z wykorzystaniem WordPressa do zarabiania w internecie.
Udostępnij na: Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

42 komentarze

  1. DMati

    Fajny i prosty sposób na dodanie social ikonek ale lepszym jest skorzystanie z fontu z ikonami. Plus tego taki, że przy rwd nie trzeba będzie obrazków skalować w dół/w górę, plus zawsze kilka requestów per obrazek brak (chyba, że zapiszemy je sobie w formie jednego zbiorczego pliku). Jeżeli nasza skórka nie korzysta z takiego fontu to wystarczy któryś podpiąć, np: font awesome, lub lepiej przygotować własny (są onlineowe generatory) pod potrzeby, bo po co podpinać font z xxx ikonami jak wykorzystamy tylko kilka.

    • Wojciech Władziński

      Zgadza się – można to zrobić także poprzez font natomiast ma to sens gdy ikony będą duże i skalowały się będą pod RWD. Tutaj natomiast umieszczenie ich w np. sidebarze pozwala na utrzymanie ich w jednakowej wielkości. A różnica w szybkości ładowania się jest bardzo mała szczególnie gdy zastosujemy sprite.

    • Dzięki za ocenę artykułu:) i ciesze się, że się podobał.

      Tak masz racje można dodać fonta, zamiast ładować obrazki. Jednak fonta należało, by dodatkowo stylować w css’ie aby ładnie się prezentował. Dodanie małej ikonki graficznej załatwia sprawę, bo już to wygląda dobrze. Należało, by też stworzyć motyw dziecka, aby nie dokonywać zmian w głównym kodzie, jeśli chodzi o css, gdybyśmy aktualizowali skórkę. Albo, chociaż dodać wtyczkę, w której możemy dodawać kod css. Wszystko to skomplikowałoby poradnik.

      Artykuł miał być prosty dla wszystkich i chyba się udało to osiągnąć.

  2. Witam serdecznie.

    Odświeżę temat, gdyż mam problem z przekierowaniem ikonek na adresy. Wyskakuje mi komunikat 404 Not Found. Działa tylko przekierowanie Facebooka.

    Kod, jaki wklejam wygląda następująco. Przykład Google+:
    <a href="//plus.google.com/b/113498180263599418199/113498180263599418199”" rel="nofollow"></a>

    Jeśli popełniłem gdzieś błąd, proszę o pomoc w zlokalizowaniu.

  3. WItam, odświeżam temat.
    Również mam problem z przekierowaniem strony- wyświetla mi ” Ups! Nie udało się znaleźć pożądanej strony.”
    Link który wklejam jest następujący :
    Nie wiem dlaczego mam podany problem… 🙁

  4. Witam. Proszę o poradę. Wykonałam wszystkie kroki, ale przekierowanie nie działa.
    Ikonki się wyświetlają prawidlowo, ale po kliknięciu nie ma przekierowania.

    Przykład z twitter: mój kod:

  5. serdeczne dzięki za przystępny artykuł, jednak i u mnie po kliknięciu w ikonkę wyświetla się komunikat „404 not found”… byłabym wdzięczna za zerknięcie okiem specjalistki i informację o ewentualnej przyczynie:)

  6. Niestety, taki fajny sposób a nie działa 🙁 Wszystkie ikonki przekierowują mnie do facebooka.
    i rozjechały mi się inne widgety na dole strony. Jak temu zaradzić?

    Wklejam taki kod:
    <a href="https://www.facebook.com/NewSoulDesign/" rel="nofollow"></a><a href="https://www.instagram.com/newsouldesign/" rel="nofollow"></a<a href="https://pl.pinterest.com/newsouldesign/" rel="nofollow"></a><a href="https://plus.google.com/u/0/b/101765300219549386399/101765300219549386399" rel="nofollow"></a>

    • Wojciech Władziński

      Witam,

      Link był w kodzie nie domknięty. Poprawny kod:
      <a href="https://www.facebook.com/NewSoulDesign/" rel="nofollow"></a><a href="https://www.instagram.com/newsouldesign/" rel="nofollow"></a><a href="https://pl.pinterest.com/newsouldesign/" rel="nofollow"></a><a href="https://plus.google.com/u/0/b/101765300219549386399/101765300219549386399" rel="nofollow"></a>

  7. Witam,
    1. Co trzeba zrobić by ikonki z sobą sąsiadowały a nie były jedna pod drugą?
    2. Jeśli w moim motywie są ikonki społecznościowe lecz na dole strony co nie bardzo mi się podoba czy dodatkowe ich podlinkowanie osłabi szybkość bloga?

  8. Witam robię wszystko według instrukcji ale mam pewien problem bo jedyna ikonka, która pojawia się na moim blogu to ikonka snapchata mimo, że w kodzie dałam ich więcej, co może być tego przyczyną?

  9. Witam, świetne instrukcje zrobiłam wszystko po kolei, ale nie mam pojęcia gdzie ten kod HTML jestem w tym zupełnie zielona i dopiero zaczynam :(, gdzie mogę go znaleźć żeby zmodyfikować?

  10. Dzień dobry! A czy istnieje możliwość, aby oprócz mediów społecznościowych pod ikonkę podlinkować formularz kontaktowy np. Contact Form 7, czy to już grubszy wiór, który nie koniecznie zdaje egzamin? Dziękuję, Ania

Zostaw odpowiedź

Email nie będzie publikowany. Wymagane pola są oznaczone *

Możesz używać tych tagów HTML <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Oferuję szereg usług związanych z WordpressemSPRAWDŹ OFERTĘ
Przeczytaj inne:
Wtyczki do WP, których nie znasz a powinieneś cz.6

W dzisiejszym artykule przedstawię kolejną paczkę darmowych wtyczek, które na pewno przydadzą się Wam przy tworzeniu lub rozszerzaniu Waszej strony...

Zamknij