- Jak dodać przyciski sieci społecznościowych
- Przyciski do sieci społecznościowych i zakładek AddThis
- Jak zainstalować przyciski sieci społecznościowej AddThis
- Kod przycisków społecznościowych AddThis
W artykule i samouczku wideo dowiesz się, jak umieścić przyciski społecznościowe AddThis na stronie i spojrzeć na wyniki pracy w usłudze analitycznej AddThis.com w celu promowania witryny .
Jak dodać przyciski sieci społecznościowych
Każdy zna „słowo z ust”, gdy użytkownicy witryny dzielą się swoim ulubionym artykułem z przyjaciółmi w sieciach społecznościowych i zakładkach, jednocześnie znacząco wzmacniając reputację witryny i tym samym ją promując.
Aby promować stronę są świetne przyciski sieci społecznościowych.
W poprzednich artykułach na mojej stronie, wraz z samouczkami wideo, przyjrzeliśmy się sposobności i dowiedzieliśmy się, jak zainstalować skrypty przycisków sieci społecznościowe na stronie z ozdobnymi licznikami oprawione i oznakowane .
Powiedziano mu o instalowaniu przycisków sieci społecznościowych Yandex „Udostępnij” oraz możliwość przeglądania raportu z jego pracy w serwisie Yandex Metrika .
Przyciski do sieci społecznościowych i zakładek AddThis
Jest jeszcze jeden świetny przycisk, który zostanie omówiony w tym artykule - AddThis . To nie jest nawet przycisk, ale usługa AddThis.com , która obejmuje pracę z ponad 300 sieciami społecznościowymi i zakładkami .
Przyciski AddThis można umieścić poziomo w dowolnym miejscu na stronie: w artykułach, paskach bocznych, czapkach, piwnicach i pionowo: po lewej lub prawej stronie witryny.
Jest to szczególnie wygodne, gdy przyciski znajdują się pionowo. Są one przymocowane do jednego punktu z boku i pozostają nieruchome podczas przewijania strony, pozostając stale przed oczami użytkownika, bez zamykania tekstu, nie ingerując w czytanie, ale będąc, jak mówią „pod ręką”, umożliwiają udostępnianie dowolnych informacji w sieciach społecznościowych w dowolnym momencie i zakładki.
Piękne przyciski serwisów społecznościowych AddThis są bardzo wygodne i łatwe w instalacji i obsłudze, pomagają w promocji witryny, umożliwiają zbieranie statystyk i przeglądanie analiz Google Analytics .
Przyjrzyjmy się bliżej, gdzie można uzyskać kod AddThis, jak zainstalować go na stronie, jak wyświetlić żądane ikony sieci społecznościowych i zakładek oraz jak zobaczyć wyniki AddThis w analityce.
Jak zainstalować przyciski sieci społecznościowej AddThis
Instalowanie przycisków sieci społecznościowych AddThis na stronie obejmuje odbieranie kodu i umieszczanie go na stronie za pomocą panelu administracyjnego.
Dla wygody umieszczania kodu na stronie polecam używanie wtyczek. Nagłówek i stopka lub Układ postu lub umieść kod bezpośrednio w Pliki WordPress .
Funkcjonalność przycisków AddThis umożliwia zbieranie statystyk i transfer danych do sekcji analitycznej usługi AddThis i, w razie potrzeby, do Google Analytics. Funkcje te są umieszczone w kodzie przycisków AddThis. Utwórzmy ten kod.
Kod przycisków społecznościowych AddThis
Aby uzyskać kod społecznościowy dla przycisków AddThis, wykonaj następującą sekwencję działań:
1. Zarejestruj się w Google Analytics, aby uzyskać identyfikator witryny.
Jeśli potrzebujesz wystarczającej analizy usługi AddThis i nie chcesz, aby statystyki przycisków AddThis były przesyłane i gromadzone w Google Analytics - pomiń krok 1 i krok 5. W przeciwnym przypadku wykonaj następującą sekwencję działań, aby uzyskać identyfikator witryny.
Przejdź do google.com/analytics/
Jeśli nie jesteś tutaj zarejestrowany, kliknij „Zarejestruj się teraz” i zarejestruj się. Jeśli jesteś już zarejestrowany, kliknij: „Dostęp do Google Analytics”.
Na swoim koncie zobaczysz identyfikator swojej witryny, który później wstawimy do kodu przycisku AddThis: 
2. Zarejestruj się w AddThis, aby uzyskać kod przycisków AddThis.
Aby zarejestrować się w usłudze AddThis.com , przejdź na stronę addthis.com , kliknij „Utwórz konto” lub wprowadź konto, jeśli jesteś już zarejestrowany:
Po zarejestrowaniu przyciskom AddThis przypisywany jest unikalny identyfikator, który później zostanie domyślnie utworzony w kodzie przycisku.
3. Pobieranie kodu przycisków społecznościowych AddThis.
Aby uzyskać kod przycisków AddThis, kliknij „Pobierz kod” i przejdź na tę stronę:
Wybierz, do czego będzie używany przycisk (strona internetowa, WordPress, Blogger, Jomla itd.) I jego styl. Jeśli korzystasz z witryny - zaznacz pole wyboru „Witryna”.
Wybierając styl, zwracaj uwagę tylko na rozmiar ikon i ich położenie: pionowe lub poziome. Oferujemy standardowy zestaw ikon, ale później nauczymy się zastępować je ikonami sieci społecznościowych i zakładek, które chcesz zobaczyć na przyciskach AddThis.
Przyciski AddThis współpracują z ponad 300 sieciami społecznościowymi i zakładkami, więc bez względu na to, jakie ikony będą wyświetlane na przyciskach wizualnych, wszystkie te sieci społecznościowe i zakładki będą działać.
Po wybraniu parametrów przycisku, otrzymany kod jest kopiowany do programu „Notatnik”, w którym dokonamy zmian. Kod wygląda tak:
<! - AddThis Button BEGIN -> <div class = "addthis_toolbox addthis_default_style>" > </a> <a class="addthis_button_preferred_4"> </a> <a class="addthis_button_compact"> </a> <a class="addthis_counter addthis_bubble_style"> </a> </ div> <typ skryptu = "text / javascript"> var addthis_config = {"data_track_addressbar": true}; </ script> <script type = "text / javascript" src = "http://s7.addthis.com/js/250/addthis_widget.js # pubid = ra-ZZZZZZZZZZZZZZZZZ "> </ script> <! - AddThis Button END ->
W twoim kodzie zamiast „ZZZZZZZZZZZZZZZZZ” pojawi się identyfikator przycisków AddThis przypisanych po zarejestrowaniu się w tej usłudze.
4. Dodaj i usuń ikony w kodzie przycisków AddThis. Pobieranie kodu ikon sieci społecznościowych i zakładek.
Ten element jest wykonywany tylko wtedy, gdy chcesz zastąpić lub dodać inne ikony sieci społecznościowych i zakładek do wyglądu przycisków AddThis. Jeśli chcesz, aby przyciski wyglądały tak, jak są, przejdź do kroku 5.
Aby dodać ikony i zakładki do sieci społecznościowej, skopiuj linię:
<a class="addthis_button_preferred_4"> </a>
i zastąp w nim „preferowany_4” kodem usługi ikony, którą dodamy.
Kody usług ikon można znaleźć i skopiować na stronie addthis.com/services/list :
Tutaj pierwsza kolumna to nazwy sieci społecznościowych i zakładek, a druga kolumna to kod usługi do wstawienia do naszego głównego kodu.
Aby usunąć ikony z przycisku, usuń linię opisującą tę sieć społecznościową lub zakładkę.
Na przykład dodajmy ikony przycisków Google+ (kod usługi „google_plusone_share”), Twitter (kod usługi przycisku „twitter”), Odnoklassniki (kod usługi przycisku „odnoklassniki_ru”), Facebook (kod usługi przycisku „facebook”) i usuń wszystkie cztery standardowe ikony. Po tym nasz kod przycisku AddThis będzie wyglądał następująco:
<! - AddThis Button BEGIN -> <div class = "addthis_toolbox addthis_default_style"> <a class="addthis_button_google_plusone_share"> </a> <a class="addththi_button_twitter"> </a> <a class = "addthis_butthythath__button_twitter"> </a> <a =" addthis_butthiththis_button_twitter">> > </a> <a class="addthis_button_facebook"> </a> <a class="addthis_button_compact"> </a> <a class="addthis_counter addthis_bubble_style"> </a> </ div> <typ skryptu = "text / javascript"> var addthis_config = {"data_track_addressbar": true}; </ script> <script type = "text / javascript" src = "http://s7.addthis.com/js/250/addthis_widget.js # pubid = ra-ZZZZZZZZZZZZZZZZZ "> </ script> <! - AddThis Button END ->
W naszym kodzie zostawiliśmy ikonę ze znakiem „+”, za pomocą której pojawia się menu rozwijane do pracy z innymi sieciami społecznościowymi i zakładkami.
5. Integracja kodu przycisku AddThis z Google Analytics.
Jeśli nie wykonałeś kroku 1, aby pobrać identyfikator witryny i wysłać statystyki do Google Analytics, pomiń ten krok.
Aby zintegrować kod przycisku AddThis z Google Analytics, konieczne jest osadzenie kodu witryny w kodzie przycisku, który otrzymałeś w kroku 1.
Zastąp przyciski linii kodu AddThis:
<script type = "text / javascript"> var addthis_config = {"data_track_addressbar": true}; </ script>
na:
<script type = "text / javascript"> var addthis_config = {data_ga_property: 'UA-XXXXXXX-X', data_ga_social: true}; </ script>
Tutaj, zamiast UA-ХХХХХХХХ-necessary, konieczne jest wprowadzenie kodu strony uzyskanego w ust.
6. Zmień rozmiar przycisków AddThis.
Aby zwiększyć rozmiar ikon w kodzie przycisków AddThis, zastępujemy linię:
<div class = "addthis_toolbox addthis_default_style">
na linię:
<div class = "addthis_toolbox addthis_default_style addthis_32x32_style">
7. Zmień pozycję przycisków AddThis z poziomej na pionową.
Aby zmienić pozycję przycisków AddThis z poziomego na pionowy, konieczne jest zastąpienie linii w kodzie:
<div class = "addthis_toolbox addthis_default_style">
lub
<div class = "addthis_toolbox addthis_default_style addthis_32x32_style">
na linię:
<div class = "addthis_toolbox addthis_floating_style addthis_32x32_style" style = "left: 0px; top: 250px;">
Ten przycisk będzie umieszczony pionowo po lewej (po lewej), z 0 pikselami po lewej i 250 pikselami na górze. Te parametry można zmienić. Aby ustawić przycisk pionowo w prawo, zamiast w lewo, piszemy w prawo.
8. Kody końcowe przycisków AddThis.
Ten widok zawiera kod przycisków AddThis poprawiony przez nas z poziomym rozmieszczeniem małych ikon, zintegrowany z Google Analytics i kodem Twojej witryny.
<! - AddThis Button BEGIN -> <div class = "addthis_toolbox addthis_default_style"> <a class="addthis_button_google_plusone_share"> </a> <a class="addththi_button_twitter"> </a> <a class = "addthis_butthythath__button_twitter"> </a> <a =" addthis_butthiththis_button_twitter">> > </a> <a class="addthis_button_facebook"> </a> <a class="addthis_button_compact"> </a> <a class="addthis_counter addthis_bubble_style"> </a> </ div> <typ skryptu = "text / javascript"> var addthis_config = {właściwość_danych_danych: 'UA-XXXXXXX-X', data_ga_social: true}; </ script> <script type = "text / javascript" src = "http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra- ZZZZZZZZZZZZZZZZZZ"> </ script> <! - AddThis Przycisk KONIEC ->
Kod przycisków AddThis z poziomym układem małych ikon, nie zintegrowany z Google Analytics i kodem Twojej witryny.
<! - AddThis Button BEGIN -> <div class = "addthis_toolbox addthis_default_style"> <a class="addthis_button_google_plusone_share"> </a> <a class="addththi_button_twitter"> </a> <a class = "addthis_butthythath__button_twitter"> </a> <a =" addthis_butthiththis_button_twitter">> > </a> <a class="addthis_button_facebook"> </a> <a class="addthis_button_compact"> </a> <a class="addthis_counter addthis_bubble_style"> </a> </ div> <typ skryptu = "text / javascript"> var addthis_config = {"data_track_addressbar": true}; </ script> <script type = "text / javascript" src = "http://s7.addthis.com/js/250/addthis_widget.js # pubid = ra- ZZZZZZZZZZZZZZZZZ "> </ script> <! - AddThis Button END ->
Kod przycisku AddThis z pionowym układem dużych ikon, zintegrowany z Google Analytics i kodem Twojej witryny.
<Div class = "addthis_toolbox addthis_floating_style addthis_32x32_style" style = "left: 0px; top: 250px;"> <! - - AddThis przycisk BEGIN> <a class="addthis_button_google_plusone_share"> </a> <a class = „addthis_button_twitter "> </a> <a class="addthis_button_odnoklassniki_ru"> </a> <a class="addthis_button_facebook"> </a> <a class="addthis_button_compact"> </a> <a class =" addthis_counter addthis_bubble_style "</a> > </a> </ div> <script type = "text / javascript"> var addthis_config = {data_ga_property: 'UA-ХХХХХХХХ-Х', data_ga_social: true}; </ script> <script type = "text / javascript" src = "http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra- ZZZZZZZZZZZZZZZZZZ"> </ script> <! - AddThis Przycisk KONIEC ->
Kod przycisku AddThis z pionowym układem dużych ikon, nie zintegrowany z Google Analytics i kodem Twojej witryny.
<Div class = "addthis_toolbox addthis_floating_style addthis_32x32_style" style = "left: 0px; top: 250px;"> <! - - AddThis przycisk BEGIN> <a class="addthis_button_google_plusone_share"> </a> <a class = „addthis_button_twitter "> </a> <a class="addthis_button_odnoklassniki_ru"> </a> <a class="addthis_button_facebook"> </a> <a class="addthis_button_compact"> </a> <a class =" addthis_counter addthis_bubble_style "</a> > </a> </ div> <script type = "text / javascript"> var addthis_config = {"data_track_addressbar": true}; </ script> <script type = "text / javascript" src = "http: // s7.addthis.com/js/250/addthis_widget.js#pubid=ra- ZZZZZZZZZZZZZZZZZ "> </ script> <! - AddThis Button END ->
Nie zapomnij w tych kodach zamiast parametru: „UA-ХХХХХХХХ-Х” wprowadź identyfikator swojej witryny, a zamiast „ZZZZZZZZZZZZZZZZZ” wprowadź identyfikator przycisków AddThis. Następnie kod jest gotowy do umieszczenia na stronie.
9. Umieszczenie kodu na stronie.
Kod na stronie znajduje się w miejscu, w którym znajdują się przyciski AddThis.
Polecam używanie wtyczek do pisania kodu na stronie. Nagłówek i stopka lub Układ postu lub umieść kod bezpośrednio w Pliki WordPress .
Więcej informacji na temat umieszczania kodu na stronie za pomocą wtyczki Header and Footer znajduje się w samouczku wideo na końcu artykułu.
10. Zobacz analitykę usługi AddThis.
Możesz zobaczyć analizę działania przycisku AddThis na stronie addthis.com , klikając element menu: „Analytics”.
Twoja uwaga zostanie poświęcona analizie relacji witryny z sieciami społecznościowymi i zakładkami:
Polecam obejrzenie mojego samouczka wideo, który zawiera szczegółowe i jasne instrukcje dotyczące tworzenia kodu dla przycisków sieci społecznościowych AddThis, osadzania go na stronie i przeglądania analiz tych przycisków.
Aby poprawić jakość oglądania wideo, kliknij ikonę „1” w prawym dolnym rogu, która pojawia się po najechaniu myszą.
Jeśli chcesz, możesz zwiększyć rozmiar wideo do pełnego ekranu, klikając ikonę „2”.
Jeśli mój artykuł i lekcja wideo wydawały się przydatne, udostępnij je w sieciach społecznościowych i zakładkach. Napisz komentarze do artykułu: czy łatwo zainstalowałeś przyciski AddThis lub czy miałeś trudności?
Byłbym wdzięczny, gdybyś podzielił się z przyjaciółmi informacjami:
