Script pulsanti sociali. Pulsanti dei social media

Perché non spiegherò nuovamente cosa c'era scritto in esso, ma dovrò farvi riferimento nel corso dell'articolo.

Quindi, iniziamo e iniziamo, forse, con JavaScript stesso. Il lavoro della sceneggiatura riguardante il contatore si divide in due parti:

• Il contatore deve essere aggiunto ad ogni pulsante dei social durante il caricamento della pagina;
• Al clic del pulsante evento, modificare il numero di condivisioni.

Per implementare la prima parte della logica dello script, dobbiamo aggiungere il metodo init():

Init: function(element)( $(document).ready(function()( $(element).each(function(idx)( var countApiUrls = ( twitter: "https://urls.api.twitter.com/1 /urls/count.json?callback=?&url=", vk: "https://vk.com/share.php?act=count&index=" + idx + "&url=", facebook: "https://graph .facebook.com/?callback=?&ids=" ); var pageUrl = $.parseJSON($(elemento + " div:eq(0)").attr("data-share-data")).url; if (pageUrl)( share.getCountLikes($(elemento).find(".twitter"), countApiUrls.twitter, pageUrl, "twitter"); share.getCountLikes($(elemento).find(".vk"), countApiUrls .vk, pageUrl, "vk"); share.getCountLikes($(element).find(".facebook"), countApiUrls.facebook, pageUrl, "facebook"); ); )); )); return false; )

GetCountLikes: function(box, apiUrl, pageUrl, type)( if(apiUrl && pageUrl)( if(type == "twitter")( $.getJSON(apiUrl + pageUrl, function(data)( var num = data.count | | 0; if(num > 0)( share.setCountLikes(box, num); ); )); ); if(type == "vk")( $.getScript(apiUrl + pageUrl); if(!window. VK)( window.VK = (); ); window.VK.Share = ( count: function(idx, count)( var num = count || 0; if(num > 0)( share.setCountLikes(box, num ); ); ) ); ); if(type == "facebook")( $.getJSON(apiUrl + pageUrl, function(data)( var num = data.shares || 0; if(num > 0)( share .setCountLikes(box, num); ); )); ); ); restituisce false; )

Il metodo getCountLikes() accetta 4 parametri:

• box: un wrapper per ciascuno dei pulsanti del social network;
• apiUrl - indirizzo dell'API su cui viene effettuata la chiamata;
• pageUrl - l'indirizzo della pagina di cui vogliamo ottenere i dati;
• tipo - tipo di social network.

Usiamo il metodo jQuery $.getJSON() per accedere all'url generato = apiUrl + pageUrl. A seconda del social network, riceviamo una risposta (principalmente json) e la elaboriamo. L'eccezione è "Vkontakte", poiché quando lo richiediamo, otteniamo l'elaborazione del metodo VK.Share (), che causa un errore naturale nella pagina, poiché non abbiamo un oggetto VK, ma con l'aiuto di un " semplice" stampella, tiriamo fuori il risultato che ci serve.

L'ultima cosa che ci resta è disegnare i numeri sui pulsanti. Risolviamo questo problema con l'aiuto del nuovo metodo setCountLikes(). Questa funzione accetta due parametri: il qualificatore wrapper e il numero stesso.

SetCountLikes: function(box, num)( box.append(" " + numero + ""); restituisce falso; )

Popup: function(box, url)( var countBox = box.find(".count"); if(!countBox.length)( share.setCountLikes(box, 1); )else( countBox.text(parseInt(countBox. text()) + 1); ); window.open(url, "", "toolbar=0, status=0, width=626, height=436"); return false; )

Abbiamo aggiunto un nuovo parametro box, descritto in precedenza, e all'interno, utilizzando l'istruzione condizionale if(), aumentiamo il contatore, a seconda della presenza del numero di condivisi in precedenza. Questo completa lo script stesso, ovviamente, devi anche aggiornare la riga nei metodi twitter(), vk(), facebook():

share.popup(url);

share.popup($questo, URL);

Ora, per quanto riguarda il markup HTML, sopra abbiamo considerato il metodo init() e poiché questo è il punto di ingresso/inizio dello script, lo chiamiamo nella pagina dopo aver collegato i file:

Dovresti anche aggiungere un intervallo con la classe icon al pulsante:

Ci sono stati anche piccoli cambiamenti nei CSS. Spero che quando leggerai questo paragrafo, avrai già scaricato l'archivio con un esempio, in caso contrario scaricalo e usalo: tutto funziona. Io stesso utilizzo questa soluzione in diversi progetti e non ho notato alcun problema.

Ciao amici! L'articolo di oggi sarà molto voluminoso, ma allo stesso tempo estremamente utile. Perché ho deciso di scrivere questo articolo? Il fatto è che mi viene costantemente chiesto come ottenere più fan in un particolare social network? Perché le persone non seguono la mia pagina Facebook? Perché nessuno segue l'azienda su Twitter?

Quasi tutte le aziende oggi hanno un sito Web e persino un blog. Hai un sito web? Lo spero! In caso contrario, devi pensarci urgentemente! Bene, con blogger e titolari di libere professioni (consulenti e liberi professionisti), è chiaro che hanno il loro indirizzo su Internet: un sito web. Amici, il problema è che pochi siti sono davvero ottimizzati per i social network. Possono produrre un sacco di contenuti molto utili e interessanti, ma nessuno li vede o li sente. SMO (ottimizzazione dei social media) Hai sentito questo termine? Quindi nessuno è coinvolto proprio in questo CMO (ottimizzazione del sito per i social network). Ma invano! Ci sono un numero enorme di modi che gli esperti conoscono per creare quello che si dice essere traffico su un sito web. Semplici manipolazioni + avere idee e creatività possono aiutare in modo significativo la tua azienda nella promozione. Questo te lo garantisco!

Quindi di seguito ti dirò, come installare i pulsanti e i widget sociali ufficiali nel sito. Questi saranno solo pulsanti e widget ufficiali, nessun servizio o plug-in!

I social network si sono impegnati molto e hanno creato un numero enorme di pulsanti e widget diversi. Nessuno ne ha mai sentito parlare, anche se sono liberamente disponibili per tutti. Qui tratteremo solo quelli più utili ed efficaci che ti aiuteranno a far crescere la tua base di fan, oltre a rendere la condivisione dei tuoi articoli e altri contenuti semplice e senza sforzo per i visitatori del tuo sito.

Se si desidera installare gli stessi pulsanti del mio sito, viene scritto di più su questo.

Scegli un social rete di cui si desidera impostare i pulsanti:

Tipi di pulsanti sociali

Prima di iniziare con le istruzioni di installazione dei pulsanti, voglio attirare la tua attenzione sul fatto che esistono diversi tipi di pulsanti:

Facebook, come altri social media reti c'è un'ampia selezione di pulsanti e widget sociali. Ognuno di loro ha la sua funzione e il suo scopo. In questa sezione considereremo solo quelli più utilizzati e necessari. Il resto puoi vederlo e testarlo sul sito degli sviluppatori su Facebook.

Nota: Mettiamoci d'accordo subito. Nella descrizione di ogni sezione, fornirò un link al sito degli sviluppatori del social network in questione. reti. In tali pagine è possibile trovare collegamenti a tutti i pulsanti e widget esistenti. Pertanto, apri immediatamente la pagina degli sviluppatori in una scheda separata e leggi ulteriormente questo articolo.

Sito per sviluppatori Facebook: https://developers.facebook.com/docs/plugins

Pulsante Mi piace

Come installare?

Installare il pulsante "Mi piace" è molto semplice! Devi andare al sito degli sviluppatori su Facebook (come concordato, il link è all'inizio di questa sezione). Prima di iniziare a creare nuovi pulsanti e widget, devi creare una nuova app nel menu App. Questo deve essere fatto, perché senza di esso Facebook non ti permetterà di creare pulsanti!

Se hai problemi con la creazione di un'applicazione o la generazione di script, faccelo sapere nei commenti e fornirò istruzioni ancora più dettagliate sull'installazione dei pulsanti.

Quindi, per impostare il pulsante "Mi piace", nella pagina degli sviluppatori, nella colonna di sinistra, fare clic su " pulsante mi piace (web)«. Ora devi scegliere tra le opzioni offerte da Facebook per ottenere esattamente il widget che desideri.

1) URL a cui piace— inserisci un link alla pagina, pubblicazione, landing page per la quale stai creando il pulsante “Mi piace”. Può essere qualsiasi tipo di contenuto, anche un'immagine o un video. La cosa principale è fornire un collegamento che gli utenti condivideranno.

2) Larghezza- Se hai uno spazio limitato per il pulsante, puoi specificare la larghezza del widget in pixel. I pulsanti stessi sono piccoli, ma se scegli i pulsanti standard, il testo occupa molto spazio. Ne parlerò nel prossimo paragrafo.

3) disposizione- Tipo di widget. Facebook offre 4 opzioni tra cui scegliere: standard (come in foto), con un grande bancone, con un piccolo bancone e solo pulsanti. Tutto dipende dal tuo gusto, dallo stile del sito, dallo spazio disponibile per i pulsanti e dal desiderio di mostrare i contatori (cioè quante persone hanno cliccato sul pulsante).

4) Tipo di azione- tipo di azione, ovvero che tipo di pulsante si desidera impostare: "Mi piace" o "Consiglia". Ho scritto in dettaglio le differenze tra questi pulsanti - e i widget su Facebook in generale - nel mio .

5) Mostra i volti degli amici- se vuoi che i pulsanti mostrino al visitatore del tuo sito gli avatar dei suoi amici che hanno già cliccato sul pulsante "Mi Piace", seleziona questa casella. Se a nessuno degli amici piace la pagina, l'articolo, ecc., Facebook non visualizzerà la foto, ma nel testo offrirà all'utente di essere il primo a mettere mi piace. Se lo spazio lo consente, consiglio di abilitare questa opzione, in quanto i volti degli amici influiscono positivamente sulla percezione del contenuto da parte del lettore, accrescendo la sua fiducia e spingendolo spesso a cliccare anche lui sul pulsante, se non altro per solidarietà.

Dopo aver compilato tutti i campi, fare clic sul pulsante Ottenere il codice per generare il codice che installerai sul sito. La prima parte dello script è impostata sul tag pagina, e la seconda parte viene inserita nel punto in cui si desidera impostare il pulsante.

Il sito dovrebbe essere aperto in russo, ma se, per qualche strano motivo, è in inglese, puoi cambiare la lingua nella parte superiore della pagina.

Come installare?

Pulsante Tweet

Un altro pulsante noto su Twitter è "Tweet", che consente agli utenti di condividere i tuoi contenuti con i loro follower su Twitter.

Come installare?

Tutti i pulsanti di Twitter sono installati nella pagina degli sviluppatori sopra menzionata. Il processo per tutti i pulsanti è quasi identico: selezioniamo il tipo di pulsante desiderato, inseriamo i parametri e copiamo il codice, che poi incolliamo sul sito.

Pulsante hashtag

Questo è un pulsante molto interessante, che, sono sicuro, quasi nessuno conosce. Personalmente non ho mai visto nessuno in RuNet usarlo. Tuttavia, è molto buono per alcuni compiti. Ad esempio, tale pulsante può essere utilizzato per promuovere eventi, webinar, discussioni su Twitter sotto un determinato tag, campagne di marketing, concorsi. Sì, qualunque cosa! C'è molto spazio per la creatività qui!

È logico se il pulsante hashtag è installato su pagine relative a questo hashtag. Ad esempio, supponiamo che tu abbia scritto un articolo su uno nuovo che stai facendo per i fan su Twitter. Per partecipare al concorso è necessario utilizzare un hashtag specifico. Utilizzando un pulsante simile, semplificherai la vita a una persona, perché facendo clic su di esso, aprirà un tweet con l'hashtag desiderato. Può semplicemente aggiungere del testo e inviare il tweet liberamente fluttuante. E sta bene, e tu avrai un nuovo membro. Non è fantastico? In una parola, bisogna forgiare il ferro senza uscire dal registratore di cassa, cioè mentre il lettore è sotto l'emozione di ciò che ha letto. Due minuti dopo, sarà distratto e potrebbe dimenticare ciò che ha appena letto.

Mentre la mia immaginazione si scatena, condividerò un'altra idea con te. Diciamo solo che stai ospitando un evento (online o offline). Per promuoverlo, crei un articolo separato o una pagina dedicata a questo argomento. Proprio lì, nel testo, inserisci un pulsante "Hashtag" e accanto ad esso, inserisci un widget separato che visualizzerà, in tempo reale, tutti i tweet che utilizzano questo hashtag. Dopo aver visto la discussione di altri utenti, forse il tuo lettore poco attivo maturerà per prendervi parte. L'obiettivo qui è attirare l'attenzione del lettore su ciò che sta accadendo, coinvolgerlo nella discussione e, naturalmente, mantenerlo sul sito.

Come installare?

Il pulsante "Hashtag" è impostato tutto dalla stessa pagina di cui ho scritto sopra.

Pulsante Menzione

Infine, ti parlerò di un altro buon pulsante, che, purtroppo, nessuno usa. Ma invano! Si può dire che questo sia un normale tweet inviato a un profilo prestabilito. Penso che il pulsante sia poco utilizzato perché molti non sanno come e dove impostarlo. Ecco un paio di esempi che mi vengono in mente. Se sai che il tuo pubblico di destinazione è su Twitter e utilizza attivamente questo social. network, perché non incoraggi le persone a twittare direttamente dal sito? Potrebbe essere un tweet per l'autore di un articolo, un tweet da una pagina Informazioni o Contatti, un tweet direttamente al supporto di Twitter, ecc. Vedi quante opportunità ti stai perdendo per rendere attivo il tuo account Twitter?

Se una persona è venuta sul tuo sito, allora ha già un certo interesse per te, quindi devi spingerlo all'azione in questo momento. Tra un minuto potrebbe essere troppo tardi! Purtroppo, sono arrivati ​​tempi tali che ci dimentichiamo di fare qualcosa molto rapidamente, poiché spostiamo l'attenzione da uno all'altro ogni minuto. E più giovane è il tuo pubblico, più questo fenomeno si manifesta, quindi non dimenticare l'esistenza di questo pulsante e cerca di usarlo dove appropriato.

Come installare?

Installiamo il pulsante tutti dalla stessa pagina. Se leggi le istruzioni per i pulsanti precedenti, tutte le opzioni per il pulsante "Menzione" su Twitter dovrebbero esserti chiare.

Vedi sotto come funziona un tale pulsante. Non dimenticare di twittare cosa ne pensi di questo articolo 🙂 È importante per me sapere cosa pensano i miei lettori, quindi mi piacerebbe avere tue notizie.

Esempio di pulsante di menzione

Widget Twitter

Abbiamo scoperto i pulsanti di Twitter. Ora vorrei parlarvi brevemente dei widget ufficiali di Twitter. Script per tutti i widget, puoi ottenerlo collegamento.

I widget sono dei seguenti tipi:

• Widget regolare con gli ultimi tweet;
• Widget di ricerca, che mostra i risultati della ricerca per la chiave data in tempo reale. Questo tipo di widget è molto comodo per la ricerca, ad esempio, tramite il tuo hashtag brandizzato. Vedi un esempio del suo utilizzo nella sezione Pulsante Hashtag per Twitter;
• Widget Preferiti- Mostra i tweet che hai aggiunto ai tuoi preferiti. Questo tipo di widget può essere utilizzato, ad esempio, per mostrare feedback positivi su un'azienda. Perchè no?
• Widget Raccolte Le raccolte sono qualcosa tra i preferiti e gli elenchi. Puoi selezionare manualmente quali tweet verranno inclusi nella raccolta. Prendo atto che ogni collezione ha il suo collegamento e la sua descrizione. Questa funzione è molto poco utilizzata su Twitter, anche se è molto interessante.
• Elenchi widget mostra gli elenchi di profili che hai creato. Anche qui puoi essere creativo e fare qualcosa di interessante e utile per il lettore, che, allo stesso tempo, ti gioverà. Che ne dici di un elenco di partner, degli account della tua azienda (se ce ne sono molti), di un portafoglio di account Twitter che gestisci (per agenzie e liberi professionisti) o di un elenco di membri del tuo club, ad esempio? Ancora una volta, qui non c'è limite alla creatività.

Un esempio di un normale widget di Twitter

In contatto con

Il social network Vkontakte, come altri, ha un sacco di pulsanti e widget diversi. Un elenco completo di loro può essere visto sul sito Web degli sviluppatori: https://vk.com/dev/sites

Ancora una volta, esaminerò solo i più importanti, altrimenti questo articolo non sarà un articolo, ma un intero libro ... Penso che sarà molto più facile capire i widget VK, dal momento che il sito Web e tutta la documentazione necessaria sono disponibili anche in russo.

Pulsante Mi piace

Come installare?

Per prima cosa devi andare alla pagina del widget. Ho fornito un collegamento all'elenco dei widget all'inizio della sezione Vkontakte.

Come installare?

Per inserire il widget "Community" nel sito, devi prima di tutto inserire un link alla tua pagina o gruppo in Vkontakte. Successivamente, scegli se vuoi che il widget mostri i volti dei membri del gruppo o dei fan della pagina, nonché le ultime notizie dalla pagina, o se desideri un semplice plug-in con un pulsante "Mi piace" . Poiché il widget VK è molto simile a Facebook, le raccomandazioni relative al tipo di plug-in rimangono le stesse. Non mi ripeto, quindi se sei interessato dai un'occhiata alla sezione dei plugin di Facebook.

Poi ci sono i parametri relativi alla dimensione del plugin e al suo aspetto. Tutto dipende dalla tavolozza dei colori del tuo sito e dallo spazio disponibile per il plugin. In linea di principio, puoi scegliere qualsiasi colore, ma si consiglia comunque di mantenere la tavolozza dei colori originale, poiché tali colori sono più familiari agli utenti e non li spaventano. E infine, siamo arrivati ​​all'ultimo punto: inseriamo il codice nel sito. Come già ricordi, la prima parte del codice va nel tag pagina e la seconda parte al punto in cui si troverà il plugin.

Più di recente, ho creato una pagina del blog "Informazioni su SMM" in Vkontakte. Pertanto, se vuoi ricevere gli ultimi aggiornamenti in questo social. reti, quindi unisciti!

Esempio di plugin "Community" Vkontakte

Segui il widget dell'autore

Come il plug-in di Facebook dal nome simile, questo widget è consigliato a chiunque desideri far crescere il proprio marchio personale. Se sei, ad esempio, un autore di libri o un blog, un giornalista, un avvocato, un agente immobiliare, ecc., allora perché non installare un tale pulsante sul tuo sito web? È più facile per i potenziali acquirenti stabilire un contatto con una persona reale che, ad esempio, con una pagina o un gruppo di cui non è chiaro chi ci sia dietro. Questo è il modo in cui siamo organizzati, una persona è un essere sociale e amiamo il contatto personale, quindi un tale widget tornerà utile per qualsiasi professionista, indipendentemente dal campo in cui lavori.

Come installare?

Installarlo è facile! Vai alla pagina del widget in VK e inserisci l'indirizzo del tuo profilo. Quindi, scegli quale pulsante desideri installare. Ripeto ancora una volta che è auspicabile installare solo pulsanti tramite lo script (ad esempio un pulsante o un pulsante luminoso). Se hai solo bisogno di un link, allora è meglio farlo tramite codice HTML, in modo da non sovraccaricare il sito di script, senza i quali puoi facilmente farne a meno. L'effetto sarà lo stesso e il sito si caricherà più velocemente.

Altri widget Vkontakte

Ragazzi, sopra ho elencato i widget VK più comuni ed efficaci, ma l'elenco non si limita a questo. Vkontakte ha un sacco di diversi widget che possono essere utili in una determinata situazione. Per esempio, widget di sondaggio che quasi nessuno usa. Se hai creato un sondaggio sulla tua pagina VK, perché non inserirlo in un articolo correlato? I lettori del tuo sito potranno votare per la loro versione direttamente sul tuo sito e le informazioni su questo andranno anche a VK. Non male, vero?

C'è anche un interessante Widget "Consigli", che mette in evidenza gli articoli più interessanti sul tuo blog o sito web. Il grado di interesse per un determinato contenuto è determinato dal numero di clic sul pulsante "Mi piace". In una parola, Vkontakte conterà automaticamente quanti utenti hanno cliccato sui pulsanti "Mi piace" e raccoglierà tutti gli articoli più interessanti in questo blocco. Se il tuo pubblico di destinazione è ampiamente rappresentato nei social. Vkontakte, quindi dovresti provare a installare questi due widget: "Mi piace" e "Raccomandazioni". Sono sicuro che i risultati non ti faranno aspettare!

LinkedIn

Ora parliamo di - LinkedIn. Questa rete sta diventando sempre più popolare con noi, quindi non molte persone capiscono come può essere utilizzata per ottenere risultati positivi. In America, da dove proviene questa rete, sono pochi i professionisti o le aziende che non hanno un profilo LinkedIn. Lì ti guarderanno di traverso se almeno non sei registrato nel social. reti. In Europa, l'uso dei social le reti sono molto diverse a seconda del paese. Ad esempio, il Regno Unito e la Svezia stanno aprendo la strada all'integrazione di LinkedIn nelle strategie di marketing delle aziende. Non solo incoraggiano i dipendenti ad avere profili online, ma assumono anche persone tramite LinkedIn, pubblicizzano aziende e prodotti, cercano potenziali clienti e partner e così via.

Ma non ne parliamo oggi. Parleremo dei social plugin che LinkedIn ha sviluppato per noi e di dove e come possono essere utilizzati. Non affrettarti a dire che questa rete non ti interessa! E se lavori nel campo della consulenza, b2b, allora devi semplicemente leggere questa sezione.

Quindi, LinkedIn, come tutti i social network. reti, c'è una pagina separata in cui puoi vedere tutti i pulsanti e i plug-in esistenti: https://developer.linkedin.com/plugins

Il sito degli sviluppatori, purtroppo, esiste solo in inglese, quindi cercherò di spiegare l'installazione di ogni plugin e pulsante nel modo più dettagliato possibile.

Come installare?

Come installare?

Il pulsante "Iscriviti" è installato dalla stessa pagina degli sviluppatori, il link a cui ho dato all'inizio della sezione. Nella colonna di sinistra, fai clic su " segui compagnia” e LinkedIn ti mostrerà la sezione pertinente. Per prima cosa, seleziona che tipo di pulsante vuoi installare: con un contatore verticale o orizzontale o magari quello più comune e cliccaci sopra Prendilo. Successivamente, devi inserire il nome dell'azienda per cui stai impostando il pulsante. Nella casella appropriata, inizia a scrivere il nome, lettera per lettera, e dovrebbe apparire nell'elenco. A volte il caricamento dell'elenco richiede molto tempo, quindi prenditi il ​​tuo tempo. Il nome deve essere scritto esattamente come è scritto nella pagina aziendale. Quindi seleziona la lingua del pulsante: russo, il tipo di pulsante e fai clic sul pulsante " per ottenere il codice". Ora basta incollare il codice nel posto giusto sul sito e il gioco è fatto! In russo, a proposito, il pulsante si chiamerà "Traccia", cosa che non mi piace molto. Personalmente lascerei la versione inglese. Fortunatamente, tutti sanno già cosa significa la parola "segui" 🙂

Non ho ancora creato una pagina aziendale su LinkedIn, quindi non c'è ancora un vero esempio. Se in futuro realizzerò una pagina, la inserirò sicuramente come esempio nell'articolo.

Pulsante Profilo personale

Questo è un altro plugin buono, ma ancora poco utilizzato. Questo pulsante mostra la foto del profilo personale, il titolo e gli amici dell'utente che vede questo plugin. Naturalmente, affinché LinkedIn possa mostrare connessioni professionali a un lettore del tuo sito, lui - il lettore - deve essere loggato (se così posso dire) su LinkedIn. In breve, l'utente deve aver effettuato l'accesso a LinkedIn affinché il plug-in funzioni completamente.

A chi può essere utile questo plugin? Penso che per le persone che lavorano nel settore b2b sarà molto utile. Anche se puoi usarlo ovunque: sulla pagina degli autori del sito, sulla pagina sui dipendenti dell'azienda, sulle pagine sui tuoi clienti e partner (con il loro permesso, ovviamente) - ci sono molte opzioni. La cosa principale è che tali pulsanti del profilo si adattano organicamente al tuo sito Web e alla strategia aziendale. Se i tuoi dipendenti hanno profili pieni a metà, vai su LinkedIn una volta all'anno e hanno 10 connessioni, non ha senso esporre tali profili. Se la tua azienda, al contrario, è attivamente impegnata nella promozione sui social. reti, quindi un tale plugin può portarti molti vantaggi.

Pulsante +1

Come installare?

Come installare?

Tutti i pulsanti e i widget di Pinterest vengono installati dal link sopra. Per impostare il pulsante "Pin it", è necessario selezionare il pulsante appropriato nella colonna di sinistra.

I pulsanti di Pinterest sono un po' più complicati da configurare in quanto hanno molte opzioni diverse, ma è ancora del tutto possibile configurarli da soli.

1) Nella prima riga " Tipo di pulsante» puoi scegliere il tipo di pulsante che desideri installare sul sito: una determinata immagine, una qualsiasi immagine della pagina, oppure un pulsante Pin it che apparirà sulle immagini della pagina/articolo.

2) La seconda riga - " Aspetto“, ovvero l'aspetto del pulsante. Qui, Pinterest offre molte opzioni tra cui scegliere: grande o piccolo; rettangolare o rotondo; rosso, grigio o bianco; testo in inglese o giapponese.

3) La terza riga è il contatore. Qui puoi selezionare il bancone dall'alto, dal lato o rimuoverlo completamente.

A seconda del tipo di pulsante scelto, le sue opzioni cambieranno.

• Pulsante " un'immagine' implica che si desidera specificare un'immagine specifica che un lettore del sito può aggiungere per un collegamento specifico. Cioè, il lettore non avrà scelta, anche se ci sono altre immagini sulla tua pagina. Se decidi di impostare un'immagine per un pulsante, tale pulsante deve essere impostato separatamente per ciascuna pagina, poiché richiede un collegamento alla pagina/articolo. Nella prima colonna è necessario inserire un link alla pagina che gli utenti condivideranno, ovvero il link che applicheranno. Quindi, fornisci un collegamento all'immagine. Questa, tra l'altro, può essere qualsiasi fonte, anche al di fuori del tuo sito. Nell'ultima colonna è possibile specificare il testo dell'immagine che l'utente condividerà. Può essere, ad esempio, il titolo di una pagina o il titolo di un articolo. Prima di inviare il pin, l'utente, se lo desidera, potrà sostituire il proprio testo con il proprio.
• Pulsante " Qualsiasi immagine' o qualsiasi immagine. Questo pulsante è molto semplice e non richiede parametri aggiuntivi. Devi solo scegliere la dimensione e il tipo di bottone, e anche decidere se hai bisogno di un contatore o meno.
• Pulsante " immagine al passaggio del mouse“, ovvero un pulsante che apparirà sull'immagine stessa quando ci passi sopra con il cursore del mouse. Puoi provare come funziona nell'immagine di esempio di Pinterest.

Adesso qualche parola sul codice che devi impostare sulla pagina. Pinterest, come altri social media rete, ha due codici: la prima parte è inserita nel tag e la seconda parte al punto in cui è installato il pulsante stesso. Se hai più pulsanti Pinterest sulla stessa pagina, devi solo impostare il primo codice una volta.

Un esempio di codice che viene impostato solo una volta per tag pagine:.

Pulsante Iscriviti

Pinterest, come Google+, non distingue tra account personali e account aziendali, quindi il pulsante "Segui" per entrambi viene creato nello stesso posto. Questo pulsante è facile da installare. Tutto quello che devi fare è inserire il link del tuo profilo e nominare il pulsante.

Come ho scritto sopra, non posso incorporare i pulsanti di Pinterest a causa di un conflitto di script, quindi se vuoi farmi amicizia su Pinterest, segui questo link.

Bonus: collegamenti ipertestuali

Di seguito, fornirò esempi di come tali collegamenti vengono creati manualmente. Puoi anche provare uno speciale generatore di link: Share Link Generator. Su questo sito puoi creare link per Facebook, Twitter, Google+, Pinterest e LinkedIn. Sarà facile capire il sito, quindi non spiegherò cosa e come. Tuttavia, vedere il mio consiglio, poiché il generatore di collegamenti non fornisce un collegamento completo per il formato HTML + codice su come aprire il collegamento in una nuova finestra. Tutto questo più esempi di link per i social. Reti Vkontakte, troverai in questa sezione.

http://www.facebook.com/share.php?u= il tuo collegamento «> testo del collegamento ipertestuale

Probabilmente non sono rimasti siti su Internet che non siano stati ospitati pulsanti per la pubblicazione materiali sui social network. Questi ultimi hanno preso a lungo e saldamente un posto nelle nostre vite. Comunichiamo lì, ci conosciamo, promuoviamo affari, leggiamo notizie e così via. Una gamma completa di. Non sorprende che i webmaster stiano cercando di espandere la presenza sui social media dei loro siti con ogni mezzo disponibile. Dopotutto, ci sono tonnellate di traffico potenziale di cui tutti hanno assolutamente bisogno. Il flusso di visitatori è denaro, reputazione, crescita. Tutto è costruito intorno a lui. Pezzo dolce.

I pulsanti social sono essenziali, ovviamente. Un'altra domanda - quali scegliere? Abbiamo testato per te TOP 5 diversi servizi per aggiungere il codice del pulsante ai siti. L'obiettivo è identificare quello ottimale e mostrarlo in dettaglio. Cominciamo con il turno di qualificazione.

Scegliere il miglior servizio di social button

La scelta dei candidati per il confronto si è rivelata banale: abbiamo preso servizi più popolari , che sono stati ascoltati da qualsiasi persona che abbia in qualche modo familiarità con l'argomento della creazione di siti Web. Non sono rari, stanno guadagnando popolarità, solo vecchi esperti.

La composizione del team certificato è la seguente:

A seguito di test di servizi sociali selezionati - uSocial è il leader . Ora vuoi ottenere la motivazione della nostra scelta. Naturalmente, non rimarremo infondati.

Caratteristiche di uSocial Buttons

Portiamo alcuni fatti , che ci ha convinto della correttezza della decisione presa.

Il confronto verbale non sarà sufficiente per molti. Pertanto, abbiamo compilato tavola di comparazione pulsanti di uSocial e altri debuttanti (la scala di valutazione utilizzata va da 1 a 5). Tutti questi dati sono ottenuti durante il processo di test.

Ci auguriamo che l'analisi sia stata in grado di fugare i vostri dubbi sulla validità della nostra scelta. Oltre al bell'aspetto, i pulsanti social di uSocial sono di natura profondamente applicata, essendo uno strumento piuttosto potente per promuovere qualsiasi progetto.

Istruzioni su come installare i pulsanti dei social network sul sito

Per posizionare i pulsanti social da uSocial sul tuo sito, devi seguire alcuni semplici passaggi:

Passo 1

Passo 2

Assemblaggio di una serie di pulsanti sociali. Poter scegliere visualizzato servizi di social networking, pulsanti di forma e stile.

Qui puoi anche attivare il pulsante "Su", abilitare il supporto ai dispositivi mobili, collegare i servizi Viber, WhatsApp, Telegram, SMS.

Dopo aver completato tutte le operazioni, entrare l'indirizzo il tuo sito e clicca sul pulsante "Per ottenere il codice".

Passaggio 3

copia il codicesceneggiatura nella finestra che appare. Devi inserire il codice in quelle pagine della tua risorsa in cui hai bisogno di un pannello dei pulsanti social. Ad esempio, nel piè di pagina prima del tag di chiusura.

Passaggio 4

Dopo aver installato la barra sociale dal tuo account uSocial personale, puoi visualizzare Mi piace e ripubblica le statistiche per il periodo selezionato, sia per tutti i social network contemporaneamente, sia per quelli selezionati. I dati vengono visualizzati sotto forma di grafici o grafici chiari.

In conto personale uSocial tutto creato imposta e statistiche per i siti a cui erano collegati. In qualsiasi momento è possibile passare da un sito all'altro e analizzare i dati ricevuti dai contatori.

Come aumentare l'efficienza della barra sociale?

Se durante la ripubblicazione del materiale vengono visualizzate l'immagine e la descrizione sbagliate, è possibile indicare manualmente cosa, quanto e come deve essere visualizzato utilizzando speciali meta tag comprensibili da tutti i social network. In caso contrario, nei social network potrebbero essere visualizzate immagini e descrizioni casuali. Probabilmente non ne hai bisogno.

Se i social meta tag sono compilati correttamente, i post verranno correttamente percepiti dai servizi social, perché indicano il tipo di materiale, il titolo relativo e un link all'immagine desiderata. Tutto ciò aumenta l'efficienza del reposting: il tuo materiale è correttamente indicizzato dai servizi sociali.

Esempi codice di markup per i social network più diffusi (il codice va scritto prima del tag):

1. Facebook e In contatto con utilizzare il protocollo Open Graph:

3. Per Twitter il codice si presenta così:

4. Per Google+ Così:

- collegamento al profilo Google+ dell'autore
- Nome del sito
- snippet di testo (fino a 40 caratteri)
- descrizione del sito
- percorso del file immagine

Strumenti per lavorare con i microdati.

Ciao cari amici. L'articolo di oggi sarà dedicato alla creazione di un blocco di pulsanti social senza servizi e plugin. E questo blocco includerà anche pulsanti che consentono ai visitatori del sito di stampare la pagina, inviare un collegamento all'articolo tramite e-mail e aggiungere il tuo articolo ai segnalibri. Tali pulsanti possono essere trovati su quasi tutti i siti oggi. Solo ora vengono implementati utilizzando servizi o plugin. E ti mostrerò come farlo da solo.

Servizi che ho utilizzato sui siti dei clienti e sul mio blog - e . Questi servizi semplificano l'implementazione dell'attività.

Qual è il vantaggio dei tuoi pulsanti social rispetto a servizi e plug-in

1. Naturalmente, il fattore indiscutibile è la velocità di caricamento del sito. Quindi, ad esempio, il servizio PLUSO che utilizzo sul blog, nel migliore dei casi, aggiunge 633 millisecondi al carico.

E in questo blocco vengono utilizzate solo le immagini necessarie dei pulsanti social, combinate in . Tutti gli stili sono ridotti al minimo. Più un semplice framework html.

1. Il modo che propongo non contiene collegamenti esterni. No, ci sono collegamenti, ma saranno tutti come collegamenti interni. Se lo desideri, puoi sempre averli. E poi non li vedrai affatto.

1. Installazione molto semplice. Basta inserire il codice html del blocco nel codice sorgente della pagina del sito, caricare lo sprite, aggiungere stili css e l'installazione è completa. Devi solo correggere il percorso del file immagine del pulsante.
2. Questo elemento non è piuttosto né un vantaggio né un meno nella direzione del proprio blocco di pulsanti sociali. Il trucco è che il suo stesso blocco non ha un contatore di clic sui pulsanti. E questo può essere considerato un meno. Ma, d'altra parte, è possibile inserire ogni pulsante e saprai esattamente quante volte i tuoi visitatori hanno cliccato sui pulsanti e condiviso i tuoi articoli sui social network.
3. Le statistiche raccolte dai servizi sul tuo sito non saranno più cedute a terzi.

Inserimento di un blocco di social buttons nel codice sorgente

Considereremo la versione classica, quando i pulsanti si trovano dopo l'articolo.

Puoi farlo sia aprendo il file responsabile della visualizzazione degli articoli (single.php) e aggiungendo un blocco di pulsanti social al codice sorgente. In alternativa, questo può essere fatto tramite il file di funzione del tema (functions.php ).

Mostrerò entrambe le opzioni e tu scegli quella che fa per te.

Inserimento di un blocco nel codice sorgente single.php

Attenzione: fai una copia di backup del file single.php prima di procedere!

Apertura del pannello di amministrazione di WordPress "Aspetto" — "Editore" — "Voce singola (single.php)".

Nel codice sorgente, cerca il punto in cui finisce l'output dell'articolo e iniziano i commenti o l'impaginazione. È in questo posto che dovrai inserire il codice html del blocco dei pulsanti social.

Osserva attentamente lo screenshot, concentrati sui codici responsabili dell'output dell'articoloe commenti. E incolla il codice qui sotto.

Ovviamente, ci saranno alcune differenze nei tuoi modelli, ma sono sicuro che lo capirai, non c'è niente di complicato al riguardo. E inoltre, hai una copia di backup, non c'è nulla di cui aver paura.

Ed ecco il codice html del blocco dei social buttons:

Spiegazioni del codice: si tratta di un unico div con classe .share che contiene i link ai social network. Il collegamento si apre in una finestra pop-up separata, questa funzione onClick=window.open è responsabile di questo. La sostituzione di un collegamento a un articolo viene eseguita con questo codice. Ogni link ha una sua classe, attraverso la quale viene assegnata l'immagine del pulsante.

Questo completa l'inserimento tramite il codice sorgente. E poi devi aggiungere stili CSS.

Inserimento di blocchi nel codice sorgente single.php tramite le funzioni del tema

Attenzione: prima di iniziare, fai una copia di backup del tuo file functions.php!

Per utilizzare questa opzione, devi aprire il file functions.php e aggiungere questo codice alla fine:

/* Inserisci i pulsanti social */ add_action("comments_template","soc_button"); funzione soc_button() ( ?> E fai attenzione dopo aver incollato il codice non dovresti avere spazi o altri caratteri. O semplicemente chiudendo il codice php?>. In caso contrario, il sito smetterà di funzionare.

Spiegazioni del codice: il luogo in cui verranno posizionati i pulsanti dei social media è determinato dalla chiave API comments_template . Questa chiave determina il luogo prima dei commenti. Il codice del pulsante sociale stesso è racchiuso in tag posteriori per l'apertura e la chiusura di php. Nel codice li ho segnati in rosso. questo è tutto il trucco per inserire codice html in php, attraverso le funzioni del tema.

Finito questo e questo metodo, passiamo al caricamento delle immagini sul sito.

Caricamento delle immagini dei pulsanti sul server

Ad esempio, ho preparato diversi sprite con immagini di pulsanti social. Puoi scaricarli.

Lo sprite che sto usando come esempio è solo 3,97 kb e contiene solo i pulsanti necessari. E poiché questo è uno sprite, c'è solo una richiesta al database e non per ciascun pulsante separatamente.

Scarica le immagini o preparane di tue e caricale sul tuo sito. Penso che questo non dovrebbe essere un problema. Inoltre, sarà richiesto un collegamento a questo sprite per progettare pulsanti tramite gli stili CSS.

Compresi gli stili CSS

Naturalmente, questo passaggio può essere eseguito molto prima, ma preferisco prima fare tutto il complesso lavoro tecnico, quindi procedere alle piccole cose carine con gli stili CSS.

Quindi, apri il file style.css responsabile della progettazione del tuo sito. E incolla questi stili:

Condividi a ( display: inline-block; vertical-align: inherit; margin: 5px 0 0 2px; padding: 0px; font-size: 0px; width: 40px; height: 40px; background: url("http://test ..png ") scorrimento non ripetuto 0px 0px trasparente;) .share a.vkontakte ( sfondo: url("http://test..png ") scorrimento non ripetuto -168px 0px trasparente; ) .share a.google ( background: url("http://test..png ") no-repeat scroll -252px 0px transparent; ) .share a.livejournal ( background: url("http://test..png ") no-repeat scroll -336px 0px transparent; ) .share a.twitter ( background: url("http://test..png ") scroll no-repeat -42px 0px transparent; ) .share a.mail ( background: url("http ://test..png ") scorrimento non ripetuto -294px 0px trasparente; ) .share a.odnoklassniki ( sfondo: url("http://test..png ") scorrimento non ripetuto -126px 0px trasparente; ) .share a.pinterest ( background: url("http://test..png ") no-repeat scroll -210px 0px transparent; ) .share a.liveinternet ( background: url("http://test..png ") scorrimento senza ripetizione -378px 0px trasparente; ) .share a.evernote ( background: url("http://test..png ") no-repeat scroll -420px 0px transparent; ) .share a.bookmark ( background: url("http://test.. png ") scorrimento non ripetuto -462px 0px trasparente; ) .share a.email ( background: url("http://test..png") scorrimento non ripetuto -504px 0px trasparente; ) .share a.print ( background: url("http://test..png ") scroll no-repeat -546px 0px transparent; ) .share a.digg ( background: url("http://test..png ") scroll no-repeat -588px 0px trasparente; ) .share a.spring ( sfondo: url("http://test..png") scorrimento no-repeat -630px 0px trasparente;)

Spiegazioni del codice: la classe .share definisce l'aspetto generale del blocco, la dimensione di ciascun pulsante, il riempimento e imposta uno sfondo uniforme. E poi ogni collegamento ha la sua classe ea ciascuno di questi collegamenti, tramite la proprietà background, viene assegnato l'aspetto di un pulsante. I pulsanti vengono visualizzati come uno sprite CSS e ogni pulsante è largo 40px e alto 40px, con un riempimento di 2px tra di loro, consentendo di definire accuratamente l'immagine per ciascun pulsante. Cioè, il primo pulsante è specificato come 0, il secondo come 42 e così via. Nel codice, questi valori sono indicati in arancione. Anche il collegamento allo sprite è evidenziato in arancione, lo cambi nel percorso del tuo sprite.

Questo completa l'intero processo di creazione del tuo blocco di pulsanti social. Puoi tranquillamente procedere alla verifica.

E ho anche un video tutorial in cui viene mostrato visivamente l'intero processo, il palo mostra il funzionamento dei pulsanti stessi. Guarda e implementa sui tuoi siti Web e blog.

Ora è tutto. Ha affrontato il compito. Vi auguro buona fortuna e ci vediamo in nuovi articoli e video tutorial.

Ci sono molti modi per aggiungere i pulsanti dei social network al sito ora, c'è una scelta e piace. I pulsanti social svolgono un ruolo importante sulla pagina, con il loro aiuto, come molti già sanno, puoi ripubblicare rapidamente qualsiasi voce in uno dei social network selezionati. I pulsanti social per il sito ora sono posizionati ovunque e ovunque, ma a volte nel posto sbagliato.

Pulsanti social per il sito

Molte persone sanno già quanto sono sviluppati i social network ora e quanto è bello se il tuo sito ha tali pulsanti con i quali puoi aggiungere il tuo post preferito o parte di un post alla tua bacheca. Con questa azione, non solo commenti o riposti i messaggi, ma dai anche un segnale aggiuntivo ai motori di ricerca.

Il sogno di ogni proprietario di un sito, se tutti i suoi post vengono ripubblicati dai lettori sulle loro pagine in uno dei social network. Ora soprattutto c'è una richiesta per Vkontakte, Facebook, Twitter e Odnoklassniki. Aggiungerei anche LiveJournal, liveinternet e Blogger. È auspicabile aggiungere questi pulsanti al sito per la completa comodità dell'utente.

Soprattutto Twitter oggi merita sempre più attenzione, con il suo aiuto le tue nuove pubblicazioni appaiono più velocemente nell'indice dei motori di ricerca.

Se sei il proprietario del sito, molto probabilmente dovresti avere un account liveinternet o LiveJournal. Per non aggiungere ogni volta nuove voci a questi servizi, la presenza dei loro pulsanti fa risparmiare tempo. Inoltre, molte persone utilizzano questi servizi e potrebbero anche voler ripubblicare la tua annotazione nel loro diario.

Esistono diversi modi migliori per aggiungere rapidamente pulsanti social a un sito. Puoi farlo con l'aiuto di servizi online che ti aiuteranno rapidamente e facilmente in questo. Oppure direttamente attraverso ciascun social network separatamente. Qui ognuno ha la sua scelta. Prima avevo i pulsanti aggiunti separatamente attraverso ogni social network, ora li ho installati utilizzando il servizio.

C'è un tale servizio, si chiama condividi42. È stato scritto molto materiale su di lui, quanto è bravo e come usarlo. Buono, ma per l'utente medio che non ne capisce nulla, sarà difficile gestirlo.

Per un'occupazione così piccola, copiare le cartelle sull'hosting e poi fare il bagno con gli stili, ora non guida più. Ci sono altre opzioni in cui è necessario copiare e incollare il codice già finito senza cartelle aggiuntive. Quindi dimentica questo servizio.

Aggiungi solo i pulsanti di social network più basilari che la maggior parte usa, non scolpire dozzine di pulsanti dimenticati non necessari.

Cosa puoi usare oggi per aggiungere pulsanti social per il sito:

1. Servizio impeccabile.
2. Pulsanti sociali Yandex.
3. Aggiungendo manualmente ogni social network separatamente.
4. Più servizio.
5. Utilizzo di plugin per WordPress (per i più pigri).

Probabilmente non hai bisogno di intrometterti da nessun'altra parte, non puoi trovare modi migliori. Ognuna di queste opzioni è buona a modo suo. Se conosci un modo più conveniente o attraente, scrivi nei commenti.

I pulsanti dei social network devono essere inseriti alla fine di ogni articolo in modo che dopo la lettura, il visitatore del sito possa opzionalmente ripubblicare la tua immissione. Non dovrebbe cercarli da qualche parte alla fine della pagina. I posti più ottimali, secondo me, dove posizionare tali pulsanti sono nella barra laterale e immediatamente alla fine di ogni voce.

Uptolike

Al momento io stesso utilizzo questo servizio, mi è piaciuto. Oltre alla comodità, il servizio uptolike ha diversi privilegi rispetto ad altri del suo genere.

• Ampia scelta tra i pulsanti dei social media;
• Pulsanti adattati per dispositivi mobili;
• La possibilità di citare qualsiasi parte del testo nel social network;
• Puoi aggiungere un pulsante in alto;
• La possibilità di aggiungere una finestra pop-up per un abbonamento al gruppo Vkontakte;
• Scelta della dimensione delle icone;
• Scegliere lo stile delle icone per il sito;
• Aggiungi l'effetto al passaggio del mouse;
• Cambia lo sfondo del pulsante, il colore del testo, lo sfondo del contatore;
• Aumenta o diminuisci il testo nel contatore.

I privilegi rispetto ad altri servizi simili sono sufficienti per utilizzarlo. In questo caso, viene aggiunto solo un piccolo codice sotto forma di uno script e un paio di righe con gli stili. Allo stesso tempo, non esiste alcun collegamento estraneo, l'ho verificato tramite il servizio dei collegamenti in uscita. Se sbaglio, puoi correggermi.

A parte questo, cos'altro può fare il servizio uptolike.

Le impostazioni più importanti Scegli quali pulsanti social per il sito vuoi vedere. Se necessario, puoi aprire l'elenco e selezionarne altri dalla maggioranza. Seleziona la casella per il supporto. Successivamente, sui telefoni cellulari, i pulsanti dei social network verranno sempre visualizzati nella parte inferiore dello schermo.

Scegli la posizione orizzontale dei pulsanti, la dimensione e lo stile. Decora come preferisci e aggiungi un effetto al passaggio del mouse. Non è necessario fare altro. Per generare un codice contatore, è necessario specificare l'indirizzo del sito Web e la casella di posta. Subito dopo comparirà un codice per l'inserimento dei pulsanti social nel sito.

Se hai un sito WordPress, apri il file single.php e incolla il codice finito subito dopo la fine del contenuto della pagina. Aggiorna la pagina e guarda cosa succede. Non c'è niente di difficile.

Yandex

Selezionare le icone di servizio desiderate. Twitter è solo sotto forma di icone, senza contatori. Selezioniamo l'aspetto dei blocchi e sotto ci sarà un codice già pronto per l'inserimento. Come accennato in precedenza, Yandex non aggiunge altro, tutto è modesto e di buon gusto.

Metodo di aggiunta manuale

In questo metodo, è necessario aprire ogni social network separatamente e configurare ogni pulsante di repost separatamente. Per aggiungere un pulsante Facebook, devi andare qui. Per i compagni di classe e il mio mondo, devi aggiungere dati. Per Twitter, tutto accade su . Per aggiungere un pulsante Vkontakte, vai a questa pagina .

Avrai codice già pronto solo dai social network, senza script aggiuntivi. Probabilmente il modo migliore per aggiungere pulsanti di social media a un sito web. La difficoltà sta nel fatto che è necessario tagliare ogni pulsante separatamente, quindi incollare tutto in un posto e utilizzare gli stili CSS per allinearlo in una colonna. Se non hai problemi con questo, puoi provare.

In contatto con

Per aggiungere un pulsante Vkontakte, fai clic su Collega siti e widget, di seguito ci sarà un elenco completo di tutte le possibili aggiunte. C'è anche la possibilità di aggiungere commenti alla pagina, scrivere sulla bacheca, aggiungere il tuo gruppo, consigli, sondaggi, iscriversi all'autore e pubblicare link. Nel nostro caso, seleziona Pubblica link.

Non c'è niente di complicato, selezioniamo lo stile del pulsante (con o senza contatore), scriviamo il testo sul pulsante, l'opzione logo e in basso ci sarà un codice di incorporamento già pronto. Io stesso ho utilizzato questo metodo di aggiunta manuale, ma al momento sto provando un servizio di terze parti. Vediamo cosa succede. Se non mi soddisfa, tornerò immediatamente al metodo manuale.

più

Un altro modo per aggiungere pulsanti a un sito è con Servizio in più. Anche il servizio non è male, molti ne hanno notato i pulsanti. La scelta delle opzioni di design è ampia, oltre all'amatore ci sono immagini di grandi dimensioni. La possibilità di aggiungere reti non è in alcun modo inferiore rispetto ad altri servizi simili. L'installazione non richiede alcun file, solo codice.

Scegli qualsiasi stile di design e aggiungi i servizi necessari. Un po' più in basso verrà mostrato un esempio già pronto di come apparirà tutto questo sulla pagina. Le icone possono essere impostate su grande, media o piccola. Anche icone quadrate per il sito o rotonde, su una o due righe, orizzontali o verticali. Con o senza contatore, senza sfondo o imposta lo sfondo in modo che corrisponda al design del tuo sito web.

Dopo tutti questi passaggi, sotto ci sarà un codice già pronto per l'inserimento nella pagina. Se devi inserire nella pagina principale, stiamo curiosando nel file index.php, se in tutti i tuoi post aggiungiamo il codice al file single.php subito dopo la fine del post.

WordPress

Se non capisci nulla in questo codice, cosa deve essere copiato dove e come funziona, c'è una via d'uscita. Se hai un motore WordPress, puoi installare un plug-in che ti fornirà i pulsanti dei social media. Oggi ci sono solo un gran numero di tali plugin. Vai al pannello di amministrazione - Plugin. Puoi scrivere immediatamente nella ricerca dei plugin "pulsanti sociali", "social" o "VKontakte". Sono sicuro che troverai qualcosa.

Tra la maggior parte di tali plugin simili per WordPress, guardando la valutazione, questi sono i più messi:

1. Pulsanti di condivisione sociale per WordPress.
2. sociale.
3. Social Media Feather: leggera condivisione sui social media e pulsanti segui.

In effetti, ci sono molti di questi plugin, devi installare e scegliere quello che ti piace di più, funziona correttamente, cosa mostra e come puoi personalizzarlo da solo. Diamo un'occhiata all'esempio del primo plug-in Social Share Buttons per WordPress.

Il plugin stesso è in russo, non ci saranno problemi con questo. Dopo l'installazione, nel menu a sinistra apparirà un nuovo pulsante "Condividi pulsanti". Nelle impostazioni principali mettiamo il logo del sito e scriviamo il testo davanti ai pulsanti social.

Assicurati di attivare la generazione di metadati, verranno inclusi il titolo e la descrizione della pagina. Allinea i pulsanti orizzontalmente e scegli dove saranno. Scegliamo solo nei post. Facoltativamente, puoi escludere le pagine necessarie. In fondo, devi specificare il soprannome nel tritter.

Nella scheda successiva, Condividi impostazioni, seleziona lo stile dei pulsanti. Di seguito puoi attivare o disattivare i social network non necessari e aggiungere rientri per l'intero blocco sopra o sotto. Non è necessario inserire alcun codice aggiuntivo da nessuna parte, il plug-in farà tutto per te.

A te la scelta del metodo che utilizzerai. Aggiungi le icone dei social media tramite uptolike, Pluso o tramite Yandex. Non dovresti installare subito il plugin su WordPress, prova a fare tutto manualmente o con l'aiuto di un servizio.

Se conosci qualche altro buon servizio o un modo per aggiungere pulsanti social per il sito, ti sarò grato per il commento.