Informazioni su come i social network possono aiutare a promuovere un sito web e ad attirarvi nuovi visitatori. Ma questa volta vorrei passare dalla teoria alla pratica e parlare più in dettaglio di come posizionare i pulsanti "Mi piace" sul tuo sito web dai social network più popolari, come: VKontakte, Facebook, Twitter, Odnoklassniki, MoiMir, Google+, QIP e Yandex.

Cosa sono i “mi piace” e a cosa servono?

Tuttavia, nel gergo di Internet, i “mi piace” significano qualcosa di completamente diverso e assomigliano a questo:

Se il traffico verso il tuo sito è di almeno 20 visite al giorno, dovresti pensare di posizionare tali pulsanti sul tuo sito, perché:

• i “mi piace” attirano nuovi visitatori dai social network: mettendo “mi piace” a questo o quel post del tuo blog, l'utente può parlarne sulla sua pagina sul social network;
• potrai capire i visitatori del tuo sito: analizzando articoli o pagine del sito il cui numero di “mi piace” supera notevolmente le altre pagine del tuo sito, capirai cosa piace di più ai tuoi visitatori;
• questo promuoverà il sito nei motori di ricerca: i motori di ricerca hanno imparato da tempo a interagire con i social network, ecco perché i “mi piace” lasciano il segno nella SEO.

Credo che bastino i complimenti sui “mi piace” per capire quanto sia utile e importante per il sito. Pertanto, puoi tranquillamente procedere alle istruzioni di installazione.

Passaggio rapido alle istruzioni

"Mi piace" da VKontakte

1. Vai a pagina per collegare il widget al tuo sito.

3. Personalizza l'aspetto del widget secondo i tuoi gusti e ottieni il codice già pronto:

4. Il codice del widget deve essere inserito nei template delle pagine del sito.

"Mi piace" da Facebook

1. Vai alla pagina delle impostazioni del pulsante "Mi piace".

2. Configura il widget e clicca sul pulsante "Ottieni codice":

3. Nella finestra che si apre, copia il codice ricevuto e incollalo nei modelli del 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 nei modelli:

"Classe!" da Odnoklassniki

Ed è ancora più semplice ottenere il pulsante “Classe!”. insieme al pulsante “Mi piace” dei social media. Rete "MyMir". Questo è esattamente ciò di cui parleremo dopo.

2 in 1: "Mi piace" di MoyMir + "Classe" di Odnoklassniki

1. Vai alla pagina per impostare i widget “Mi piace” e “Cool!”. .

2. Personalizza il widget secondo i tuoi gusti:

3. Copia e incolla il codice risultante nei modelli del sito:

"+1" da Google+

1. Vai a Pagina delle impostazioni del pulsante "+1"..

2. Personalizza l'aspetto del pulsante:

3. Copia il codice ricevuto e incollalo nei modelli:

Tutto in uno: per i pigri!

Se sei troppo pigro per configurare tutti i social network separatamente, puoi utilizzare soluzioni e script già pronti che offrono l'opportunità di posizionare un pulsante universale con condivisione (la funzione “dillo agli amici”) su tutti i social network più diffusi. Tieni presente che non esiste una forte connessione al sito qui e tali pulsanti sono creati 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 i pulsanti "Mi piace" sul tuo sito web, devi prima decidere su quali pagine del tuo sito web sono le più redditizie e le migliori dove posizionarli. Sono disponibili le seguenti opzioni per posizionare i pulsanti sul sito:

• pagina iniziale;
• tutte le pagine del sito;
• pagina post/materiale.

Non è necessario reinventare la ruota e posizionare pulsanti nei post del forum, nelle pagine delle informazioni di contatto e così via: tali pulsanti non piaceranno. Una volta deciso dove inserire i pulsanti, accedi al pannello di controllo del tuo sito su your-site.ucoz.ru/admin e vai su:

• editor di pagine → gestisci le pagine del sito → modifica la pagina principale del sito(se desideri inserire i codici dei pulsanti solo nella pagina principale del sito);
• gestione del progetto → modulo (opzionale) → pagina del materiale e commenti ad esso(se vuoi posizionare i pulsanti “mi piace” per ogni materiale);
• gestione del design → blocco globale "Inizio del sito"(se vuoi inserire il codice su tutte le pagine del sito).

Incolla i codici dei pulsanti ricevuti in uno di questi modelli e salva le modifiche. Consideriamo questo punto utilizzando un esempio specifico: posizionando il pulsante "Questo è interessante!". accanto alla voce nel nostro blog ufficiale uCoz.

Ciao a tutti i lettori del sito

In questo articolo ti spiegherò come aggiungere i pulsanti “Mi piace”, “Classe”, “Dillo agli amici”, ecc. al tuo sito web.

Ti darò anche un suggerimento su come installare i commenti su qualsiasi pagina del tuo sito.

Esistono diversi modi per installare i pulsanti sopra sul tuo sito web. Diamo un'occhiata a ciascuno di essi:

Vai al sito web della risorsa da cui desideri avere un pulsante. Successivamente, trova la sezione per gli sviluppatori e lì, seguendo le istruzioni, genera il codice HTML da inserire nel sito.

Utilizza il meraviglioso servizio di Yandex e genera un pannello Mi piace speciale.

Diamo un'occhiata a ciascun servizio.

In contatto con

Attenzione, per installare il pulsante devi essere registrato! Il collegamento alla sezione si trova nella parte inferiore del social network. reti.

Ora hai completa libertà per i voli di fantasia. Puoi installare qualsiasi servizio desideri. Ho selezionato il pulsante "Mi piace".

Dopo aver fatto clic sulla sezione selezionata, verrà visualizzata una procedura guidata di configurazione.

Ora parliamo un po' della procedura guidata di configurazione. Ogni sviluppatore ha il proprio apiId. Assicurati di controllarne la presenza nella finestra con il codice generato.
Inoltre, non dimenticare di includere l'indirizzo del tuo sito web nella parte superiore del modulo.

Tutto! Ora non resta che mettere metà dello script nella testa della nostra pagina e l'altra metà nel corpo, dove vuoi che sia il tuo pulsante.

Qui puoi controllare come funziona sul mio sito web. In cima alla pagina.

Odnoklassniki e il mio mondo

E proprio qui personalizziamo l'aspetto del pulsante. E poi copiamo il codice. Questo codice non è diviso in due parti, deve essere immediatamente inserito nel punto in cui si desidera che si trovi il pulsante.

Provalo in azione.

Visitiamo Yandex :)

Tutto qui è ancora più semplice rispetto ai metodi che abbiamo visto in precedenza.
Selezioniamo semplicemente i servizi necessari, la loro visualizzazione e incolliamo il codice risultante nel sito.

È tutto? Così semplice?

Scrivi nei commenti se qualcosa non è chiaro.

Potrebbe interessarti:

	Ciao caro lettore, in questo articolo vedremo: cos'è il css come collegare gli stili alla tua pagina come usare i CSS "proprietà" CSS di base	Ogni giorno (o forse non tutti i giorni) accendi il computer, apri il browser e utilizzi attivamente Internet. Ti sei mai chiesto come funziona questa rete? NO? Quindi lasciamo che l'autore del sito spieghi come stanno le cose.

Saluti, cari lettori del blog. A causa delle numerose richieste dei lettori, oggi creeremo un fantastico sistema "Condividi con gli amici" su VKontakte per scaricare un file utilizzando JQuery e CSS.

Amici, voglio dire che questo sistema aumenterà molte volte il numero di collegamenti alla vostra risorsa, a seconda, ovviamente, di cosa offrite da scaricare e del tipo di traffico che avete.

Vorrei anche dire che 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 leggermente modificato da me. E alla fine tutto è andato bene :-)

Bene, ora passiamo al sistema stesso.

Il sistema "Dillo agli amici" su VKontakte di scaricare il file Come funziona?

Vedi, non è così difficile. :-)

Come farlo?

Per cominciare, ho disegnato un semplice modello per una pagina con un pulsante. Puoi vederlo nell'esempio e utilizzarlo anche sul tuo sito web, è disponibile nel codice sorgente. L'utente verrà reindirizzato a questa pagina in modo che possa eseguire le operazioni care di download del file.

Poi ho creato questo modello e questo è quello che ho ottenuto:

Come puoi vedere, la pagina non è affatto grande o complessa.

La cosa principale è all'inizio tra i tag e aggiungi i seguenti script:

jquery.min.js è la libreria JQuery, se ce l'hai già non è necessario reinstallarla

jquery.vkAction.js: questo script apre una finestra VKontakte.

script.js - ma questo script attiva il pulsante "Download".

Ora aggiungiamo alcuni stili CSS per decorare leggermente la nostra pagina.

CSS

Amici, tutte le immagini indicate negli stili possono essere trovate nel codice sorgente 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,85 em; altezza linea: 135%; ) ul ( stile elenco: none; ) a ( colore: #538e28; decorazione testo: none; ) a:hover ( colore: #69b432 ) #wrapper ( posizione:relativa; bordo:0px solido #d6d6d6; larghezza: 1004px; altezza: 787px; sfondo: url(img/bodycont.jpg) 50px 0px nessuna ripetizione; margine: 0 auto; ) #copia( posizione:assoluta; sinistra:330px; fondo:0px; bordo:0px solido #d6d6d6; dimensione carattere:11px; colore:#bbb; ) #testo ( posizione:assoluta; sinistra:0px; cima: 150px; bordo: 0px solido #d6d6d6; larghezza: 1004px; altezza: 157px; sfondo: url(img/text.png) no-repeat; margine: 0 automatico; ) #vk ( posizione:assoluta; sinistra:370px; superiore: 300px; bordo: 0px solido #d6d6d6; larghezza: 262px; altezza: 262px; opacità: 0,5; -moz-transition: tutti gli 0,2s 0,01s facilitati; -o-transition: tutti gli 0,2s 0,01s facilitati; - transizione webkit: tutti gli 0,2 e 0,01 vengono inseriti facilmente; ) #vk:hover ( opacità: 1.0; ) #str1 ( sfondo: url(img/str1.png) no-repeat; 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:assoluta; sinistra:373px; superiore:580px; larghezza:253px; altezza:98px; overflow:nascosto; background:url("img/dbuthov.png") no-repeat; cursore:default; ) . downloadButton.active( background:url("img/dbut.png") no-repeat; larghezza:253px; altezza:98px; cursore:puntatore; -moz-transition: tutti 0.2s 0.01s easy-in; -o-transition : tutti gli 0.2s 0.01s facilitano l'inserimento; -webkit-transition: tutti gli 0.2s 0.01s facilitano l'inserimento; ) .downloadButton.active:hover( opacità: 0.9; )

Spero che qui ti sia tutto chiaro. Per cominciare ho realizzato un blocco di 1004 x 787 pixel, nel quale ho poi posizionato tutti gli oggetti che vedete con posizionamento assoluto. Questi sono i pulsanti VKontakte e download, nonché le frecce e le iscrizioni stesse.

Se non capisci qualcosa, chiedi nei commenti.

Passiamo ora direttamente agli script.

JS

(function($)( var win = null; $.fn.tweetAction = function(options,callback)( // Parametri standard per la finestra pop-up: options = $.extend(( url:window.location.href ) , opzioni) ; return this.click(function(e)( if(win)( e.preventDefault(); return; ) var larghezza = 550, altezza = 350, top = (window.screen.height - altezza)/2 , sinistra = (window.screen.width - larghezza)/2; var config = [ "scrollbars=yes","resizable=yes","toolbar=no","location=yes", "width="+width, "height= "+height,"left="+left, "top="+top ].join(","); // Finestra pop-up dall'API VKontakte: win = window.open("http:/ /vkontakte.ru/share .php?"+$.param(options), "TweetWindow",config); (funzione checkWindow())( try( // è necessario inserire questo codice in un try/catch: if(! win || win.closed) ( Throw "Chiuso!"; ) else ( setTimeout(checkWindow,100); ) ) catch(e)( win = null; callback(); ) ))(); e.preventDefault() ; )); ); ) )(jQuery);

Come puoi vedere, ho cambiato solo questo link http://twitter.com/intent/tweet? a questo http://vkontakte.ru/share.php?. In altre parole, ho sostituito il collegamento da Twitter con un collegamento VK. Questo è tutto, non ci sono stati più cambiamenti.

Ora vediamo quale sarà il mio prossimo script.

script.js

$(document).ready(function())( // Utilizzando il nostro plugin tweetAction. Per un elenco completo dei // parametri supportati, fare riferimento a http://dev.twitter.com/pages/intents#tweet-intent $( " #tweetLink").tweetAction(( titolo: "Come creare un sistema "Dillo agli amici" su VKontakte per il download utilizzando JQuery e CSS", url: "http://site/", descrizione: "Qui puoi scaricare il fantastico "Dillo agli amici di sistema"" su VKontakte di scaricarlo e scopri anche come funziona" ),function())( // Quando la finestra si chiude: $(".downloadButton") .addClass("active") . attr("href","Collegamento diretto al file"); )); ));

Importante

Devi modificare questo script per il tuo sito.

Nel campo del titolo: è necessario inserire il titolo del post, che dovrà essere visualizzato nel contatto.

Nel campo descrizione: è necessario specificare una descrizione del post.

Questo è tutto, amici. Vorrei ringraziare il sito tutorialzine.com per l'idea e per gli script. Bene, ora ci vediamo presto. :-)

Tempo di lettura: 5 minuti

Le campagne integrate di email marketing e social media raggiungono più audience e aumentano il ROI (ritorno sull'investimento). Scopri come utilizzare la piattaforma di marketing integrata di Mailigen per raggiungere i clienti tramite e-mail e social media.

Perché aggiungere i pulsanti dei social media "Dillo agli amici" alla tua email?

Secondo uno studio del 2014 sulle strategie di marketing condotto dalla società di gestione delle risorse digitali WebDAM, ci sono tre buone ragioni per questo:

• Nel 2013, il 43% dei venditori ha trovato acquirenti tramite LinkedIn

Come aggiungere i pulsanti dei social media "Dillo agli amici" a un messaggio e-mail Passaggio 1

Quando sei alla quarta fase della creazione di una newsletter via email, trascina il blocco per la condivisione sui social network nel punto in cui desideri installare questi pulsanti.

Passo 2

Successivamente si aprirà una nuova finestra in cui potrai effettuare tutte le impostazioni necessarie.

• Selezionando “Archivio email”, il destinatario dell'invio potrà condividere sui social network il contenuto dell'intera lettera. Il titolo della newsletter verrà utilizzato come testo introduttivo.

• Se selezioni "Altro collegamento", puoi inserire un collegamento a qualsiasi contenuto che desideri condividere. Ad esempio, questo potrebbe essere un nuovo articolo sul tuo blog.

• Quindi inserisci il testo che verrà posizionato accanto ai pulsanti, seleziona la dimensione dei pulsanti e la distanza tra loro.

Facebook Riassumiamo

Recentemente, ogni secondo (se non il primo) cliente nei requisiti per lo sviluppo del sito web chiede di essere sicuro di collegarlo ai social network. I pulsanti “social” su un sito Web sono lo strumento numero 1 per attirare il pubblico target, distribuire contenuti e PR in generale. Ed è completamente gratuito!

I social network forniscono codici per i loro pulsanti e widget da posizionare sul sito e forniscono istruzioni per installarli nel sistema di gestione del sito. Qualsiasi CMS (sistema operativo) ti consente di installarli, l'importante è inserirli armoniosamente nel design del tuo sito web.

Quali sono le caratteristiche e le funzioni?

Se il tuo sito è rivolto a persone che comunicano sui social network più popolari. reti, ad esempio Vkontakte, Twitter, Instagram, Facebook, Google+, Pinterest, ecc., e vuoi coprirle tutte, quindi per non installare i pulsanti per ciascuna di esse separatamente, dato che potrebbero differire per dimensioni e design , ti consigliamo di utilizzare i servizi di aggregazione. Si tratta di strumenti semplici e convenienti che consentiranno ai visitatori del sito di condividere rapidamente informazioni con i propri amici, indipendentemente dal social network che utilizzano. Di seguito vedremo i servizi più popolari.

Pulsanti dei social media Condividi Pluso