Jak utworzyć przyciski udostępniania dla swojej witryny krok po kroku

Opublikowany: 2021-05-21

Przyciski udostępniania społecznościowego są nieodzownym elementem każdej strony internetowej. Niezależnie od tego, czy jest to blog osobisty czy biznesowy, portfolio online czy projekt eCommerce, przyciski społecznościowe umożliwiają klientom łatwe rozpowszechnianie informacji o Twoich treściach na Facebooku, Twitterze, Instagramie lub Pintereście. Wdrażając proste przyciski udostępniania społecznościowego w swoich zasobach internetowych, możesz znacznie zwiększyć swój zasięg i zachęcić nowych klientów do odwiedzania Twojej witryny w poszukiwaniu wartościowych treści lub towarów. W dzisiejszych czasach nie należy lekceważyć siły sieci społecznościowych. Jeśli firmy nie można znaleźć na Facebooku lub Instagramie, traci ona okazję do dotarcia do grupy docelowej i promowania swoich towarów i usług większej liczbie osób. Jak sama nazwa wskazuje, przyciski udostępniania społecznościowego ułatwiają udostępnianie treści w sieci. Powszechną praktyką współczesnych użytkowników jest udostępnianie linków do preferowanych produktów na swoich stronach na Facebooku. Do każdego posta społecznościowego mogą dotrzeć obserwujący o takich samych zainteresowaniach i preferencjach, jak Twój klient.

Co więcej, za pomocą przycisków mediów społecznościowych możesz łatwo udostępniać swoje treści w grupach mediów społecznościowych lub wybranym osobom. Liczba udostępnień w mediach społecznościowych wskazuje na treści, które ludzie uważają za bardziej wartościowe i angażujące. Dlatego wiele marek ciężko pracuje, aby pomnożyć udziały w mediach społecznościowych i zwiększyć świadomość marki.

Rozpowszechnianie informacji o preferowanych fragmentach treści może być łatwe, wystarczy wykonać kilka kliknięć. Przyciski społecznościowe umożliwiają klientom nadawanie linków, gdy pozostają w Twojej witrynie. W większości przypadków wystarczy dotknąć przycisku udostępniania i wybrać platformę mediów społecznościowych, na której ma się pojawić Twój link.

Jak utworzyć przycisk udostępniania krok po kroku

Internet jest pełen różnych przycisków udostępniania, głównym zadaniem jest wybór odpowiednich. Czasami nawet nie rozumiesz, jakich przycisków społecznościowych potrzebujesz na swoim własnym blogu. Czasami nie możesz znaleźć przycisków z wzorem, który odpowiada Twoim potrzebom. Czasami nie możesz znaleźć prostego i fajnego sposobu na zaimplementowanie przycisków udostępniania na swoim blogu. Nie panikować! W tym artykule pokażemy, jak utworzyć podstawowe i społecznościowe przyciski udostępniania.

Kursy projektowania stron internetowych

  • Zajęcia z kodowania online do nauki w domu
  • Kompletny pakiet mistrzowski Photoshop

Jeśli nie chcesz zajmować się ogromnym, zatłoczonym kodem i skomplikowanym dostosowywaniem szczegółów, ten samouczek jest właśnie dla Ciebie. Nawet nowicjusze HTML uznają to za łatwe. Więc zapnij pasy i zaczynajmy!

Krok 1

Pierwszą rzeczą, którą powinieneś zrobić, to otworzyć plik HTML i wkleić poniższy kod

<a onclick="Share.facebook('URL','TITLE','IMG_PATH','DESC')"> {sharing is sexy}</a>
<a onclick="Share.twitter('URL','TITLE')"> {sharing is sexy}</a>

lub
<a href="http://www.facebook.com/sharer/sharer.php?s=100&
p%5Btitle%5D=TITLE&p%5Bsummary%5D=DESC&p%5Burl%5D=
URL&p%5Bimages%5D%5B0%5D=IMG_PATH" target="_blank" onclick="return Share.me(this);">{sharing is sexy}</a>
<a href="https://twitter.com/intent/tweet?original_referer=
http%3A%2F%2Ffiddle.jshell.net%2F_display%2F&text=TITLE&url
=URL" target="_blank" onclick="return Share.me(this)">{sharing is sexy}</a>

Jak utworzyć przyciski udostępniania dla swojej witryny krok po kroku 1

Krok 2

Teraz utwórz plik js zawierający takie informacje:

Share = {
facebook: function(purl, ptitle, pimg, text) {
url = 'http://www.facebook.com/sharer.php?s=100';
url += '&p[title]=' + encodeURIComponent(ptitle);
url += '&p[summary]=' + encodeURIComponent(text);
url += '&p[url]=' + encodeURIComponent(purl);
url += '&p[images][0]=' + encodeURIComponent(pimg);
Share.popup(url);
},
twitter: function(purl, ptitle) {
url = 'http://twitter.com/share?';
url += 'text=' + encodeURIComponent(ptitle);
url += '&url=' + encodeURIComponent(purl);
url += '&counturl=' + encodeURIComponent(purl);
Share.popup(url);
},
popup: function(url) {
window.open(url,'','toolbar=0,status=0,width=626, height=436');
}
};

To wszystko :) Bardzo prosta metoda śledzenia statystyk kliknięcia przycisku udostępniania, który jest umieszczony bezpośrednio na stronie udostępniania. Ten problem został rozwiązany za pomocą tabeli w bazie danych i prostego ajaxu:

popup: function(url,soc) {
window.open(url,'','toolbar=0,status=0,width=626, height=436');

}

Ten skrypt pobiera identyfikator z adresu URL, dodaje etykietę do tabeli i/lub zwiększa licznik o jeden dla określonej sieci społecznościowej. Jest to proste rozwiązanie dla przycisków udostępniania. Możesz łatwo zmienić wygląd swoich przycisków za pomocą CSS, możesz zaprojektować własne przyciski w Photoshopie i użyć ich tutaj. Możesz zrobić prawie wszystko!

Oczywiście ten przykład jest trochę prymitywny, ale fajnie jest zacząć tworzyć własne fajne przyciski udostępniania. Dać mu szansę!

Popularne sieci społecznościowe umożliwiają generowanie niestandardowych fragmentów kodu, które możemy osadzać w postach lub stronach witryn internetowych, aby umożliwić użytkownikom nadawanie preferowanych treści. Facebook i Twitter to dwie z najpopularniejszych sieci społecznościowych, które obsługują odpowiednią funkcjonalność. Zobaczmy, jak zintegrować takie przyciski społecznościowe z Twoją witryną.

Jak dodać przycisk udostępniania na Facebooku

Przyciski udostępniania na Facebooku umożliwiają klientom udostępnianie linków kierujących do postów lub ofert w Twojej witrynie z fragmentem niestandardowego tekstu.

Aby dodać ten przycisk do swojej witryny, musisz najpierw przejść do tej strony.

Przyjrzyjmy się teraz, co oznaczają niektóre pola na stronie konfiguracji.

  • URL do polubienia - to pole dodaje stronę witryny, którą chcemy udostępnić na Facebooku.
  • Szerokość - tutaj ustawia się szerokość przycisku.
  • Czasownik do wyświetlenia - tutaj możemy wybrać tekst w przycisku "Lubię to" lub "Polecam".
  • Schemat kolorów — tutaj możesz wybrać wygląd przycisku dla jasnych lub ciemnych stron.
  • Czcionka — wybierz czcionkę dla etykiet przycisków.

Po wybraniu ustawień znajdź przycisk „Pobierz kod” i kliknij go. Następnie wyświetli się okno z kodem, należy je również wstawić w dwóch etapach:

Wstaw kod tuż po tagu < body >.

Kod do wyświetlenia przycisku:

Wklej ten kod w miejscu, w którym powinien się wyświetlać przycisk z facebooka:

Jak dodać przycisk udostępniania na Twitterze

Dodając przyciski udostępniania na Twitterze do swojej witryny, twórcy Twittera zalecają, aby pamiętać o kilku rzeczach:

  • Jeśli użytkownik nie jest zalogowany na swoim koncie na Twitterze, zostanie poproszony o zalogowanie się w celu poprawienia wiadomości.
  • Tweet będzie zawierał link do strony internetowej, którą odwiedziła dana osoba. Użytkownik może swobodnie dostosować treść tweeta tak, jak chce.
  • Po kliknięciu „Tweetuj” w wyskakującym okienku pojawi się lista powiązanych kont na Twitterze. Użytkownik może zdecydować, gdzie je śledzić lub je zignorować.
  • Nie ma limitu liczby razy dziennie i ten sam użytkownik może tweetować coś na osi czasu.

Aby dodać przycisk udostępniania na Twitterze, wykonaj następujące czynności:

  • Przejdź do publish.twitter.com i dotknij Przyciski Twittera.
  • Wybierz typ przycisku udostępniania na Twitterze, który chcesz dodać do swojej witryny.
  • Dostosuj tweeta i wiadomość, którą będzie zawierał, wspominając o tym, o którym @koncie chcesz wspomnieć.
  • Po zakończeniu skopiuj i wklej kod do swojej witryny.

To prawie wszystko. Mamy nadzieję, że ten przewodnik okaże się pomocny. Najlepsze w tym jest to, że nie powinieneś mieć żadnych głębokich umiejętności kodowania, aby dodawać przyciski udostępniania społecznościowego do swojej witryny. Automatyczne generatory kodu zapewniają gotowe rozwiązania, które możesz intuicyjnie dostosowywać, kopiować i wklejać do kodu HTML swojej witryny.