Pozdrowienia, drodzy czytelnicy blogów. Na prośbę naszych czytelników dzisiaj stworzymy fajny system Share with Friends na VK, aby pobrać plik za pomocą JQuery i CSS.
Przyjaciele, chcę powiedzieć, że ten system wielokrotnie zwiększy liczbę linków do twojego zasobu, oczywiście w zależności od tego, co oferujesz do pobrania i jaki jest twój ruch.
Też chcę to powiedzieć ten system bardzo podobny do fajnego systemu „”, który z kolei zwiększa liczbę linków na Twitterze. W tym przypadku prawie wszystko jest takie samo, ale niewiele zedytowałem. I na koniec wszystko po prostu dobrze się układało :-)
Przejdźmy teraz do samego systemu.
System Vkontakte Tell Friends, aby pobrać plik
Jak to działa?
Widzisz, to nie jest takie trudne. :-)
Jak zrobić?
Na początek narysowałem prosty szablon strony za pomocą przycisku. Możesz to zobaczyć w przykładzie, a także użyć go na swojej stronie, jest on dostępny w źródle. Na ta strona rzuci użytkownika, aby mógł wykonać tam najcenniejsze operacje pobierania pliku.
Potem stworzyłem ten szablon i oto co otrzymałem:
Jak widać, wcale nie jest to duża i skomplikowana strona.
Najważniejsze na początku między tagami
i dodaj następujące skrypty:
jquery.min.js - To jest biblioteka jQuery, jeśli musisz ją ponownie zainstalować, nie musisz
jquery.vkAction.js - ten skrypt wyświetla okno VKontakte.
script.js - ale ten skrypt aktywuje przycisk „Pobierz”.
Nie dodawajmy teraz wielu stylów CSS, aby nie dekorować naszej strony zbyt często.
CSS
Przyjaciele, wszystkie zdjęcia wskazane w stylach można znaleźć w źródłach w folderze img.
* (margines: 0; dopełnienie: 0;) body (margin-top: -50px; szerokość: 100%; wysokość: 100%; kolor: # 555; tło: url (img / body.jpg) powtórz 100% 0; rodzina czcionek: „Ubuntu”, sans-serif; rozmiar czcionki: 0,85em; wysokość linii: 135%;) ul (styl listy: brak;) a (kolor: # 538e28; dekoracja tekstu: brak;) a: hover (kolor: # 69b432) #wrapper (pozycja: względna; obramowanie: 0px bryła # d6d6d6; szerokość: 1004px; wysokość: 787px; tło: url (img / bodycont.jpg) 50px 0px bez powtarzania; margines: 0 auto;) #kopia (pozycja: absolutna; lewa: 330p; dolna: 0px; ramka: 0px ciągła # d6d6d6; rozmiar czcionki: 11px; kolor: #bbb;) #tekst (pozycja: bezwzględna; lewa: 0px; góra: 150px; obramowanie: 0px bryła # d6d6d6; szerokość: 1004px; wysokość: 157px; tło: url (img / text.png) bez powtarzania; margines: 0 auto;) #vk (pozycja: bezwzględna; lewa: 370px; góra: 300px; obramowanie: stałe 0px # d6d6d6; szerokość: 262px; wysokość: 262px; krycie: 0,5; -moz-przejście: wszystkie 0,2 s 0,01 s łatwość; -o-przejście: wszystkie 0,2 s 0,01 s łatwość; - przejście do Webkit: wszystkie 0.2s 0.01s easy-in; ) #vk: hover (opacity: 1.0;) # str1 (background: url (img / str1.png) no-repeat; position: absolutne; left: 140px; top: 290px; border: 0px solid # d6d6d6; szerokość: 262px ; wysokość: 262px;) # str2 (tło: url (img / str2.png) no-repeat; pozycja: absolutna; prawa: 100px; góra: 450px; obramowanie: 0px lite # d6d6d6; szerokość: 262px; wysokość: 262px; ) .downloadButton (pozycja: bezwzględna; lewa: 373px; góra: 580px; szerokość: 253px; wysokość: 98px; przepełnienie: ukryte; tło: url ("img / dbuthov.png") no-repeat; kursor: domyślny;). downloadButton.active (background: url ("img / dbut.png") no-repeat; szerokość: 253px; wysokość: 98px; kursor: wskaźnik; -moz-przejście: wszystkie 0.2s 0.01s łatwość; -o-przejście : wszystkie 0.2s 0.01s łatwość; -webkit-przejście: wszystkie 0.2s 0.01s łatwość;) .downloadButton.active: hover (krycie: 0.9;)
Mam nadzieję, że wszystko jest dla ciebie jasne. Na początek wykonałem blok o wymiarach 1004 na 787 pikseli, w którym następnie z pozycjonowaniem bezwzględnym umieściłem wszystkie obiekty, które widzisz. Są to VKontakte i przyciski pobierania, a także same strzałki i napisy.
Jeśli coś nie jest dla ciebie jasne, zapytaj w komentarzach.
Teraz przejdźmy bezpośrednio do skryptów.
Js
(funkcja ($) (var win \u003d null; $ .fn.tweetAction \u003d function (options, callback)) (// Standardowe parametry wyskakującego okna: options \u003d $ .extend ((url: window.location.href), opcje) ; zwróć to. kliknij (funkcja (e) (if (win) (e.preventDefault (); return;) var var \u003d 550, height \u003d 350, top \u003d (window.screen.height - height) / 2, left \u003d (window.screen.width - szerokość) / 2; var config \u003d [„paski przewijania \u003d tak”, „resizable \u003d tak”, „pasek narzędzi \u003d nie”, „lokalizacja \u003d tak”, „szerokość \u003d” + szerokość, ”wysokość \u003d „+ height”, left \u003d „+ left”, „top \u003d” + top] .join („,”); // Wyskakujące okno z interfejsu API VK: win \u003d window.open („http://vkontakte.ru/share .php? "+ $. param (opcje)," TweetWindow ", config); (funkcja checkWindow () (try (// trzeba umieścić ten kod w try / catch: if (! win || win.closed) (wyrzuć „Zamknięty!”;) else (setTimeout (checkWindow, 100);)) catch (e) (win \u003d null; callback ();))) (); e.preventDefault ();)););) ) (jQuery);
Jak widać, tutaj zmieniłem tylko ten link http://twitter.com/intent/tweet? na tym http://vkontakte.ru/share.php?. Innymi słowy, link z Twittera został zastąpiony linkiem VK. Wszystko, nie było więcej zmian.
Zobaczmy teraz, co mam następujący skrypt.
script.js
$ (document) .ready (function () (// Korzystanie z naszej wtyczki tweetAction. Pełna lista obsługiwanych // parametrów znajduje się na stronie http://dev.twitter.com/pages/intents#tweet-intent $ („ #tweetLink ”). tweetAction ((tytuł:„ Jak zrobić system „Powiedz znajomym” w VK do pobrania z za pomocą jquery i CSS ”, adres URL:„ http: // site / ”, opis:„ Tutaj możesz pobrać fajny system „Tell Friends” na VKontakte do pobrania, a także dowiedzieć się, jak to działa ”), function () (// Kiedy okno zamyka się: $ („. downloadButton”) .addClass („active”) .attr („href”, „Bezpośredni link do pliku”);)); ));
Ważny
Musisz edytować ten skrypt dla swojej witryny.
W polu tytuł: musisz wprowadzić nazwę wpisu, która powinna być wyświetlana w kontakcie.
W polu opis: musisz podać opis postu.
To wszyscy przyjaciele. Chcę podziękować tutorialzine.com za pomysł i skrypty. Do zobaczenia wkrótce. :-)
Witam wszystkich czytelników strony teren
W tym artykule powiem Ci, jak powiązać przyciski „Lubię to”, „Klasa”, „Powiadom znajomych” itp. Z moją witryną.
Podpowiemy też, jak ustawić komentarze na dowolnej stronie witryny.
Istnieje kilka sposobów zainstalowania powyższych przycisków w witrynie. Spójrzmy na każdy z nich:
- Przejdź do strony zasobów, z której chcesz mieć przycisk. Następnie znajdź sekcję dla programistów i już tam, postępując zgodnie z instrukcjami, aby wygenerować kod HTML do umieszczenia na stronie.
- Skorzystaj ze wspaniałej usługi firmy Yandex i wygeneruj specjalny podobny panel.
Spójrzmy na każdą usługę.
W kontakcie z
Uwaga, aby ustawić przycisk musisz być zarejestrowany! Link do sekcji znajduje się na dole strony społecznościowej. sieć.
Teraz masz pełną swobodę wyobraźni. Możesz zainstalować sobie dowolną usługę. Wybrałem przycisk „Lubię to”.
Po kliknięciu wybranej sekcji pojawi się kreator instalacji.
Teraz trochę o kreatorze konfiguracji. Każdy programista ma swoją własną aplikację. Należy sprawdzić jego dostępność w oknie z wygenerowanym kodem.
Nie zapomnij również podać adresu swojej witryny w górnej części formularza.
Wszystko! Teraz pozostaje umieścić połowę skryptu w nagłówku naszej strony, a drugą połowę w ciele, w miejscu, w którym ma znajdować się przycisk.
Tutaj możesz sprawdzić, jak to działa na mojej stronie. Na górze strony.
Koledzy z klasy i mój świat
I właśnie tutaj założyliśmy wygląd guziki. A następnie skopiuj kod. Ten kod nie jest podzielony na dwie części, należy go natychmiast wstawić w miejsce, w którym ma znajdować się przycisk.
Spróbuj akcja.
Idziemy odwiedzić Yandex :)
Wciąż jest tutaj prostsze niż w metodach, które zbadaliśmy wcześniej.
Po prostu wybieramy niezbędne usługi, wyświetlamy je i wstawiamy wynikowy kod na stronie.
Czy to wszystko? Tak prosty?
Napisz w komentarzach, jeśli coś nie jest jasne.
|
Witaj drogi czytelniku, w tym artykule przeanalizujemy:
|
Każdego dnia (a może nie każdego) włączasz komputer, otwierasz przeglądarkę i aktywnie korzystasz z Internetu. Czy zastanawiałeś się kiedyś, jak działa ta sieć? Nie? Następnie pozwól autorowi strony wyjaśnić, jak się sprawy mają. |
Informacje o tym, jak sieci społecznościowe mogą pomóc w promocji witryny i przyciągnięciu do niej nowych użytkowników. Ale tym razem chciałbym przejść od teorii do praktyki i porozmawiać o tym, jak umieścić popularne przyciski „Lubię to” na swojej stronie portale społecznościowetakich jak: VKontakte, Facebook, Twitter, Odnoklassniki, MoiMir, Google+, QIP i Yandex.
Co to są „polubienia” i jak z nich korzystać?
Jednak w slangu internetowym „polubienia” oznaczają coś zupełnie innego i wyglądają tak:
Jeśli ruch w Twojej witrynie to co najmniej 20 odwiedzin dziennie, powinieneś już pomyśleć o umieszczeniu tych przycisków w witrynie, ponieważ:
- "Lubi" przyciągnąć nowych gości z sieci społecznościowych: „lubię” ten lub inny wpis na blogu, użytkownik może powiedzieć o tym na swojej stronie w sieci społecznościowej;
- możesz zrozumieć gości witryny: analizując artykuły lub strony witryny, których liczba „polubień” znacznie przewyższa inne strony witryny, zrozumiesz, co lubią Twoi użytkownicy;
- to promować stronę internetową w wyszukiwarkach: wyszukiwarki od dawna nauczyłem się wchodzić w interakcje z sieciami społecznościowymi, dlatego „lubi” pozostawiać swój ślad w SEO.
Myślę, że komplementy dla „polubień” są wystarczające, aby zrozumieć, jak użyteczna i ważna jest ta strona. Dlatego możesz bezpiecznie przejść do instrukcji instalacji.
Szybki skok do instrukcji
Jak z VKontakte
1. Iść do strona łącząca widget z witryną.
3. Dostosuj widget do swoich upodobań i uzyskaj gotowy kod:
4. Kod widżetu należy wstawić do szablonów strony witryny.
Facebook „Lubię to”
1. Przejdź do strony ustawień przycisku „Lubię to”.
2. Skonfiguruj widżet i kliknij przycisk „Pobierz kod”:
3. W oknie, które zostanie otwarte, skopiuj wynikowy kod i wklej go do szablonów witryny.
Twitter Tweet
1. Iść do.
2. Wybierz typ przycisku:
3. Dostosuj wygląd przycisku:
4. Skopiuj i wklej wynikowy kod do szablonów:
"Klasa!" od kolegów z klasy
I jeszcze łatwiej - zdobądź przycisk „Klasa!” wraz z przyciskiem Lubię to z portalu społecznościowego. sieć „Mój świat”. Dokładnie to zostanie omówione dalej.
2 w 1: „Like” z MoiMir + „Class” z Odnoklassniki
1. Przejdź do strony ustawień widgetu „Lubię to” i „Klasa!” .
2. Dostosuj widget do swoich upodobań:
3. Skopiuj i wklej wynikowy kod do szablonów witryny:
Google+ +1
1. Iść do strona konfiguracji przycisku +1.
2. Dostosuj wygląd przycisku:
3. Skopiuj wynikowy kod i wklej do szablonów:
Wszystko w jednym: dla leniwych ludzi!
Jeśli jesteś zbyt leniwy, aby indywidualnie skonfigurować wszystkie sieci społecznościowe, możesz użyć gotowe rozwiązania oraz skrypty, które umożliwiają opublikowanie uniwersalnego przycisku z udostępnianiem (funkcja „powiedz znajomym”) we wszystkich popularnych sieciach społecznościowych. Należy pamiętać, że nie ma silnego powiązania z witryną, a takie przyciski są zaprojektowane bardziej dla wygody niż dla efektu SEO.
Pobierz kody przycisków i wklej je na stronie.
Gdzie wstawić otrzymane kody?
Aby umieścić przyciski „lubię to” w witrynie, najpierw musisz zdecydować, które strony w witrynie są bardziej opłacalne i najlepiej się znajdują. Istnieją następujące opcje umieszczania przycisków na stronie:
- strona główna
- wszystkie strony witryny;
- strona zapisu / materiał.
Nie trzeba ponownie wymyślać koła i umieszczać przycisków w wiadomościach na forum, na stronach z danymi kontaktowymi itd.: Takich przycisków się nie spodoba. Po podjęciu decyzji o miejscu wstawienia przycisków przejdź do panelu sterowania swojej witryny pod adresem twój site.ucoz.ru / admin i przejdź do:
- edytor stron → zarządzanie stroną serwisu → edytuj stronę główną (jeśli chcesz umieścić kody przycisków tylko na strona główna teren);
- zarządzanie projektem → moduł (opcjonalnie) → strona z materiałami i komentarzami (jeśli chcesz umieścić przyciski „podobne” dla każdego materiału);
- zarządzanie projektem → blok globalny ” Górna część teren " (jeśli chcesz umieścić kod na wszystkich stronach witryny).
Wklej otrzymane kody przycisków do jednego z tych szablonów i zapisz zmiany. Spójrzmy na ten punkt z konkretnym przykładem - umieszczenie przycisku „To ciekawe!” obok wpisu na naszym oficjalnym blogu uCoz.
Ostatnio co drugi (jeśli nie pierwszy) klient w wymaganiach dotyczących rozwoju witryny prosi o połączenie go z sieciami społecznościowymi. Przyciski „Społecznościowe” na stronie - narzędzie numer 1 do przyciągania docelowych odbiorców, rozpowszechniania treści i PR w ogóle. I to całkowicie za darmo!
Sieci społecznościowe dostarczają kody dla swoich przycisków i widżetów do umieszczenia na stronie oraz załączają instrukcje dotyczące ich instalowania w systemie zarządzania witryną. Dowolny CMS ( system operacyjny), najważniejsze jest harmonijne dopasowanie ich do projektu witryny.
Jakie są funkcje i funkcje?
Jeśli Twoja witryna jest skierowana do osób, które czatują w popularnych sieciach społecznościowych. sieci, na przykład Vkontakte, Twitter, Instagramm, Facebook, Google+, Pinterest i inne, a chcesz je wszystkie pokryć, aby nie ustawiać przycisków dla każdego z nich osobno, ponieważ mogą różnić się rozmiarem i wyglądem, zalecamy użycie usługi agregujące. Są to proste i wygodne narzędzia, które umożliwią odwiedzającym witrynę szybkie udostępnianie informacji znajomym, niezależnie od używanej sieci społecznościowej. Poniżej przeanalizujemy najpopularniejsze usługi.
Przyciski mediów społecznościowych Udostępnij Pluso
5 minut na przeczytanie
Zintegrowane kampanie marketingowe e-mail i mediów społecznościowych docierają do większej liczby odbiorców i zwiększają zwrot z inwestycji (zwrot z inwestycji). Dowiedz się, jak korzystać ze zintegrowanej platformy marketingowej Mailigen do pracy z klientami za pośrednictwem poczty e-mail i sieci społecznościowych.
Po co dodawać przyciski mediów społecznościowych „Powiadom znajomych” do wiadomości e-mail?
Według badania strategii marketingowych (badania strategii marketingowych w 2014 r.) Przeprowadzonego w 2014 r. Przez WebDAM, firmę zarządzającą zasobami cyfrowymi, istnieją trzy dobre powody:
- W 2013 r. 43% sprzedawców znalazło nabywców za pośrednictwem LinkedIn
Jak dodać przyciski mediów społecznościowych „Powiadom znajomych” do wiadomości e-mail
Krok 1
Gdy jesteś na czwartym etapie tworzenia biuletynu e-mail, przeciągnij blok udostępniania w sieciach społecznościowych do miejsca, w którym chcesz zainstalować te przyciski.
Krok 2
Następnie otworzy się nowe okno, w którym możesz wprowadzić wszystkie niezbędne ustawienia.
- Jeśli wybierzesz „Archiwum biuletynu”, odbiorca biuletynu będzie mógł udostępniać zawartość całego listu w sieciach społecznościowych. Nagłówek pocztowy zostanie użyty jako tekst wprowadzający.
- Jeśli wybierzesz „Inne łącze”, możesz wprowadzić link do dowolnego materiału, który chcesz udostępnić. Może to być na przykład nowy artykuł na Twoim blogu.
- Następnie wpisz tekst, który będzie znajdował się obok przycisków, wybierz rozmiar przycisków i odległość między nimi.
