Według badania przeprowadzonego przez C5Insight, firmę zajmującą się wdrażaniem CRM, średnio 38% integracji CRM w firmach nie przynosi przewidywanych rezultatów. Powodem nie jest zły produkt IT, ale fakt, że firmy nie wiedzą, jak prawidłowo wdrożyć CRM, popełniają błędy i ostatecznie tracą swoje inwestycje.
Ale jeśli przejście na CRM się powiedzie, inwestycja zwróci się ponad 5 razy. Według badania firmy analitycznej Nucleus Research każdy dolar zainwestowany w CRM przynosi 5,6 dolara zysku.
Zwrot z inwestycji w produkt CRM dla biznesu według firmy analitycznej Nucleus Research w 2011 r.Aby zrozumieć, jak powinno przebiegać wdrożenie produktu informatycznego, rozważymy główne etapy integracji, a także typowe błędy, które często popełniają przedsiębiorcy.
Etapy realizacji
Wdrażanie CRM odbywa się na różne sposoby, ale zawsze jest pięć głównych etapów tego procesu. Na każdym z nich integrator pełni rolę kuratora – przedstawiciela firmy CRM, ale nie martw się: nie musisz pisać” test”. Wystarczy postępować zgodnie z instrukcjami integratora: dokładnie opisać procesy biznesowe i problemy, które chcesz
1. Opis procesów biznesowych
Ponieważ system CRM pozwala usprawnić i zautomatyzować istniejące procesy, najpierw musisz je opisać. Dane te będą stanowić podstawę ustawień programu:
- Jaka jest struktura firmy? Jak dzieli się ludzi między działy? Jak rozdzielane są zadania wśród pracowników?
- Kim są klienci firmy? , w jaki sposób ?
- Jaki jest algorytm interakcji z klientami?
- Jak obsługiwana jest lojalność klientów? Jak ogólnie działa marketing?
- Jakie są używane w firmie?
2. Sporządzanie SIWZ
Kiedy procesy biznesowe są opisywane, musisz je przeanalizować słabe punkty. Przecież to właśnie dla ich eliminacji realizowany jest program.
Na przykład, Twoi menedżerowie powoli odpowiadają na nowe prośby ze strony internetowej firmy - oddzwaniają do klientów dopiero następnego dnia, a nawet o nich zapominają. W efekcie firma traci potencjalnych klientów. Musi to być określone w specyfikacji istotnych warunków zamówienia, aby integrator zaproponował rozwiązanie problemu. Ale stanie się to w następnym kroku.
3. Tworzenie mapy ustawień
Opisano procesy biznesowe, zidentyfikowano problemy, a teraz musimy wymyślić, jak je „pokonać” za pomocą systemu: jakie procesy można zoptymalizować, przyspieszyć, zautomatyzować. Na przykład możesz zautomatyzować fakturowanie i tak dalej.
Na tym etapie wiodącą rolę przypisuje się specjaliście CRM. Doskonale zna możliwości produktu informatycznego i potrafi zaproponować takie niuanse, o których istnieniu konsument nawet nie wiedział. Ponadto integrator może doradzić lub usprawnić interakcję z klientami – czyli pełni również rolę konsultanta.
Jeśli będziemy kontynuować przykład z poprzedniego etapu, to integrator może zaproponować taki sposób postępowania z utraconymi klientami: skonfigurować integrację CRM ze stroną tak, aby każde zgłoszenie było automatycznie rejestrowane w programie i wyznaczany był za to odpowiedzialny manager. System automatycznie wyznaczy mu zadanie zadzwonienia do klienta w ciągu 15 minut, a jeśli zadanie będzie spóźnione, kierownik działu handlowego natychmiast o tym dowie się poprzez powiadomienie programowe.
4. Konfiguracja CRM, import, integracja
Ten etap jest techniczną implementacją poprzedniego. Praca w całości spada na specjalistę wdrożeniowego. Importuje dane, ustawia lejek sprzedażowy i checklisty, tworzy niestandardowe pola, przepisuje skrypty do automatyzacji procesów biznesowych - jednym słowem dopasowuje interfejs systemu do Twojego biznesu. Ponadto na tym etapie integracja CRM z usługi stron trzecich, z których korzystasz w swojej pracy: poczta, strona firmowa, usługa mailingu sms i inne.
5. Szkolenie personelu
Nie ma sensu zastanawiać się, jak wdrożyć CRM w firmie, jeśli pracownicy nie potrafią z nim kompetentnie pracować. CRM to tylko narzędzie, które samo w sobie nie przynosi zysku, dlatego ważne jest, aby wyjaśnić pracownikom, czym jest ten niezrozumiały program i dlaczego tak ważne jest skrupulatne rejestrowanie w nim danych o klientach i transakcjach na każdym etapie pracy.
Na przykład zadzwonił do klienta - zapisał wynik negocjacji na swojej karcie; nie udało się połączyć - ustaw przypomnienie, aby oddzwonić za 2 godziny; sfinalizował transakcję - odnotowuje w CRM, że sprzedaż została zakończona, a następnie klient automatycznie otrzyma SMS z prośbą o wystawienie opinii.
Jeśli tego nie zrobisz, raporty sprzedaży będą niepoprawne, nie będą działać, a baza danych zamieni się w zwykły zbiór nazwisk i numerów telefonów.
W rzeczywistości wielu osobom trudno jest formułować problemy, identyfikować słabości w sprawach związanych z pracą i rozumieć, które procesy biznesowe należy zautomatyzować. Aby to zrobić, lepiej natychmiast skontaktować się z programistą i poprosić o pomoc.
Dlaczego to nie zadziałało? Analizujemy błędy wdrożeniowe
Nawet jeśli wybrałeś odpowiedni system i rozumiesz, jak poprawnie wdrożyć CRM, nadal nie jesteś odporny. Na szczęście możesz wykorzystać doświadczenie innych firm, aby zwiększyć swoje szanse na sukces.
1. Pośpiech na początkowych etapach realizacji
Najczęściej błędy popełniane są na wczesnych etapach wdrażania systemu. Braki w opisie procesów biznesowych i „wąskich gardeł” w lejku sprzedażowym mogą prowadzić do tego, że system CRM nie integruje się z realną działalnością firmy, a tym bardziej nie pomaga w rozwiązywaniu problemów.
Przestań się spieszyć i uważnie postępuj zgodnie z zaleceniami specjalisty CRM. W przypadku małej firmy liczącej 10-20 osób integracja zajmie 2-3 tygodnie. Jeśli mówimy o dużej korporacji, to sprawny proces może potrwać nawet sześć miesięcy. Zanim wdrożysz system CRM, skup się na tych terminach.
2. Niewystarczające opcje integracji
Ważne, aby system CRM był dobrze zintegrowany z innymi oprogramowanie z których korzysta firma. W przeciwnym razie nigdy nie osiągniesz, że program zawiera wszystkie istotne informacje sprzedażowe i działa bezawaryjnie.
Według C5Insight tym więcej różne programy stosowane w firmie, tym gorsze efekty wdrożeniowe. Faktem jest, że informacje w różnych usługach nie są synchronizowane i musisz ręcznie powielić te same informacje w kilku programach, na przykład w CRM i 1C Accounting. W efekcie marnuje się dużo czasu, w danych pojawiają się błędy, a raporty przestają „mówić” prawdę.
Już na etapie wyboru systemu sporządź listę oprogramowania i usług, z którymi integracja jest potrzebna i przekaż ją specjaliście ds. wdrożeń. Jednocześnie musisz delegować procesy innym produkty oprogramowania w CRM. Na przykład porzuć Outlooka i użyj
Według C5Insight, 35% użytkowników CRM wymienia integrację oprogramowania jako kluczową trudność przy przechodzeniu na rozwiązanie CRM. A jeśli wybrany system w zasadzie nie obsługuje niezbędnych integracji, to ta trudność stanie się fatalna.
3. Słabe wyszkolenie pracowników
System CRM to technologia, może pomóc zespołowi, ale nie przejmuje jego pracy. Pracownicy muszą zrozumieć, w przeciwnym razie „wyczerpanie” będzie minimalne. Umów się na prezentację wprowadzającą, nagraj lekcje wideo z szczegółowe instrukcje, przeprowadzić mini-egzamin, osobiście przeszkolić kierowników działów, aby przekazywali wiedzę podwładnym poprzez hierarchię. Pozwól pracownikom zrozumieć, co od nich zależy, jak zwrócą się Twoje inwestycje.
Zamiast konkluzji
Istnieje dobrze znana zasada: 40% efektu integracji osiąga się poprzez kompetentne planowanie, 20% poprzez zastosowanie odpowiednich technologii, a 40% poprzez . Dlatego, aby uniknąć błędów przy wdrażaniu produktu IT, działaj „z wyczuciem, rozsądnie, z aranżacją”, a na efekt nie trzeba będzie długo czekać.
Chcieć wiedzieć więcej? Gotowy do wdrożenia systemu CRM? w wygodny program w tej chwili nasi specjaliści oddzwonią i doradzą we wszystkich pytaniach.
Teraz modne stało się zastąpienie znanego systemu komentarzy WordPress jednym z najpopularniejszych komentarzy. portale społecznościowe Facebook. Wcześniej publikowaliśmy, ale od tego czasu minęło sporo czasu, a teraz ta procedura została zauważalnie uproszczona dzięki gotowemu Wtyczka WordPress. Więc tym razem będzie znacznie łatwiej.
Nieco później powiemy Ci, jak zaimplementować komentarze Facebooka na Twojej stronie, ale najpierw postaramy się określić wady i zalety takiego zamiennika.
Komentarze z Facebooka: plusy i minusy
Ponadto czynnik tzw anonimowość. Jest mało prawdopodobne, że komentarze spamowe zostaną dodane z Facebooka, ponieważ wszystkie są powiązane z prawdziwymi kontami użytkowników.
Jednak taki system ma też wady. Wielu użytkowników woli anonimowość, a nie wcale, ponieważ chcą napisać coś złego lub zostawić spam. Nie. Jest to wyłącznie kwestia psychologicznego momentu oraz poczucia dyskomfortu i zakłopotania, którego doświadczają, gdy wypowiadają się publicznie. Ten czynnik może zmniejszyć aktywność użytkownika.
W przeciwieństwie do innych systemów komentarzy, takich jak Disqus, komentarze na Facebooku nie są synchronizowane z natywnymi komentarzami WordPress. Całkowicie je zastępują. Jeśli stare posty mają już komentarze WordPress, pojawią się przed lub po dodaniu nowych komentarzy za pośrednictwem formularza na Facebooku.
Oto być może wszystkie zalety i wady komentarzy na Facebooku.
Jeśli jeszcze nie zmieniłeś zdania na temat instalowania ich w witrynie WordPress, przeczytaj poniżej, jak to zrobić.
Wtyczka Facebook Comments dla WordPress
Najpierw zainstaluj i aktywuj wtyczkę Komentarze na Facebooku i skonfiguruj go w menu, które pojawi się w Ustawienia → Komentarze na Facebooku.
Aby zacząć korzystać z komentarzy w serwisie, musisz najpierw stworzyć aplikację na Facebooka.
Jeśli wcześniej stworzyłeś aplikację, możesz teraz użyć jej danych identyfikacyjnych. W przeciwnym razie będziesz musiał utworzyć nowy na stronie Aplikacje na Facebooka:
Panel sterowania nowo utworzonej aplikacji wyświetli jej identyfikator, który należy skopiować i wkleić do ustawień wtyczki. Ale wcześniej skonfiguruj aplikację w swojej witrynie w „Ustawieniach” za pomocą przycisku „Dodaj platformę”.
Pojawi się nowe okno, w którym należy kliknąć Stronie internetowej i wybierz ją jako swoją platformę.
Więc na stronie ustawień aplikacji pojawi się nowa sekcja„Witryna”, w której możesz podać adres swojej witryny.
Zapisz zmiany, skopiuj identyfikator aplikacji i umieść go w ustawieniach wtyczki swojej witryny.
Jeśli nie rozumiesz ustawienia Aplikacje na Facebooka to jest jeszcze jeden krótka instrukcja na język angielski z przykładem dla naszej strony:
Ta wtyczka do komentarzy na Facebooku ma wiele opcji do dostosowania. Ustawienia standardowe powinien działać z większością witryn. Możesz je jednak zmienić według własnego uznania i zapisać zmiany.
Teraz możesz sprawdzić, czy działa poprawnie nowy system komentarze w Twojej witrynie.
Moderacja komentarzy
Ponieważ masz uprawnienia administratora, będziesz powiadamiany o nowych komentarzach. Możesz nimi zarządzać i decydować, czy je opublikować, czy nie.
Możesz również dodać nowego moderatora w ustawieniach:
Mamy nadzieję, że ten samouczek wyjaśnił wszystko i pomógł Ci samodzielnie skonfigurować komentarze na Facebooku dla Twojej witryny innej niż WordPres.
Tym razem tworzymy prosty system komentowania AJAX. Ten pokaże, jak osiągnąć wydajną interoperacyjność między jQuery i PHP/MySQL przy użyciu JSON. System działa w ten sposób, że dodane komentarze są umieszczane na stronie bez jej całkowitego przeładowania, co daje poczucie, że strona działa tylko na komputerze użytkownika, dzięki czemu nie trzeba czekać przez jakiś czas potrzebny na przeładowanie strony z dodanymi komentarz.
Oto przybliżone demo tego, co planujemy wdrożyć:
Krok 1 — XHTML
Najpierw spójrzmy na znaczniki komentarzy. Ten kod jest generowany przez PHP w komentarzu, któremu zaraz przyjrzymy się.
Demo.php
Klasa awatara Div zawiera hiperłącze odpowiadające awatarowi (jeśli użytkownik określił prawidłowy link do awatara podczas przesyłania komentarza), powiedzmy z gravatar.com. Cóż, wrócimy do tego, gdy będziemy pracować z PHP. Na koniec mamy nazwę i czas również w DIV, a także komentarz, czyli sam tekst w akapicie.
Kolejnym ważnym elementem w części XHTML jest sam formularz przesyłania komentarzy (wymagane są wszystkie pola poza polem adresu URL).
Demo.php
Dodaj komentarz
Krok 2 - PHP
PHP obsługuje łącza do baz danych Dane MySQL i tworzy komentarz ze znacznikami. Ponadto odbiór kończy się na AJAX i wstawia komentarz do tabeli komentarzy. Możesz zobaczyć kod, który wyświetla komentarze do strony poniżej.
Demo.php /* / Zaznacz wszystkie komentarze i wypełnij tablicę $comments */ $comments = array(); $result = mysql_query("WYBIERZ * Z komentarzy ORDER BY id ASC"); while($row = mysql_fetch_assoc($result)) ( $comments = new Comment($row); )
Zapytanie MySQL wybiera wszystkie rekordy z bazy danych i wypełnia tablicę $comments obiektem klasy komentarza, który widzisz poniżej. Ta tablica jest wyprowadzana po wykonaniu skryptu.
Demo.php /* / Drukuj komentarze jeden po drugim */ foreach($comments as $c)( echo $c->markup(); )
Każdy komentarz ma metodę znaczników(), która generuje kod HTML do wydrukowania strony. Możesz zobaczyć tę metodę i klasę poniżej.
Klasa pobiera wiersz z bazy danych (pobierany za pomocą mysql_fetch_assoc()) i przechowuje go w zmiennej $data. Jest dostępny tylko dla metod tej klasy i nie można uzyskać do niego dostępu z zewnątrz.
Comment.class.php - klasa kroku 1 Comment ( private $data = array(); public function __construct($row) ( /* / Constructor */ $this->data = $row; ) public function markup() ( / */ Ta metoda generuje znaczniki komentarza XHTML */ // Utwórz alias, dzięki czemu // nie musimy za każdym razem zapisywać $this->data danych: $d = &$this->data; $link_open = ""; $link_close = ""; if($d["url"])( // Jeśli osoba podała adres URL podczas // dodawanie komentarza// Zdefiniuj hiperłącze $link_open = ""; $link_close = ""; ) // Konwersja czasu $d["dt"] = strtotime($d["dt"]); // Wymagane dla domyślnych obrazów Gravatara: $url = "http://".dirname($_SERVER["SERVER_NAME"]. $_SERVER["REQUEST_URI"])."/img/default_avatar.gif"; powrót"
„.$link_zamknij”.".$d["ciało"]."
Ten skrypt używa Gravatara do pokazywania awatarów w komentarzach. Dla tych, którzy nie używali Gravatara, jest to bardzo przydatna usługa, która pozwala powiązać awatar z adresem e-mail. Awatar można łatwo pobrać, przekazując hash przez md5().
Zwróć uwagę na wiersz 39 powyżej - skrypt próbuje ustalić adres URL, na którym się znajduje i określa dokładny adres obrazu default_avatar.gif. Ten GIF jest przekazywany do Gravatara za pomocą skrótu md5, więc jeśli awatar został znaleziony pod tym adresem e-mail, zamiast tego wyświetlany jest zastępczy obraz zapasowy.
Comment.class.php - Publiczna funkcja statyczna kroku 2 validate(&$arr) ( /* / Ta metoda służy do walidacji danych / przesyłanych przez AJAX. / / Zwraca true/false w zależności / od prawidłowych danych i jest wypełniana / Tablica $arr jest przekazywana jako parametr / (zwróć uwagę na ampersand powyżej) / Albo prawidłowe dane wejściowe, albo komunikaty o błędach. */ $błędy = tablica(); $dane = tablica(); // Użycie funkcji filter_input wprowadzonej w PHP 5.2.0 if(!($data["email"] = filter_input(INPUT_POST,"email",FILTER_VALIDATE_EMAIL))) ( $errors["email"] = "Wprowadź poprawny Email."; ) if(!($data["url"] = filter_input(INPUT_POST,"url",FILTER_VALIDATE_URL))) ( // Jeśli pole adresu URL nie pasuje do niewłaściwego adresu URL $url = ""; ) // Użyj filtrów z niestandardową // funkcją wywołania zwrotnego: if(!($data["body"] = filter_input(INPUT_POST,"body",FILTER_CALLBACK, array("options"=>"Comment::validate_text")))) ( $ error["body"] = "Błąd komentarza."; ) if(!($data["name"] = filter_input(INPUT_POST,"name",FILTER_CALLBACK, array("options"=>"Comment::validate_text ") ))) ( $errors["name"] = "Nazwa błędu."; ) if(!empty($errors))( //Jeśli występują błędy, zapisz $errors do tablicy $arr: $arr = $errors; return false; ) foreach($data as $k=>$v)( $arr[$k] = mysql_real_escape_string($v); ) // Upewnij się, że litery są małe // (dla poprawnego w Gravatar): $arr["email"] = strtolower(trim($arr["email"])); zwróć prawdę; )
validate() jest zdefiniowany jako statyczny w sposób opisany powyżej. Oznacza to, że można go wywołać bezpośrednio jako Comment::validate() bez konieczności tworzenia obiektu tej klasy. Ta metoda nie jest walidacją danych wejściowych, które są przesyłane za pośrednictwem AJAX.
Ta metoda używa nowych funkcji filtrujących, które są dostępne w PHP 5.2.0. Dzięki temu możemy łatwo sprawdzać i filtrować wszelkie dane wejściowe przekazywane do skryptu. Na przykład filter_input(INPUT_POST, "URL", FILTER_VALIDATE_URL) oznacza, że sprawdzamy, czy $_POST["url"] jest prawidłowym adresem URL. Jeśli tak, to funkcja zwraca wartość zmiennej, w przeciwnym razie zwracane są fałszywe.
Jest to bardzo przydatne, ponieważ do tej pory musieliśmy używać własnych wyrażeń regularnych do walidacji danych. Kolejną korzyścią jest to, że dane te są pobierane przed jakimikolwiek przekształceniami specyficznymi dla konfiguracji (takimi jak magiczne cytaty).
Mamy również możliwość określenia funkcji niestandardowej, która zastosuje bardziej zaawansowane modyfikacje danych, jak widać w wierszach 31 i 37.
Comment.class.php - Prywatna funkcja statyczna kroku 3 validate_text($str) ( /* / Ta metoda jest używana wewnętrznie jako FILTER_CALLBACK */ if(mb_strlen($str,"utf8") , ", etc...) i konwertuj // Symbole Nowa linia w
tagi: $str = nl2br(htmlspecialchars($str)); // Usuń pozostałe wiersze $str = str_replace(array(chr(10),chr(13)),"",$str); return $str; )
Ostatnią metodą jest validate_text , którą przekazujemy jako funkcję zwrotną. Chroni wszystko Symbole specjalne HTML, skutecznie pozbawiając ich ataków XSS. Zastępuje również ciągi znaków przez
linie.
Submit.php /* / Ta tablica zostanie wypełniona albo / Danymi, które zostały wysłane do skryptu, albo / Komunikatami o błędach: /*/ $arr = array(); $validate = Komentarz::validate($arr); if($validates) ( /* Wszystko w porządku, wstaw do bazy danych: */ mysql_query(" INSERT INTO comments(name,url,email,body) VALUES ("".$arr["name"]."", " ".$arr["url"]."", "".$arr["e-mail"]."", "".$arr["ciało"]."")"); $arr["dt " ] = date("r",time()); $arr["id"] = mysql_insert_id(); /* / Dane w $arr są wstawiane przez zapytanie, / ale tekst bez ucieczki, / więc używamy ukośników / dla wszystkie elementy tablicy: /*/ $arr = array_map("stripslashes",$arr); $insertedComment = new Comment($arr); /* Znacznik wyjściowy */ echo json_encode(array("status"=>1, "html " =>$insertedComment->markup())); ) else ( /* Wydrukuj komunikaty o błędach */ echo "("status":0,"errors":".json_encode($arr).")"; )
submit.php odbiera dane komentarza jako żądanie AJAX. Sprawdza to i zwraca obiekt JSON albo znacznika XHTML, który został pomyślnie wyrenderowany, albo listę komunikatów o błędach. jQuery używa właściwości status, aby określić, czy wyświetlać komunikaty o błędach, czy dodawać komentarz ze znacznikami strony.
Poniżej możesz zobaczyć dwa przykłady.
Krok 1 — XHTML
Najpierw spójrzmy na znaczniki komentarzy. Ten kod jest generowany przez PHP z klasą Komentarz .
demo.php
Tekst komentarza
div awatara zawiera link (jeśli użytkownik wpisał poprawny adres URL podczas publikowania komentarza) oraz obraz awatara, który otrzymujemy z gravatar.com . Wrócimy do generowania znaczników w kroku PHP. Na koniec obserwuj div imię div czas i tekst komentarza.
Innym ważnym elementem XHTML jest formularz komentarza. Wysyła z POCZTA. Wszystkie pola z wyjątkiem adresu URL muszą być wypełnione.
demo.php
Dodaj komentarz
Formularz jest przesyłany za pomocą AJAX. Kontrola jest przeprowadzana w tło w prześlij.php. Każde pole ma odpowiedni element etykieta, z zestawem atrybutów dla .
Krok 2 - PHP
PHP obsługuje komunikację z bazą danych MySQL i generuje znaczniki dla komentarza. Pobiera również koniec żądania AJAX i wstawia dane komentarza do tabeli uwagi.
demo.php
/* / Zaznacz wszystkie komentarze i zapełnij tablicę $comments obiektami */ $comments = array(); $result = mysql_query("WYBIERZ * Z komentarzy ORDER BY id ASC"); while($row = mysql_fetch_assoc($result)) ( $comments = new Comment($row); )Zapytanie MySQL wybiera wszystkie rekordy z tabeli i wypełnia tablicę $komentarze obiekty klasy komentarz. Dana tablica dane wyjściowe dalej, gdy skrypt jest wykonywany.
demo.php
/* / Wydrukuj komentarze jeden po drugim: */ foreach($comments as $c)( echo $c->markup(); )Każdy komentarz ma swoją metodę narzut(), który generuje poprawny kod HTML, gotowy do wyświetlenia na stronie. Poniżej znajdują się definicje klas i metod.
Klasa otrzymuje wiersz z bazy danych (uzyskany za pomocą mysql_fetch_assoc()) i przechowuj go w zmiennej $dane. Jest dostępny tylko dla metody klasy.
comment.class.php - Część 1
class Comment ( private $data = array(); public function __construct($row) ( /* / Constructor */ $this->data = $row; ) public function markup() ( /* / Ta metoda generuje znaczniki XHTML dla */ // Ustaw alias, aby uniknąć pisania $this->data za każdym razem: $d = &$this->data; $link_open = ""; $link_close = ""; if($d["url"] ) ( // Jeśli adres URL został wprowadzony podczas dodawania komentarza, // określ otwierające i zamykające znaczniki linków $link_open = ""; $link_close = ""; ) // Konwertuj czas na format UNIX: $d["dt" ] = strtotime ($d["dt"]); // Potrzebne do ustawienia domyślnego obrazu: $url = "http://".dirname($_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"]) ."/ img/default_avatar.gif"; return "
„.$link_zamknij”.".$d["ciało"]."
Skrypt używa gravatara do reprezentowania awatara w komentarzach. Gravatar to bardzo przydatna usługa, która dopasowuje awatar do adresu e-mail. Obraz awatara można łatwo uzyskać, przekazując zakodowaną funkcję md5() Twój adres e-mail na gravatar.com.
Skrypt określa adres URL, na którym jest wykonywany i określa dokładny adres obrazu domyślny_awatar.gif. Obraz ten jest przekazywany równolegle z hashem md5, a jeśli dla podanego adresu e-mail nie zostanie znaleziony awatar, zostanie wyświetlony alternatywny obraz.
comment.class.php - Część 2
public static function validate(&$arr) ( /* / Ta metoda służy do sprawdzania poprawności danych przesyłanych przez AJAX. / / Zwraca true/false w zależności od ważności danych i wypełnia / przekazaną tablicę $arr jako parametr z danymi lub */ $errors = array(); $data = array(); // Użyj funkcji filter_input wprowadzonej w PHP 5.2.0 if(!($data["email"] = filter_input(INPUT_POST ,"email ",FILTER_VALIDATE_EMAIL))) ( $errors["email"] = "Wprowadź poprawny adres e-mail."; ) if(!($data["url"] = filter_input(INPUT_POST,"url",FILTER_VALIDATE_URL) )) ( // Jeśli w polu URL wprowadzono nieprawidłowy adres URL, // zachowuj się tak, jakby nie podano adresu URL: $url = ""; ) // Użyj filtra z funkcją zwrotną: if(!($data[ "body"] = filter_input(INPUT_POST,"body",FILTER_CALLBACK,array("options"=>"Comment::validate_text")))) ( $errors["body"] = "Proszę wprowadzić tekst komentarza."; ) if(!( $data["nazwa"] = filter_input(INPUT_POST,"nam e",FILTER_CALLBACK,array("opcje"=>"Comment::validate_text")))) ( $errors["name"] = "Proszę podać nazwę."; ) if(!empty($errors))( // Jeśli są błędy, skopiuj tablicę $errors do $arr: $arr = $errors; return false; ) // Jeśli dane wejściowe są poprawne, wyczyść dane i skopiuj to do $arr : foreach($data as $k=>$v)( $arr[$k] = mysql_real_escape_string($v); ) // email musi być małymi literami: $arr["email"] = strtolower( trim($ arr["e-mail"])); zwróć prawdę; )metoda uprawomocnić()(również część klasy) jest zdefiniowany jako statyczny. Oznacza to, że można go wywołać bezpośrednio za pomocą konstrukcji komentarz::zatwierdź(), bez tworzenia obiektu klasy. Ta metoda sprawdza poprawność danych przekazywanych przez AJAX.
Metoda wykorzystuje Nowa cecha filtr, który stał się dostępny w PHP 5.2.0. W ten sposób możemy łatwo sprawdzić i przefiltrować dane, które są przekazywane do skryptu. Na przykład, filter_input(INPUT_POST,'url',FILTER_VALIDATE_URL) oznacza, że sprawdzamy czy $_POST["adres URL"] poprawny adres URL. Jeśli tak, to funkcja zwraca wartość zmiennej, w przeciwnym razie zwraca wartość fałszywe.
Przed użyciem takiej funkcji konieczne było użycie wyrażeń regularnych do walidacji danych (za pomocą serii konstrukcji Jeśli). Dodatkową korzyścią jest to, że otrzymujemy dane przed wykonaniem jakichkolwiek konkretnych przekształceń.
Możliwe jest również zdefiniowanie funkcji, która wykona dodatkowe modyfikacje danych.
comment.class.php - Część 3
prywatna funkcja statyczna validate_text($str) ( /* / Ta metoda jest używana jako FILTER_CALLBACK */ if(mb_strlen($str,"utf8")<1) return false; // Кодируем все специальные символы html (<, >, ", & .. itd.) i przekonwertuj // znak nowej linii na znacznik: $str = nl2br(htmlspecialchars($str)); // Usuń wszelkie pozostałe znaki nowej linii $str = str_replace(array(chr(10),chr(13)),"",$str); return $str; )
Ostatnia metoda walidacja_tekstu przekazany jako funkcja powrotu w dwóch wywołaniach filtr_wejście. Konwertuje wszystkie specjalne znaki HTML, co skutecznie blokuje ataki XSS. Zastępuje również znaki nowej linii tagami
.
prześlij.php
/* / Ta tablica zostanie wypełniona danymi / przekazanymi do skryptu / lub komunikatami o błędach. /*/ $arr = tablica(); $validate = Komentarz::validate($arr); if($validates) ( /* Dobrze, wstawiaj dane do bazy danych: */ mysql_query(" INSERT INTO comments(name,url,email,body) VALUES ("".$arr["name"]."", "".$arr["url"]."", "".$arr["email"]."", "".$arr["body"]."")"); $arr["dt "] = date("r",time()); $arr["id"] = mysql_insert_id();/* / Dane w $arr są przygotowane do zapytania mysql, / ale musimy je wyświetlić, więc / przygotowujemy wszystkie elementy w tablicy: /*/ $arr = array_map("stripslashes",$arr); $insertedComment = new Comment($arr); /* Wydrukuj znacznik wstawionego komentarza: */ echo json_encode (array("status "=>1,"html"=>$insertedComment->markup())); ) else ( /* Wyświetlaj komunikaty o błędach */ echo "("status":0,"errors":". json_encode($arr ).")"; )prześlij.php pobiera komentarz z danych za pośrednictwem żądania AJAX. Weryfikuje go i generuje obiekt JSON zawierający znacznik XHTML z osadzonym komentarzem lub listę błędów. jQuery użyj właściwości status aby określić, co ma być wyświetlane — komunikat o błędzie lub dodanie znacznika komentarza na stronie.
Poniżej dwa przykłady.
Udana odpowiedź
( "status": 1, "html": "Kod HTML komentarza jest tutaj..." )Nieruchomość html zawiera kod komentarza.
Odpowiedź na błąd
( "status": 0, "errors": ( "email": "Wprowadź poprawny adres e-mail.", "body": "Wprowadź treść komentarza.", "name": "Podaj nazwę." ) )W przypadku wystąpienia błędu jQuery przechodzi przez obiekt błędów i wyświetla komunikaty obok pól, które zawierają błędy.
Krok 3 - CSS
Teraz, gdy znacznik został poprawnie wygenerowany i wyświetlony na stronie, możemy przejść do stylizacji.
style.css - Część 1
.comment, #addCommentContainer( /* Styl komentarzy */ padding:12px; width:400px; position:relative; background-color:#fcfcfc; border:1px solid white; color:#888; margin-bottom:25px; / * CSS3 zaokrąglone rogi i cienie */ -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; -moz-box-shadow:2px 2px 0 #c2c2c2; -webkit-box- shadow:2px 2px 0 #c2c2c2;box-shadow:2px 2px 0 #c2c2c2; .comment .avatar( /* / Avatar jest pozycjonowany bezwzględnie. / Zewnętrzny offset dla komentarza div /*/ height:50px; left:- 70px; position :absolute; width:50px; background:url("img/default_avatar.gif") no-repeat #fcfcfc; /* Wyśrodkuj w pionie: */ margin-top:-25px; top:50%; -moz- box-shadow :1px 1px 0 #c2c2c2; -webkit-box-shadow:1px 1px 0 #c2c2c2;box-shadow:1px 1px 0 #c2c2c2;)div .komentarz I #addPojemnik komentarzy mają ten sam styl. Kilka reguł CSS3 służy do zaokrąglania rogów i odbijania cieni.
style.css - Część 2
.comment .avatar img( display:block; ) .comment .name( font-size:20px; padding-bottom:10px; color:#ccc; ) .comment .date( font-size:10px; padding:6px 0; position:absolute; right:15px; top:10px; color:#bbb; ) .comment p, #addCommentContainer p( font-size:18px; line-height:1.5; overflow-x:hidden; ) #addCommentContainer input, # addCommentContainer textarea( /* Styl wprowadzania */ display:block; border:1px solid #ccc; margin:5px 0 5px; padding:3px; font-size:12px; color:#555; font-family:Arial, Helvetica, sans -serif; ) #addCommentContainer textarea( szerokość:300px; ) label( rozmiar-czcionki:10px; ) label span.error( color:red; position:relative; right:-10px; ) #submit( /* Przycisk "Prześlij" " */ background-color:#58B9EB; border:1px solid #40A2D4; color:#FFFFFF; cursor:pointer; font-family:"Myriad Pro",Arial,Helvetica,sans-serif; font-size:14px; font -weight:bold; padding:4px; margin-top:5px; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; ) #s ubmit:hover( kolor tła:#80cdf5; kolor obramowania:#52b1e2; )W drugiej części ustalamy style komentarzy i elementów formularzy. Zwróćmy uwagę na selektor Wejście, który podkreśla elementy w zależności od atrybutu rodzaj.
Krok 4 - jQuery
Przejdźmy teraz do jQuery.
skrypt.js
$(document).ready(function()( /* Poniższy kod jest wykonywany tylko po załadowaniu DOM */ /* Ta flaga zapobiega przesyłaniu wielu komentarzy: */ var working = false; /* Przechwytywanie formularza submit zdarzenie: */ $(" #addCommentForm").submit(function(e)( e.preventDefault(); if(working) return false; working = true; $("#submit").val("Praca.. "); $("span .error").remove(); /* Prześlij pola formularza do submit.php: */ $.post("submit.php",$(this).serialize(),function(msg )( working = false; $ ("#submit").val("Submit"); if(msg.status)( /* / Jeśli wstawienie się powiodło, dodaj komentarz / pod ostatnim na stronie z efekt slideDown /*/ $(msg.html).hide ().insertBefore("#addCommentContainer").slideDown(); $("#body").val(""); ) else ( /* / Jeśli istnieje są błędami, przejdź przez obiekt / msg.errors w pętli i wyślij je na stronę /*/ $.each(msg.errors,function(k,v)( $("label").append(" „+v+”"); )); ) ), "json"); )); ));Używamy wywołania funkcji $(dokument).gotowy() A, który wiąże funkcję ze zdarzeniem. Zmienny pracujący działa jako flaga sygnalizująca, że żądanie AJAX jest w toku (zapobiegając w ten sposób powielaniu tego samego komentarza).
W funkcji powrotu dla żądania POST AJAX sprawdzamy właściwość status aby ustalić, czy komentarz został wstawiony pomyślnie. Jeśli tak, dodamy wynikowy znacznik do strony po ostatnim komentarzu z animacją zjechać w dół.
Jeśli wystąpiły problemy, wyświetlamy komunikaty o błędach, dodając Zakres błąd do odpowiedniego elementu etykieta(atrybut elementu etykieta zawiera ID wejście, które zawiera błąd).
Gotowy!
Wniosek
Aby uruchomić skrypt na swoim serwerze, musisz utworzyć tabelę uwagi w Twojej bazie danych MySQL. Możesz to zrobić za pomocą kodu SQL z pliku tabela.sql, który należy wprowadzić na karcie SQL w phpMyAdmin. Następnie musisz ustawić w pliku parametry połączenia z bazą danych MySQL connect.php .
Szczerze mówiąc, gdy zobaczyłem, że piszą o tym i doradzają nowicjuszom na innych stronach, trochę się przeraziłem i postanowiłem złożyć notatkę na ten temat bez fatalnej wady. Zasadniczo widziałem długie fragmenty kodu, które implementują dodawanie komentarzy do serwisu. Zwykle do tego tworzony jest formularz, realizowane jest jego przetwarzanie, zapisywanie, a także selekcje do wyświetlenia. Ale zalety tego podejścia im dalej, tym mniej.
W tym poście poznasz jeden z najłatwiejszych (ale subiektywnie jeden z najbardziej preferowanych) sposobów dodawania komentarzy do strony - prosty przykład dla początkujących + opcje dla bardziej zaawansowanych webmasterów.
Rzeczywiście, po co wymyślać koło na nowo i pisać trochę kodu, który nadal będzie musiał być wspierany, naprawiany itp. w przyszłości, jeśli istnieje kilka gotowych rozwiązań z usług stron trzecich (mówimy o w sieciach społecznościowych + dysk)?
Zanim jednak przejdziemy do faktycznego wdrożenia, przyjrzyjmy się zaletom/wadom korzystania z gotowych rozwiązań. (Jeśli czegoś zapomniałeś - napisz w komentarzach - poszerzymy listę)
Korzyści z rozwiązań firm trzecich:
- Łatwość wdrożenia.
- Ochrona przed spamem „z pudełka” (w moim rozwiązaniu musiałbym to dodatkowo zaimplementować, więc teoretycznie jest to związane z poprzednim akapitem).
- Mniej podatne na błędy, błędy itp., ponieważ rozwiązania innych firm zostały przetestowane przez miliony użytkowników (znowu w odniesieniu do pierwszego: możesz również napisać wszystko bez błędów, ale debugowanie zajmie więcej czasu).
- Z reguły serwisy udostępniają gotowy panel administracyjny, statystyki, powiadomienia dla adminów, czasem moderację, kilku adminów, premoderację itp., co może zająć webmasterowi, zwłaszcza początkującemu, miesiące, jeśli nie lata. wprowadzić w życie.
- Użytkownik nie musi się rejestrować, wpisywać swojego imienia itp. – zakłada się, że ma już konto w popularnym serwisie społecznościowym.
- Najprawdopodobniej wytrzyma duże obciążenie ze względu na fakt, że społeczne. Platformy zostały pierwotnie zaprojektowane do dużych obciążeń.
Niedogodności:
- Słaby lub całkowity brak możliwości zmiany wyglądu bloku za pomocą komentarzy.
- Indeksowanie w wyszukiwarkach.
Jak widać, korzyści jest znacznie więcej. Brak możliwości zmiany wyglądu jest najprawdopodobniej wykonywany w celu rozpoznania stylu serwisu komentarzy, tworząc w ten sposób dyskretną reklamę. (Jako jedna z opcji). Jeśli chodzi o indeksowanie, czy to naprawdę jest takie ważne, ponieważ nie wszystkie komentarze mają ładunek semantyczny.
Ale dość teorii, przejdźmy do praktyki.
1. Najprostszą opcją jest dodawanie komentarzy za pomocą wybranego serwisu społecznościowego.
Na przykład vk. Zaglądamy do dokumentacji. Skopiuj dostarczony kod i dodaj go do strony (elementy kodu są pobierane z doków przez odniesienie, mogą ulec zmianie w przyszłości, więc zawsze kopiuj ze strony dokumentacji. Oto tylko możliwy przykład):
1) Dodaj do
:
2) Dodaj w miejscu, w którym chcemy zobaczyć widżet komentarzy (np. po dopisku, jeśli mówimy o blogu):
2. Dodaj widżety z wielu usług. Na przykład jak w tym zasobach. Przełącz zakładki:
Dodajemy do znacznika (do poprawnej pracy twitter bootstrap musi być podłączony!) w miejscu, w którym chcesz wyświetlić widżet komentarzy:
Ale ta opcja nie jest najlepsza, choć najłatwiejsza. Problem polega na tym, że przy takim podejściu wszystkie widżety zostaną zainicjowane po załadowaniu strony, niezależnie od tego, czy użytkownik ich potrzebuje, czy nie.
Można tego uniknąć, wdrażając leniwa inicjalizacja widżetów komentarzy. Najpierw cały kod, potem wyjaśnienie:
(function(global, $) ( "use strict"; $(function() ( var $tabToggler, initComments, zainicjowane; zainicjowane = ( "#vk-comments": false, "#disqus_thread": false ); initComments = function (type) ( var discussionUserName, disqus_config, pageUrl; if (initialized) ( return; ) pageUrl = "page_url"; switch (type) ( case "#disqus_thread": // Musisz ustawić te parametry, używając odpowiedniej platformy way discussionUserName = "discussUserName"; disqus_config = function() ( this.page.url = pageUrl; return this.page.identifier = "page_identifier"; ); (function() ( var d, s; d = dokument; s = d.createElement("skrypt"); s.src = "//" + dyskusjaNazwaUżytkownika + ".disqus.com/embed.js"; s.setAttribute("data-sygnatura czasowa", +new Date()); return ( d.head || d.body).appendChild(s; ))(); break; case "#vk-comments": VK.Widgets.Comments("vk-comments", ( limit: 5, załącz : " *", pageUrl: pageUrl )); break; default: return; ) initialized = true; ); $tabToggler = $(".comments-wrapper a" ); $tabToggler.on("shown.bs.tab", function(e) ( initComments($(e.target).attr("href")); )); initComments($tabToggler.closest(".active").find("a").attr("href")); )); ))(okno, jQuery);
Zwróć uwagę na zmienne, których wartość musisz przygotować za pomocą metod udostępnianych przez Twoją platformę.
Najpierw tworzymy mapowanie typu widżety komentarzy, zmienny zainicjowany. Następnie funkcja initComments(typ) pozwala zainicjować widżet komentarzy, i nic nie robi, jeśli został już zainicjowany.
I ostatni szlif - zainicjuj domyślny widżet komentarzy, aby wyświetlał się natychmiast po załadowaniu strony.
Gotowy skrypt i coffeescript na sedno. Przykład pracy znajduje się poniżej (przykłady kodu pochodzą z tej strony)
Komentarz