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ł.

161 artykułów w bazie

Pokaż na blogu swoje profile z social media bez użycia wtyczki5 min read

5 min read" > social-media-sidebar

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: https://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

Avatar

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.

Czytaj również

Open Graph w WordPress Dziś pokażę jak w prosty sposób zaimplementować Facebookowy Open Graph na stronę Wordpressa dla standardowych artykułów za pomocą wtyczki jak i bez je...
Automatyczne publikowanie postów WP w Social Media... Wielu z Was zastanawiało się pewnie czy jest możliwość automatycznego publikowania na swoich profilach społecznościowych jak Facebook, Twitter napisan...

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="">

Przeczytaj inne:
Picture1
SEO copywriting – jak pisać, by dać się znaleźć?

Samo tworzenie treści w celu zdobycia czytelników już dawno przestało wystarczać. Marketing internetowy to ciągła walka o uwagę internautów, którzy...

Zamknij