Witam Was drodzy czytelnicy bloga. Ze względu na liczne prośby czytelników, dzisiaj stworzymy fajny system „Udostępnij znajomym” na VKontakte, aby pobrać plik za pomocą JQuery i CSS.

Przyjaciele, chcę powiedzieć, że ten system wielokrotnie zwiększy liczbę linków do Twoich zasobów, w zależności oczywiście od tego, co oferujesz do pobrania i jaki rodzaj ruchu masz.

Również chciałbym 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, tylko trochę zmodyfikowane przeze mnie. I w końcu wszystko skończyło się dobrze :-)

Cóż, przejdźmy teraz do samego systemu.

System „Powiedz znajomym” na VKontakte, aby pobrać plik Jak to działa?

Widzisz, to nie jest takie trudne. :-)

Jak to zrobić?

Na początek narysowałem prosty szablon strony z przyciskiem. Możesz zobaczyć to na przykładzie, a także wykorzystać na swojej stronie internetowej, jest ono dostępne w kodzie źródłowym. Użytkownik zostanie przekierowany na tę stronę, aby mógł wykonać cenne operacje pobierania pliku.

Następnie stworzyłem ten szablon i oto co otrzymałem:

Jak widać, strona wcale nie jest duża ani skomplikowana.

Najważniejsze jest na początku pomiędzy tagami i dodaniem następujących skryptów:

jquery.min.js to biblioteka JQuery, jeśli już ją masz, nie musisz jej ponownie instalować

jquery.vkAction.js - ten skrypt otwiera okno VKontakte.

script.js - ale ten skrypt aktywuje przycisk „Pobierz”.

Dodajmy teraz kilka stylów CSS, aby nieco ozdobić naszą stronę.

CSS

Przyjaciele, wszystkie obrazy wskazane w stylach można znaleźć w kodzie źródłowym w folderze img.

* ( margines: 0; dopełnienie: 0; ) treść ( margines-góra: -50px; szerokość: 100%; wysokość: 100%; kolor:#555; tło: url(img/body.jpg) powtórz 100% 0; rodzina czcionek: „Ubuntu”, bezszeryfowy; rozmiar czcionki: 0,85 em; wysokość linii: 135%; ) ul ( styl listy: brak; ) a ( kolor: #538e28; dekoracja tekstu: brak; ) a:hover (kolor: #69b432) #wrapper (pozycja:względna; obramowanie:0px stałe #d6d6d6; szerokość: 1004px; wysokość: 787px; tło: url(img/bodycont.jpg) 50px 0px bez powtórzeń; margines: 0 auto; ) #copy( pozycja:absolutna; lewa:330px; dół:0px; obramowanie:0px pełna #d6d6d6; rozmiar czcionki:11px; kolor:#bbb; ) #text ( pozycja:absolutna; lewa:0px; góra: 150 pikseli; obramowanie: 0 pikseli ciągłe #d6d6d6; szerokość: 1004 pikseli; tło: url(img/text.png) bez powtórzeń: 0 automatyczne; 300 pikseli; obramowanie: 0 pikseli ciągłe #d6d6d6; wysokość: 262 pikseli; s łatwość uruchomienia: 0,01 s; przejście do webkita: wszystkie 0,2 s 0,01 s; ) #vk:hover ( krycie: 1.0; ) #str1 ( tło: url(img/str1.png) bez powtórzeń; pozycja:absolutna; lewa:140px; góra:290px; obramowanie:0px solid #d6d6d6; szerokość: 262px ; wysokość: 262px; ) #str2 (tło: url(img/str2.png) bez powtórzeń; pozycja:absolutna; prawa:100px; góra:450px; obramowanie:0px stałe #d6d6d6; szerokość: 262px; wysokość: 262px; ) .downloadButton( pozycja:absolutna; lewa:373px; góra:580px; szerokość:253px; wysokość:98px; przepełnienie:ukryty; tło:url("img/dbuthov.png") bez powtarzania; kursor:domyślny; ) . downloadButton.active( tło: url („img/dbut.png”) bez powtórzeń; szerokość: 253 pikseli; wysokość: 98 pikseli; kursor: wskaźnik; -moz-przejście: wszystkie 0,2 s 0,01 s ułatwienia; -o-przejście : całe 0,2 s 0,01 s ułatwienia; -webkit-przejście: wszystkie 0,2 s 0,01 s ułatwienia wejścia; ) .downloadButton.active:hover( opacity: 0,9; )

Mam nadzieję, że wszystko tutaj jest dla Ciebie jasne. Na początek stworzyłem blok o wymiarach 1004 na 787 pikseli, w którym następnie umieściłem wszystkie obiekty, które widzisz przy pozycjonowaniu bezwzględnym. Są to przyciski VKontakte i pobierania, a także same strzałki i napisy.

Jeśli czegoś nie rozumiesz, zapytaj w komentarzach.

Przejdźmy teraz bezpośrednio do skryptów.

JS

(function($)( var win = null; $.fn.tweetAction =function(options,callback)( // Standardowe parametry okna wyskakującego: opcje = $.extend(( url:window.location.href ) , opcje) ; return this.click(e)( if(win)( e.preventDefault(); return; ) var szerokość = 550, wysokość = 350, góra = (okno.ekran.wysokość - wysokość)/2 , lewy = (window.screen.width - szerokość)/2; var config = [ "scrollbars=yes","resizable=yes","toolbar=no","location=yes", "width="+width, "height= "+height,"left="+left, "top="+top ].join(","); // Wyskakujące okienko z API VKontakte: win = window.open("http:/ /vkontakte.ru/share .php?"+$.param(options), "TweetWindow",config); (funkcja checkWindow())( try( // trzeba umieścić ten kod w try/catch: if(! win ||. win.closed) ( rzut „Zamknięte!”; ) else ( setTimeout(checkWindow,100); ) ) catch(e)( win = null; callback(); ))(); e.preventDefault()) ; )(jQuery);

Jak widać, zmieniłem tylko ten link http://twitter.com/intent/tweet? do tego http://vkontakte.ru/share.php?. Inaczej mówiąc, zastąpiłem link z Twittera linkiem VK. To wszystko, nie było więcej zmian.

Zobaczmy teraz, jaki będzie mój następny scenariusz.

skrypt.js

$(document).ready(function())( // Korzystanie z naszej wtyczki tweetAction. Pełną listę obsługiwanych // parametrów można znaleźć na stronie http://dev.twitter.com/pages/intents#tweet-intent $( „ #tweetLink”).tweetAction(( tytuł: „Jak stworzyć system „Powiedz znajomym” na VKontakte, aby można go było pobierać za pomocą JQuery i CSS”, url: „http://site/”, opis: „Tutaj możesz pobrać fajne „Powiedz” znajomym systemu”” na VKontakte, aby pobrali, a także dowiedz się, jak to działa” ),function())( // Kiedy okno się zamknie: $(.downloadButton”) .addClass("active") . attr("href","Bezpośredni link do pliku");

Ważny

Musisz edytować ten skrypt dla swojej witryny.

W polu tytułowym: należy wpisać tytuł wpisu, który powinien wyświetlić się w kontakcie.

W polu opisu: musisz podać opis wpisu.

To wszystko, przyjaciele. Chciałbym podziękować serwisowi tutorialzine.com za pomysł i skrypty. Cóż, teraz do zobaczenia wkrótce. :-)

O tym, jak sieci społecznościowe mogą pomóc w promowaniu witryny internetowej i przyciąganiu do niej nowych użytkowników. Ale tym razem chciałbym przejść od teorii do praktyki i porozmawiać bardziej szczegółowo o tym, jak umieścić przyciski „Lubię to” na Twojej stronie z popularnych sieci społecznościowych, takich jak: VKontakte, Facebook, Twitter, Odnoklassniki, MoiMir, Google+, QIP i Yandex.

Co to są „lajki” i jaki jest z nich pożytek?



Jednak w żargonie internetowym „lajki” oznaczają coś zupełnie innego i wyglądają tak:



Jeśli ruch na Twojej stronie wynosi co najmniej 20 wejść dziennie, to warto pomyśleć o umieszczeniu takich przycisków na swojej stronie, ponieważ:

  • „polubienia” przyciągają nowych gości z sieci społecznościowych: „polubiąc” ten lub inny post na swoim blogu, użytkownik może porozmawiać o tym na swojej stronie w sieci społecznościowej;
  • będziesz w stanie zrozumieć odwiedzających Twoją witrynę: analizując artykuły lub strony witryny, których liczba „polubień” znacznie przewyższa inne strony w Twojej witrynie, zrozumiesz, co bardziej podoba się Twoim odwiedzającym;
  • będzie to promować witrynę w wyszukiwarkach: Wyszukiwarki Już dawno nauczyliśmy się wchodzić w interakcje z sieciami społecznościowymi, dlatego „polubienia” pozostawiają ślad w SEO.

Myślę, że komplementy dotyczące „lajków” wystarczą, aby zrozumieć, jak przydatne i ważne jest to dla witryny. Dlatego możesz bezpiecznie przejść do instrukcji instalacji.


Szybki skok do instrukcji


„Lubię” z VKontakte


1. Przejdź do strona umożliwiająca podłączenie widżetu do Twojej witryny.

3. Dostosuj wygląd widgetu do swoich upodobań i otrzymaj gotowy kod:

4. Kod widgetu należy wstawić do szablonów strony serwisu.

„Lubię to” z Facebooka


1. Przejdź do strony ustawień przycisku „Lubię to”.

2. Skonfiguruj widget i kliknij przycisk „Pobierz kod”:

3. W oknie, które zostanie otwarte, skopiuj otrzymany kod i wklej go do szablonów witryny.

„Tweetuj” z Twittera


1. Przejdź do .

2. Wybierz typ przycisku:

3. Dostosuj wygląd przycisku:

4. Skopiuj i wklej powstały kod do szablonów:

"Klasa!" z Odnoklassnik



Jeszcze łatwiej jest uzyskać przycisk „Klasa!”. wraz z przyciskiem „Lubię to” z mediów społecznościowych. Sieć „MyMir”. Właśnie o tym będziemy mówić dalej.

2 w 1: „Lubię to” od MoyMir + „Klasa” od Odnoklassnik


1. Przejdź do strony konfiguracji widżetów „Lubię to” i „Fajnie!”. .

2. Dostosuj widget do swoich upodobań:

3. Skopiuj i wklej powstały kod do szablonów witryn:

„+1” z Google+


1. Przejdź do Strona ustawień przycisku „+1”..

2. Dostosuj wygląd przycisku:

3. Skopiuj otrzymany kod i wklej go do szablonów:

Wszystko w jednym: dla leniwych!


Jeśli jesteś zbyt leniwy, aby skonfigurować wszystkie sieci społecznościowe osobno, możesz skorzystać z gotowych rozwiązań i skryptów, które dają możliwość umieszczenia uniwersalnego przycisku z udostępnianiem (funkcja „powiadom znajomych”) na wszystkich popularnych sieciach społecznościowych. Należy pamiętać, że nie ma tutaj silnego połączenia z witryną, a takie przyciski są tworzone bardziej dla wygody niż dla efektu SEO.



Uzyskaj kody przycisków i wklej je na swojej stronie internetowej.

Gdzie wpisać otrzymane kody?

Aby umieścić przyciski „Lubię to” na Twojej stronie, musisz najpierw zdecydować, na których stronach Twojej witryny są one najbardziej dochodowe i na których najlepiej je umieścić. Istnieją następujące możliwości umieszczenia przycisków na stronie:

  • strona główna;
  • wszystkie strony serwisu;
  • strona z postami/materiałami.

Nie ma potrzeby wymyślać koła na nowo i umieszczać przycisków w postach na forach, na stronach z informacjami kontaktowymi itp.: takie przyciski nie będą lubiane. Kiedy już zdecydujesz, gdzie umieścisz przyciski, zaloguj się do panelu sterowania swojej witryny pod adresem your-site.ucoz.ru/admin i przejdź do:

  • edytor stron → zarządzaj stronami witryny → edytuj stronę główną witryny(jeśli chcesz umieścić kody przycisków tylko na strona główna strona);
  • zarządzanie projektem → moduł (opcjonalny) → strona z materiałami i komentarzami do nich(jeśli chcesz umieścić przyciski „Lubię to” dla każdego materiału);
  • zarządzanie projektem → blok globalny „Góra witryny”(jeśli chcesz umieścić kod na wszystkich stronach serwisu).

Wklej otrzymane kody przycisków do jednego z tych szablonów i zapisz zmiany. Przyjrzyjmy się temu punktowi konkretny przykład- umieszczenie przycisku „To ciekawe!” obok wpisu na naszym oficjalnym blogu uCoz.

Czas czytania: 5 minut

Zintegrowane kampanie marketingowe e-mailowe i w mediach społecznościowych docierają do większej liczby odbiorców i zwiększają ROI (zwrot z inwestycji). Dowiedz się, jak korzystać ze zintegrowanej platformy marketingowej Mailigen, aby docierać do klientów za pośrednictwem poczty elektronicznej i mediów społecznościowych.

Po co dodawać przyciski mediów społecznościowych „Powiedz znajomym” do swojego e-maila?

Według badania dotyczącego strategii marketingowych z 2014 r. przeprowadzonego w 2014 r. przez firmę WebDAM zajmującą się zarządzaniem aktywami cyfrowymi, istnieją ku temu trzy dobre powody:

  • W 2013 roku 43% sprzedawców znalazło nabywców za pośrednictwem LinkedIn
Jak dodać przyciski mediów społecznościowych „Powiedz znajomym” do wiadomości e-mail Krok 1

Gdy jesteś na czwartym etapie tworzenia newslettera e-mailowego, przeciągnij blok udostępniania na portalach społecznościowych w miejsce, w którym chcesz zainstalować te przyciski.

Krok 2

Następnie otworzy się nowe okno, w którym możesz dokonać wszystkich niezbędnych ustawień.

  • Jeśli wybierzesz „Archiwum e-maili”, odbiorca mailingu będzie mógł udostępnić treść całego listu w sieciach społecznościowych. Tytuł newslettera będzie stanowić tekst wprowadzający.
  • Jeśli wybierzesz „Inny link”, możesz wprowadzić link do dowolnej treści, którą chcesz udostępnić. Może to być na przykład nowy artykuł na Twoim blogu.
  • Następnie wprowadź tekst, który będzie znajdował się przy przyciskach, wybierz wielkość przycisków oraz odległość pomiędzy nimi.
Facebook Podsumujmy to

Ostatnio co drugi (jeśli nie pierwszy) klient w wymaganiach dotyczących tworzenia strony internetowej prosi o upewnienie się, że łączy ją z sieciami społecznościowymi. Przyciski „społecznościowe” na stronie internetowej to narzędzie numer 1 służące do przyciągania docelowej grupy odbiorców, dystrybucji treści i ogólnie PR. I to całkowicie za darmo!

Sieci społecznościowe udostępniają kody do swoich przycisków i widżetów do umieszczenia na stronie oraz dostarczają instrukcje dotyczące ich instalacji w systemie zarządzania witryną. Dowolny CMS umożliwia ich instalację ( system operacyjny), najważniejsze jest, aby harmonijnie dopasować je do projektu swojej witryny.

Jakie są cechy i funkcje?

Jeśli Twoja witryna jest skierowana do osób komunikujących się w popularnych sieciach społecznościowych. sieci, na przykład Vkontakte, Twitter, Instagram, Facebook, Google+, Pinterest itp., a chcesz objąć je wszystkie, to aby nie instalować przycisków dla każdego z nich osobno, biorąc pod uwagę, że mogą różnić się rozmiarem i wyglądem , zalecamy korzystanie z usług agregatora. Są to proste i wygodne narzędzia, które pozwolą odwiedzającym witrynę szybko dzielić się informacjami ze znajomymi, niezależnie od tego, z jakiego portalu społecznościowego korzystają. Poniżej przyjrzymy się najpopularniejszym usługom.

Przyciski mediów społecznościowych Udostępnij Pluso

Witam wszystkich czytelników serwisu

W tym artykule opowiem Ci jak dodać przyciski „Lubię to”, „Klasa”, „Powiedz znajomym” itp. na swojej stronie internetowej.

Podpowiem Ci również, jak zainstalować komentarze na dowolnej stronie Twojej witryny.

Istnieje kilka sposobów instalacji powyższych przycisków na Twojej stronie internetowej. Przyjrzyjmy się każdemu z nich:

  • Przejdź do strony zasobu, z którego chcesz mieć przycisk. Następnie znajdź sekcję dla programistów i tam zgodnie z instrukcjami wygeneruj kod HTML, który wstawisz na stronę.
  • Skorzystaj ze wspaniałej usługi Yandex i wygeneruj specjalny panel podobny.

    • Przyjrzyjmy się każdej usłudze.

    W kontakcie z


    Uwaga, aby zainstalować przycisk musisz się zarejestrować! Link do sekcji znajduje się na samym dole sieci społecznościowej. sieci.

    Teraz masz pełną swobodę w zakresie fantazji. Możesz zainstalować dowolną usługę. Wybrałem przycisk „Lubię to”.


    Po kliknięciu wybranej sekcji wyświetli się kreator konfiguracji.


    Teraz trochę o kreatorze konfiguracji. Każdy programista ma swój własny APIId. Koniecznie sprawdź jego obecność w oknie z wygenerowanym kodem.
    Nie zapomnij także o podaniu adresu swojej witryny internetowej na górze formularza.

    Wszystko! Teraz pozostaje tylko umieścić połowę skryptu w nagłówku naszej strony, a drugą połowę w treści, tam gdzie chcesz, aby znajdował się Twój przycisk.

    Tutaj możesz sprawdzić jak to działa na mojej stronie. Góra strony.

    Odnoklassniki i Mój Świat


    I ustawiliśmy to tutaj wygląd guziki. A następnie kopiujemy kod. Kod ten nie jest podzielony na dwie części; należy go od razu wstawić w miejsce, w którym ma się znajdować przycisk.

    Wypróbuj w akcji.

    Odwiedźmy Yandex :)


    Wszystko tutaj jest jeszcze prostsze niż w metodach, które rozważaliśmy wcześniej.
    Po prostu wybieramy niezbędne usługi, wyświetlamy je i wklejamy powstały kod na stronę.

    To wszystko? Tak prosty?

    Napisz w komentarzach, jeśli coś jest niejasne.

    Możesz być zainteresowany:

    Witaj, drogi czytelniku, w tym artykule przyjrzymy się:

    • co to jest css
    • jak połączyć style ze swoją stroną
    • jak używać CSS
    • podstawowe „właściwości” css

    Codziennie (a może nie codziennie) 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 witryny wyjaśnić, jak się sprawy mają.