Saluti, cari lettori di blog. A grande richiesta dei nostri lettori, oggi creeremo un fantastico sistema "Condividi con gli amici" su VKontakte per scaricare un file usando jQuery e CSS.
Amici, voglio dire che questo sistema aumenterà il numero di collegamenti alla vostra risorsa più volte, a seconda di cosa offrite per il download e di quale sia il vostro traffico.
Voglio anche dirlo questo sistema molto simile al fantastico "" sistema, che a sua volta aumenta il numero di collegamenti su Twitter. In questo caso, quasi tutto è uguale, solo un po 'modificato da me. E alla fine tutto ha funzionato alla grande :-)
Passiamo ora al sistema stesso.
Il sistema "Dillo agli amici" in Kontakte per scaricare il file
Come funziona?
Vedi, non è così difficile. :-)
Come farlo?
Innanzitutto, ho disegnato un semplice modello di pagina con un pulsante. Puoi vederlo nell'esempio, oltre a usarlo sul tuo sito, è disponibile nella fonte. Sul questa pagina trasferirà l'utente in modo che possa eseguire le preziose operazioni di download dei file lì.
Quindi ho presentato questo modello e questo è quello che ho ottenuto:
Come puoi vedere, non è affatto una pagina grande e non complicata.
La cosa principale all'inizio tra i tag
e aggiungere i seguenti script:
jquery.min.js - questa è una libreria JQuery, se la possiedi già non è necessario reinstallarla
jquery.vkAction.js - questo script chiama la finestra vKontakte.
script.js - ma questo script attiva il pulsante Scarica.
Ora aggiungiamo un po 'di CSS per decorare un po' la nostra pagina.
CSS
Amici, tutte le immagini indicate negli stili si trovano nelle fonti nella cartella img.
* (margine: 0; imbottitura: 0;) corpo (margine superiore: -50px; larghezza: 100%; altezza: 100%; colore: # 555; sfondo: url (img / body.jpg) ripeti 100% 0; famiglia di caratteri: "Ubuntu", sans-serif; dimensione carattere: 0,85em; altezza riga: 135%;) ul (stile elenco: nessuno;) a (colore: # 538e28; decorazione del testo: nessuno;) a: hover (colore: # 69b432) #wrapper (posizione: relativo; bordo: solido 0px # d6d6d6; larghezza: 1004px; altezza: 787px; sfondo: url (img / bodycont.jpg) 50px 0px no-repeat; margine: 0 auto;) #copy (posizione: assoluto; sinistra: 330px; fondo: 0px; bordo: 0px solido # d6d6d6; dimensione carattere: 11px; colore: #bbb;) #text (posizione: assoluto; sinistra: 0px; in alto: 150px; bordo: 0px solido # d6d6d6; larghezza: 1004px; altezza: 157px; sfondo: url (img / text.png) no-repeat; margine: 0 auto;) #vk (posizione: assoluto; sinistra: 370px; inizio: 300px; bordo: 0px solido # d6d6d6; larghezza: 262px; altezza: 262px; opacità: 0,5; -moz-transizione: tutti gli 0,2s 0,01s con facilità; -o-transizione: tutti gli 0,2s 0,01s con facilità; - webkit-transizione: tutti gli 0.2s 0.01s easy-in; ) #vk: hover (opacità: 1.0;) # str1 (sfondo: url (img / str1.png) nessuna ripetizione; posizione: assoluta; sinistra: 140px; superiore: 290px; bordo: 0px solido # d6d6d6; larghezza: 262px ; altezza: 262px;) # str2 (sfondo: url (img / str2.png) nessuna ripetizione; posizione: assoluta; destra: 100px; superiore: 450px; bordo: 0px solido # d6d6d6; larghezza: 262px; altezza: 262px; ) .downloadButton (posizione: assoluto; sinistra: 373px; superiore: 580px; larghezza: 253px; altezza: 98px; overflow: nascosto; sfondo: url ("img / dbuthov.png") no-repeat; cursore: default;). downloadButton.active (background: url ("img / dbut.png") nessuna ripetizione; larghezza: 253px; altezza: 98px; cursore: puntatore; -moz-transizione: tutti 0,2s 0,01s easy-in; -o-transizione : tutti i 0.2s 0.01s con facilità; -webkit-transizione: tutti i 0.2s 0.01s con facilità;) .downloadButton.active: hover (opacità: 0.9;)
Spero che tu capisca tutto qui. Per cominciare, ho realizzato un blocco con una dimensione di 1004 per 787 pixel, in cui ho quindi posizionato tutti gli oggetti che vedi con un posizionamento assoluto. Questi sono VKontakte e i pulsanti di download, nonché le frecce e le stesse iscrizioni.
Se non capisci qualcosa, chiedi nei commenti.
Ora andiamo direttamente agli script.
Js
(function ($) (var win \u003d null; $ .fn.tweetAction \u003d function (options, callback) (// Opzioni predefinite per popup: options \u003d $ .extend ((url: window.location.href), opzioni) ; return this.click (function (e) (if (win) (e.preventDefault (); return;) var width \u003d 550, height \u003d 350, top \u003d (window.screen.height - height) / 2, left \u003d (window.screen.width - width) / 2; var config \u003d ["scrollbars \u003d yes", "resizable \u003d yes", "toolbar \u003d no", "location \u003d yes", "width \u003d" + width, "height \u003d "+ height," left \u003d "+ left," top \u003d "+ top] .join (", "); // Finestra popup dell'API vKontakte: win \u003d window.open (" http://vkontakte.ru/share .php? "+ $. param (opzioni)," TweetWindow ", config); (funzione checkWindow () (try (// è necessario inserire questo codice in un try / catch: if (! win || win.closed) (throw "Closed!";) else (setTimeout (checkWindow, 100);)) catch (e) (win \u003d null; callback ();))) (); e.preventDefault ();)););) ) (jQuery);
Come puoi vedere, qui ho modificato solo questo link http://twitter.com/intent/tweet? a questo http://vkontakte.ru/share.php?. In altre parole, il collegamento da Twitter è stato sostituito con un collegamento VK. Tutto, non ci sono stati più cambiamenti.
Ora vediamo come ho ottenuto il seguente script.
script.js
$ (document) .ready (function () (// Uso del nostro plugin tweetAction. Per un elenco completo con // parametri supportati, consultare http://dev.twitter.com/pages/intents#tweet-intent $ (" #tweetLink "). tweetAction ((titolo:" Come rendere il sistema "Dillo ai tuoi amici" in VKontakte per scaricare da usando jQuery e CSS ", url:" http: // site / ", descrizione:" Qui puoi scaricare il fantastico sistema "Dillo ai tuoi amici" "su VKontakte per scaricarlo e anche imparare come funziona"), function () (// Quando la finestra si chiuderà: $ (". downloadButton") .addClass ("active") .attr ("href", "Link diretto al file");)); ));
Importante
Devi modificare questo script per il tuo sito.
In campo titolo: devi inserire il nome del post, che dovrebbe essere visualizzato nel contatto.
In campo descrizione: devi fornire una descrizione del post.
Sono tutti amici. Vorrei ringraziare tutorialzine.com per l'idea e gli script. Bene, adesso ci vediamo presto. :-)
Ciao a tutti i lettori del sito sito web
In questo articolo ti dirò come aggiungere pulsanti come "Mi piace", "Classe", "Dillo agli amici", ecc. Al tuo sito.
Ti darò anche un suggerimento su come impostare i commenti su qualsiasi pagina del tuo sito.
Esistono diversi modi per installare i pulsanti di cui sopra sul tuo sito. Diamo un'occhiata a ciascuno di essi:
- Vai al sito della risorsa da cui vuoi avere un pulsante. Quindi, trova la sezione per gli sviluppatori e già lì, seguendo le istruzioni, genera codice HTML da inserire nel sito.
- Approfitta del meraviglioso servizio di Yandex e genera un pannello simile.
Diamo un'occhiata a ciascun servizio.
In contatto con
Attenzione, devi essere registrato per installare il pulsante! Il link alla sezione è in fondo al social. reti.
Ora hai tutto lo spazio per un volo di fantasia. Puoi installare qualsiasi servizio desideri. Ho selezionato il pulsante "Mi piace".
Dopo aver fatto clic sulla sezione di tua scelta, avrai una procedura guidata di configurazione.
Ora un po 'di installazione guidata. Ogni sviluppatore ha il proprio apiId. Assicurati di controllare la sua presenza nella finestra con il codice generato.
Inoltre, non dimenticare di includere l'indirizzo del tuo sito Web nella parte superiore del modulo.
Tutti! Ora resta da spingere metà della sceneggiatura nella testa della nostra pagina e l'altra metà nel corpo, dove vuoi che sia il tuo pulsante.
Puoi controllare come funziona sul mio sito. In cima alla pagina.
Compagni di classe e Il mio mondo
E proprio qui abbiamo istituito aspetto pulsanti. E poi copia il codice. Questo codice non è diviso in due parti, è necessario inserirlo immediatamente nel punto in cui si desidera posizionare il pulsante.
Prova azione.
Andiamo a visitare Yandex :)
Qui è ancora più facile di quanto non lo siamo nei modi che abbiamo considerato in precedenza.
Selezioniamo solo i servizi necessari, li visualizziamo e inseriamo il codice risultante nel sito.
È tutto? Così semplice?
Scrivi nei commenti se qualcosa non è chiaro.
|
Ciao caro lettore, in questo articolo analizzeremo:
|
Ogni giorno (o forse non tutti) accendi il computer, apri un browser e usi attivamente Internet. Ti sei mai chiesto come funziona questa rete? Non? Quindi lascia che l'autore del sito spieghi come stanno le cose. |
In che modo i social network possono aiutare a promuovere il tuo sito e attirare nuovi visitatori. Ma questa volta vorrei passare dalla teoria alla pratica e parlare in modo più dettagliato su come posizionare i pulsanti "Mi piace" popolari social networks, come: VKontakte, Facebook, Twitter, Odnoklassniki, MoiMir, Google+, QIP e Yandex.
Cosa sono i "mi piace" e a che cosa servono?
Tuttavia, nel gergo di Internet, "mi piace" significa qualcosa di completamente diverso e sembrano così:
Se il traffico verso il tuo sito è di almeno 20 visite al giorno, allora dovresti già pensare a posizionare tali pulsanti sul tuo sito, perché:
- "Piace" attirare nuovi visitatori dai social network: "mi piace" una voce particolare sul tuo blog, l'utente può parlarne sulla sua pagina nel social network;
- puoi capire i visitatori il tuo sito: analizzando articoli o pagine del sito, il numero di "Mi piace" di cui supera significativamente le altre pagine del tuo sito, capirai cosa piace di più ai tuoi visitatori;
- questo è promuoverà il sito nei motori di ricerca: motori di ricerca da tempo ho imparato a interagire con i social network, motivo per cui i "mi piace" lasciano il segno nel SEO.
Penso che ci siano abbastanza complimenti ai "mi piace" per capire quanto sia utile e importante per il sito. Pertanto, è possibile procedere in sicurezza alle istruzioni di installazione.
Salto rapido alle istruzioni
"Mi piace" di VKontakte
1. Vai a la pagina per connettere il widget al tuo sito.
3. Personalizza la visualizzazione del widget a tuo piacimento e ottieni il codice finito:
4. Il codice del widget deve essere inserito nei modelli di pagina del sito.
"Mi piace" da Facebook
1. Vai alla pagina di impostazione del pulsante "Mi piace".
2. Personalizza il widget e fai clic sul pulsante "Ottieni codice":
3. Nella finestra che si apre, copia il codice ricevuto e incollalo nei modelli di sito.
"Tweet" da Twitter
1. Vai a.
2. Seleziona il tipo di pulsante:
3. Personalizza l'aspetto del pulsante:
4. Copia e incolla il codice risultante in modelli:
"Classe!" di Odnoklassniki
E ancora più facile: ottieni la "Classe!" insieme al pulsante "Mi piace" dal social. rete "MoiMir". Questo è esattamente ciò che verrà discusso in seguito.
2 in 1: "Mi piace" da MoiMir + "Class" da Odnoklassniki
1. Vai alla pagina per la configurazione di "Mi piace" e "Classe!" ...
2. Personalizza il widget a tuo piacimento:
3. Copia e incolla il codice risultante nei modelli di sito:
"+1" da Google+
1. Vai a pagina di impostazione del pulsante "+1".
2. Personalizza l'aspetto del pulsante:
3. Copia il codice risultante e incollalo nei modelli:
Tutto in uno: per i più pigri!
Se sei troppo pigro per configurare tutti i social network separatamente, puoi usarlo soluzioni pronte e script che forniscono la possibilità di posizionare un pulsante universale con condivisione (funzione "dillo agli amici") su tutti i social network più diffusi. Si noti che non esiste un forte collegamento al sito e tali pulsanti sono progettati più per comodità che per effetto SEO.
Ottieni i codici dei pulsanti e incollali nel tuo sito web.
Dove inserire i codici ricevuti?
Per posizionare pulsanti "mi piace" sul sito, devi prima decidere su quali pagine del tuo sito è più redditizia e meglio posizionarle. Esistono le seguenti opzioni per posizionare i pulsanti sul sito:
- home page;
- tutte le pagine del sito;
- pagina con registrazione / materiale.
Non è necessario reinventare la ruota e posizionare i pulsanti nei post del forum, nelle pagine dei contatti e così via: questi pulsanti non saranno graditi. Dopo aver deciso dove inserire i pulsanti, accedere al pannello di controllo del sito in tuo-sito.ucoz.ru / admin e vai a:
- editor di pagine -\u003e gestione pagine del sito -\u003e modifica home page del sito (se si desidera posizionare solo i codici dei pulsanti su home page posto);
- gestione del progetto → modulo (opzionale) → pagina di materiale e commenti ad esso (se si desidera posizionare pulsanti "mi piace" per ciascun materiale);
- gestione del progetto → blocco globale " Parte in alto posto " (se si desidera posizionare il codice su tutte le pagine del sito).
Incolla i codici dei pulsanti ricevuti in uno di questi modelli e salva le modifiche. Diamo un'occhiata a questo punto con un esempio specifico: il posizionamento di "Questo è interessante!" accanto alla voce sul nostro blog ufficiale uCoz.
Di recente, ogni secondo (se non il primo) cliente nei requisiti per lo sviluppo del sito chiede di essere sicuro di collegarlo ai social network. I pulsanti "Social" sul sito sono lo strumento numero 1 per attirare destinatari, distribuzione di contenuti e PR in generale. Ed è completamente gratuito!
I social network forniscono codici per i loro pulsanti e widget per il posizionamento sul sito e includono le istruzioni per installarli nel sistema di gestione dei contenuti. Qualsiasi CMS ( sistemi operativi), la cosa principale è adattarli armoniosamente al design del tuo sito.
Quali sono le caratteristiche e le funzioni?
Se il tuo sito è rivolto a persone che comunicano con i social più popolari. reti, ad esempio Vkontakte, Twitter, Instagramm, Facebook, Google+, Pinterest e altri, e si desidera coprirli tutti, in modo da non impostare i pulsanti per ciascuno di essi separatamente, dato che possono differire per dimensioni e design, si consiglia di utilizzare servizi di aggregatore. Si tratta di strumenti semplici e convenienti che consentiranno ai visitatori del sito di condividere rapidamente le informazioni con i loro amici, indipendentemente dal social network che utilizzano. Di seguito analizzeremo i servizi più popolari.
Pulsanti social media Condividi Pluso
Tempo di lettura: 5 minuti
Le campagne integrate di e-mail e social media marketing raggiungono un pubblico più ampio e aumentano il ROI (ritorno sugli investimenti). Scopri come utilizzare la piattaforma di marketing integrata di Mailigen per raggiungere i clienti tramite e-mail e social media.
Perché aggiungere i pulsanti di social media Condividi agli amici all'e-mail?
Secondo la ricerca del 2014 sulle strategie di marketing nel 2014 della società di gestione patrimoniale digitale WebDAM, ci sono tre buoni motivi:
- Nel 2013, il 43% dei venditori ha trovato acquirenti tramite LinkedIn
Come aggiungere i pulsanti dei social media "Dillo agli amici" a un messaggio di posta elettronica
Passo 1
Quando ti trovi nella quarta fase della creazione di una campagna e-mail, trascina il blocco di condivisione social nel punto in cui desideri installare questi pulsanti.
Passo 2
Successivamente, si aprirà una nuova finestra in cui è possibile effettuare tutte le impostazioni necessarie.
- Se scegli "Archivio della mailing list", il destinatario della mailing potrà condividere i contenuti dell'intera lettera sui social network. Il titolo della newsletter verrà utilizzato come testo introduttivo.
- Se scegli "Altro link", puoi inserire un link a qualsiasi materiale che desideri condividere. Ad esempio, potrebbe essere un nuovo articolo sul tuo blog.
- Quindi digita il testo che si troverà accanto ai pulsanti, seleziona la dimensione dei pulsanti e la distanza tra loro.
