Condividi sui social network. Inserimento di un blocco di pulsanti social nel codice sorgente

Probabilmente non ci sono siti su Internet che non siano ospitati. pulsanti di pubblicazione materiali ai 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 loro presenza sui social media da qualsiasi metodi disponibili... Dopotutto, ci sono tonnellate di traffico potenziale di cui tutti hanno bisogno. Il flusso di visitatori è denaro, reputazione, crescita. Tutto è costruito intorno a lui. Un gustoso boccone.

I social button sono necessari, ovviamente. La domanda è un'altra - quali scegliere? Abbiamo testato per te TOP 5 vari servizi per aggiungere il codice del pulsante ai siti. L'obiettivo è identificare quello ottimale e mostrarlo in dettaglio. Cominciamo con la fase di qualificazione.

Scegliere il miglior servizio di pulsanti social

La scelta dei candidati per il confronto si è rivelata banale: abbiamo preso più servizi popolari , di cui ha sentito parlare chiunque abbia familiarità con l'argomento della creazione di siti web. Non raro, guadagnando popolarità, solo persone anziane con esperienza.

La composizione della squadra degli attestati è la seguente:

Come risultato del test selezionato servizi sociali – il leader era uSocial ... Ora vorresti ricevere una giustificazione per la nostra scelta. Naturalmente, non rimarremo infondati.

Caratteristiche dei pulsanti uSocial

diamo alcuni fatti che ci ha convinto della correttezza della decisione.

Il confronto verbale non sarà sufficiente per molti. Pertanto, abbiamo compilato tabella comparativa pulsanti di uSocial e altri debuttanti (la scala di valutazione utilizzata è da 1 a 5). Tutti questi dati sono stati ottenuti durante i test.

Ci auguriamo che l'analisi effettuata sia stata in grado di fugare i vostri dubbi sulla validità della nostra scelta. Oltre al bell'aspetto, i pulsanti social di uSocial sono profondamente applicati in natura, essendo abbastanza strumento potente per promuovere eventuali progetti.

Istruzioni su come installare i pulsanti dei social media su un sito web

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

Passo 1

Passo 2

Mettere insieme un set pulsanti social... Poter scegliere visualizzato Servizi social networks, forma e stile dei pulsanti.

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

Dopo aver completato tutte le operazioni, inserisci 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 di pulsanti social. Ad esempio, nel piè di pagina prima del tag di chiusura.

Passaggio 4

Dopo aver installato la barra social dal tuo account personale uSocial, puoi visualizzare statistiche di like e repost per il periodo selezionato, sia contemporaneamente per tutti i social network, sia per quelli selezionati. I dati vengono visualizzati sotto forma di grafici o tabelle di facile comprensione.

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

Come aumentare l'efficienza di un bar sociale?

Se vengono visualizzate l'immagine e la descrizione sbagliate quando si ripubblica il materiale, è possibile indicare manualmente cosa, quanto e come deve essere visualizzato utilizzando speciali meta tag comprensibili a tutti i social network. In caso contrario, nei social network potrebbero essere visualizzate immagini e descrizioni casuali. È improbabile che tu ne abbia bisogno.

Se i meta tag social sono compilati correttamente, i post saranno correttamente percepiti dai servizi social, perché indicano il tipo di materiale, un titolo pertinente, un link a immagine desiderata... Tutto ciò aumenta l'efficienza del reposting: il tuo materiale sarà correttamente indicizzato dai servizi sociali.

Esempi di codice microdati per i social network più diffusi (il codice deve essere scritto prima del tag):

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

3. Per Twitter il codice è simile a questo:

4. Per Google+ Così:

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

Utensili per lavorare con il micro-markup.

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 i pulsanti che consentono ai visitatori del sito di stampare la pagina, inviare il link dell'articolo a e-mail e fai un mutuo sul tuo articolo. Tali pulsanti possono essere trovati su quasi tutti i siti Web oggi. Solo ora vengono implementati utilizzando servizi o plugin. E ti mostrerò come farlo da solo.

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

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

1. Naturalmente, la velocità di caricamento del sito Web è un fattore indiscutibile. Quindi, ad esempio, il servizio PLUSO che utilizzo su un 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 metodo che suggerisco non ne contiene link esterno... No, ci sono collegamenti, ma saranno tutti come collegamenti interni. Puoi sempre averli se vuoi. E poi non saranno affatto visibili.

1. Molto installazione facile... È sufficiente inserire il codice html del blocco in fonte pagine del sito, carica sprite, aggiungi stili CSS e l'installazione è completa. Hai solo bisogno di correggere il percorso del file con le immagini dei pulsanti.
2. Questo elemento non è piuttosto un vantaggio o un meno nella direzione del proprio blocco di pulsanti sociali. Il trucco è che il proprio blocco non ha un contatore di clic sui pulsanti. E questo può essere considerato un meno. Ma, d'altra parte, è possibile mettere su 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 web non saranno più trasmesse a terzi.

Inserimento di un blocco di pulsanti social nel codice sorgente

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

Questo può essere fatto sia aprendo il file responsabile della visualizzazione degli articoli (single.php) sia aggiungendo un blocco di pulsanti social al codice sorgente. In alternativa, può essere fatto tramite il file functions 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

Avvertenza: prima di iniziare tutte le azioni, eseguire backup singolo file.php!

Noi apriamo Pannello di Amministrazione WordPress - "Aspetto esteriore" — "editore" — "Una voce (single.php)".

Nel codice sorgente, cerca il punto in cui termina l'output dell'articolo e iniziano i commenti o la navigazione pagina per pagina. Questo è il punto in cui dovrai inserire il codice html del blocco dei pulsanti social.

Guarda attentamente lo screenshot, lasciati guidare dai codici responsabili dell'output dell'articoloe commenti... E incolla il codice qui sotto.

Naturalmente, ci saranno alcune differenze nei tuoi modelli, ma sono sicuro che lo capirai, non c'è niente di difficile in questo. E inoltre, hai un backup, niente di cui aver paura.

Ed ecco il codice html del blocco dei pulsanti social:

Spiegazioni sul codice:è un blocco DIV con class.share, che contiene collegamenti 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 link ad un articolo si effettua con questo codice... Ogni collegamento ha la propria classe attraverso la quale viene assegnata l'immagine del pulsante.

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

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

Attenzione: prima di iniziare a lavorare, 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 e altri caratteri. O semplicemente chiudendo il codice php?>. In caso contrario, il sito smetterà di funzionare.

Spiegazioni sul codice: il luogo in cui verranno visualizzati i pulsanti dei social media è definito tramite la chiave API comments_template. Questa chiave viene utilizzata per determinare il posto prima dei commenti. Il codice dei pulsanti sociali stesso è racchiuso in tag di apertura inversa e chiusura php... Nel codice, li ho contrassegnati in rosso. Questo è l'intero trucco dell'inserimento codice html in php tramite le funzioni del tema.

Finito questo e questo metodo, procediamo 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.97kb e contiene solo i pulsanti di cui hai bisogno. E poiché questo è uno sprite, c'è solo una richiesta al database e non per ogni pulsante separatamente.

Scarica immagini o preparane di tue e caricale sul tuo sito. Penso che non dovrebbero esserci problemi con questo. Inoltre, il collegamento a questo sprite sarà necessario per decorare i pulsanti tramite stili CSS.

Compresi gli stili CSS

Certo, questo passaggio può essere eseguito molto prima, ma preferisco eseguire tutto il difficile lavoro tecnico, e solo allora procedi a piccole cose piacevoli con gli stili css.

Quindi, apri il file style.css, che è responsabile del design del tuo sito. E inserisci 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 senza ripetizione 0px 0px trasparente;) .share a.vkontakte (sfondo: url (" http: //test..png ") scorrimento senza ripetizione -168px 0px trasparente;) .share a.google (sfondo: url ("http: //test..png") no-repeat scroll -252px 0px trasparente;) .share a.livejournal (sfondo: url ("http: //test..png") no-repeat scroll -336px 0px trasparente;) .share a.twitter (sfondo: url ("http: //test..png") no-repeat scroll -42px 0px trasparente;) .share a.mail (sfondo: url ("http : //test..png ") scorrimento senza ripetizione -294px 0px trasparente;) .share a.odnoklassniki (sfondo: url (" http: //test..png ") scorrimento senza ripetizione -126px 0px trasparente;) .share a.pinterest (sfondo: url ("http: //test..png") no-repeat scroll -210px 0px trasparente;) .share a.liveinternet (sfondo: url ("http: //test..png ") scorrimento senza ripetizione -378px 0px trasparente; ) .share a.evernote (sfondo: url ("http: //test..png") no-repeat scroll -420px 0px trasparente;) .share a.bookmark (sfondo: url ("http: // test .. png ") scorrimento senza ripetizione -462px 0px trasparente;) .share a.email (sfondo: url (" http: //test..png ") scorrimento senza ripetizione -504px 0 px trasparente;) .share a.print ( sfondo: url ("http: //test..png") scorrimento senza ripetizione -546px 0px trasparente;) .share a.digg (sfondo: url ("http: //test..png") scorrimento senza ripetizione -588px 0px trasparente;) .share a.spring (sfondo: url ("http: //test..png") scorrimento senza ripetizione -630px 0px trasparente;)

Spiegazioni sul codice: class.share definisce forma generale blocco, dimensione di ogni pulsante, riempimento e imposta un unico sfondo. E quindi ogni collegamento ha la sua classe e a ciascuno di questi collegamenti, tramite la proprietà background, viene assegnato l'aspetto del pulsante. I pulsanti sono progettati come sprite css e ogni pulsante ha una larghezza e un'altezza di 40 pixel, con un'imbottitura di 2 pixel in mezzo, che consente di definire con precisione l'immagine per ciascun pulsante. Cioè, il primo pulsante è indicato come 0 e il secondo come 42 e così via. Nel codice sono indicati questi valori 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 al controllo.

E ho anche un video tutorial in cui viene mostrato chiaramente l'intero processo, l'asta mostra il funzionamento dei pulsanti stessi. Guarda e incorpora nei tuoi siti e blog.

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

V Di recenteÈ diventato di moda installare i pulsanti dei social media su siti Web e blog, e questo non è sorprendente. In primo luogo, i pulsanti consentono di aumentare i "mi piace" e i "cuori", il che ha un effetto positivo sulla promozione degli articoli nei social network. In secondo luogo, esistono tipi separati di pulsanti che consentono di condividere collegamenti a pagine separate sito sui social network: questo attira ulteriori visitatori da Vkontakte, Facebook, Odnoklassniki, Twitter, ecc. Terzo, gli articoli digitati un gran numero di"Mi piace" e "cuori" sono molto apprezzati dai lettori del sito.

Pertanto, è molto importante sapere come installare i pulsanti dei social media sul tuo sito web per aiutare lo sviluppo del tuo sito web. Verranno recensiti i social network più popolari

• In contatto con
• Facebook
• compagne di classe
• Google "+1"
• Twitter
• Il mio mondo

L'installazione sarà trattata qui pulsanti standard offerti dai social network stessi. In questo caso, ogni pulsante dovrà essere installato separatamente dagli altri, ci vuole del tempo, ma sembra anche molto buono.

1.1. In contatto con

1.1.1 Pulsante Salva

Il pulsante è abbastanza flessibile, la scritta su di esso può essere cambiata con quella desiderata (per impostazione predefinita "salva").

Per prima cosa devi andare alla pagina con, dove riceverai anche il codice script che dovrai installare sul tuo sito affinché il pulsante venga visualizzato.

Qui puoi scegliere uno dei 5 stili: pulsante, pulsante senza contatore, collegamento, collegamento senza icona, icona.

Campo " testo"Ti consente di modificare l'etichetta" salva "standard con la tua.

Come url, puoi selezionare l'indirizzo della pagina con il pulsante, o l'indirizzo di un'altra pagina (a tua scelta). Nel primo caso, il pulsante condividerà un collegamento alla pagina in cui si trova il pulsante stesso. Nel secondo caso, il pulsante condividerà il collegamento specificato, indipendentemente da dove si trova.

Codice di incorporamento si compone di due parti : il primo dovrebbe trovarsi ovunque tra i tag e, il secondo è nel punto in cui dovrebbe essere visualizzato il pulsante. Leggi l'installazione del pulsante sul sito nel paragrafo .

1.1.2 Pulsante Mi piace

La seconda versione del pulsante è il widget " mi piace". Sarà più facile installarlo sul sito, perché alla fine otterrai solo un pezzo di codice che devi inserire il posto giusto luogo.

Per personalizzare il pulsante, vai su questo link... Anche qui è necessario inserire una serie di parametri.

Nome del sito- è meglio indicare qui il nome breve e reale del tuo sito.

Indirizzo Web- inserisci l'indirizzo home page il tuo sito.

Dominio del sito principale- indica il mirror principale del sito (può essere trovato come parametro dell'operatore "Host"), se trovi difficile farlo, lascia il VKONTAKTE proposto.

Opzioni del pulsante- questi sono diversi stili del pulsante, ne influenzano l'aspetto.

Altezza pulsante- dimensioni geometriche "mi piace".

Nome del pulsante- ci sono due opzioni disponibili (mi piace, è interessante).

Codice di incorporamento- il codice necessario per visualizzare il pulsante del social network Vkontakte.

1.2 Facebook

Configura il pulsante in questa pagina. Possono sorgere difficoltà come i commenti sul modulo sono scritti in lingua inglese ma sotto puoi leggere breve descrizione ogni campo.

URLaPiace- indirizzo url della pagina per il pulsante (se il campo non è compilato, verrà preso l'indirizzo della pagina in cui si trova il pulsante).

SpedirePulsante- la presenza di un segno di spunta comprende nuova opportunità- inviare un collegamento a Facebook (visualizzato pulsante aggiuntivo- "Inviare"). Quando abilitato, verranno visualizzati due pulsanti contemporaneamente.

Stile di layout- lo stile del pulsante, ne influenza l'aspetto (è considerato standard pulsante_contare).

Larghezza- la larghezza del pulsante in pixel.

Mostra facce- quando abilitato, verranno mostrati gli avatar delle persone che hanno già cliccato su questo pulsante.

Font- tipo di carattere del pulsante.

Combinazione di colori- lo sfondo dello spazio accanto al pulsante (bianco e nero).

Verbo da visualizzare- nome del pulsante (mi piace, lo consiglio).

OttenereCodice- il pulsante che genera il codice dello script.

1.3 Compagni di classe e il mio mondo

Questi social network hanno guadagnato un'ampia popolarità in Internet in lingua russa, un numero enorme di persone vive lì, quindi non dovresti trascurare l'installazione del pulsante "Classe" dal servizio Odnoklassniki e "Mi piace" dal sito "Il mio mondo".

Per configurare i pulsanti, devi andare su. Puoi aggiungere pulsanti separatamente, personalizzandoli ciascuno a modo suo, oppure puoi modificare entrambi i pulsanti contemporaneamente.

Dimensioni dell'altezza- la dimensione geometrica dei bottoni.

Visualizzazione- l'aspetto della cornice del pulsante.

- scelta dei pulsanti (mi piace, classe)

Contatore- accendere e spegnere il contatore della pressione dei pulsanti (a destra, in alto - la posizione del contatore).

Testo sui pulsanti- selezione di uno dei tre nomi disponibili per i pulsanti.

Codice di incorporamento- codice script che dovrà essere installato sul sito.

1.4 Google "+1"

Un nuovo social network che ha conquistato un vasto pubblico in poco tempo. È difficile immaginare un sito senza il pulsante "+1", perché non solo permette di aggiungere link al social network e aumentare il numero di "segni più", ma può anche influenzare i risultati del sito nella TOP motore di ricerca Google.

Tutti i dettagli su questo, così come l'installazione e la configurazione del pulsante si trovano.

1.5 Twitter

Il servizio più popolare brevi messaggi non può essere ignorato. Imposta un pulsante da questo social network e guarda quanto velocemente le persone condivideranno i link al tuo sito su Twitter. Puoi personalizzare il pulsante su questo.

Per prima cosa devi scegliere pulsante desiderato(siamo interessati alla prima opzione - il pulsante "invia collegamento").

Successivamente, nella pagina verrà visualizzato un modulo con diversi campi che è necessario compilare.

Invia il link- selezione della pagina in cui si trova il pulsante, o qualsiasi altra.

Testo- selezione del testo che apparirà accanto al pulsante (NON SUL PULSANTE stesso).

Mostra contatore- abilitare o disabilitare il conteggio del numero di pressioni dei pulsanti.

attraverso- la scelta della modalità di aggiunta del messaggio di collegamento a Twitter (praticamente non influisce su nulla).

marchio- la scelta di un'etichetta che verrà pubblicata su Twitter (praticamente non influisce su nulla).

Pulsante grande- aumentare la dimensione geometrica del bottone.

Rifiutati di adattare Twitter- rifiuto degli stili di Twitter (è meglio lasciare il campo deselezionato).

Lingua- selezione della lingua dei pulsanti.

Sulla destra verrà generato un codice che deve essere aggiunto al sito.

1.6 Ya.ru

Per fare ciò, è necessario compilare diversi campi che andranno a formare codice richiesto sceneggiatura.

La dimensione- piccolo o grande taglia pulsanti.

Stile- scelta tra un pulsante o un'icona.

Disponibilità del contatore- accendere o spegnere il contatore della pressione del pulsante.

Aspetto del pulsante- un esempio di come apparirà il pulsante.

Intestazione- selezione di un titolo per la pagina (arbitrario o il titolo della pagina corrente).

Codice di incorporamento- il codice richiesto che viene aggiunto al sito.

2. Pulsanti pronti per il sito

Ma se non desideri aggiungere il codice di ciascun pulsante al tuo sito, puoi utilizzare script standard che formano immediatamente un gruppo di pulsanti dei social media. In questo caso, è sufficiente aggiungere un codice di tale script al tuo sito e avrai immediatamente installato i pulsanti dei social network più popolari.

Per configurare il blocco e selezionare i social network desiderati, segui questo link. Lo screenshot seguente mostra che è possibile selezionare i pulsanti dei social network desiderati tra quelli proposti, nonché modificare leggermente l'aspetto del blocco.

Set di servizi- selezione dei pulsanti di social network per il sito (quelli con un segno di spunta verranno visualizzati sul sito).

Il codice – lo script che vuoi da aggiungere al sito.

2.2 Pulsanti PLUSO

Recentemente, il costruttore di pulsanti per social media PLUSO ha guadagnato una grande popolarità. Puoi andare al sito usando questo link.

Il costruttore è abbastanza flessibile, ha molte impostazioni, quindi puoi creare pulsanti di social media in modo tale che si adattino perfettamente al design del sito.

Innanzitutto, è necessario scegliere lo stile di pulsanti e contatori tra diversi offerti (orizzontale, verticale, colorato, incolore, ecc.).

Quindi è necessario configurare un numero di parametri scegliendo

• posizione del blocco (verticale, orizzontale);
• colore del pulsante (chiaro, scuro);
• dimensione del blocco (grande, piccolo);
• contatore (presenza o assenza);
• sfondo (incolore o colorato);

Il codice verrà generato secondo i parametri da te specificati, dopodiché dovrà essere inserito nel sito.

Slepre42

Un altro servizio che ti consente di progettare pulsanti per il tuo sito è Share42.com/ru.

Questo generatore ti consente di personalizzare la dimensione dei pulsanti, definire i social network desiderati dall'enorme numero di quelli disponibili e anche modificare l'aspetto delle icone.

Seleziona la dimensione dei pulsanti e dei social network che desideri, quindi procedi con la configurazione di opzioni aggiuntive.

Tipo di pannello delle icone- visualizzazione di un blocco di pulsanti (molto interessante l'opzione "flottante verticale").

Limita il numero visibile di icone- selezione del numero di pulsanti visualizzati (altri saranno nascosti dietro il collegamento).

Codifica del sito- la scelta della codifica del tuo sito.

Aggiungi l'icona del sito Share42.com- forse dovresti deselezionare la casella.

Mostra contatori- abilitare il contatore dei clic sui pulsanti (solo quando jQuery è in esecuzione).

L'installazione di questo script è piuttosto complicata, ma è descritta passo passo sul sito Share42 stesso.

3. Come installare i pulsanti sul sito

Se il codice che deve essere pubblicato sul sito è composto da due parti (come nel caso del pulsante Vkontakte), ciascuna delle parti viene installata separatamente. Se il codice non è divisibile in due, allora questo passaggio può essere saltato.

La prima parte del codice deve essere aggiunta tra i tag e... Per farlo, vai su Pannello di amministrazione di WordPress e vai all'editor dei modelli.

Nell'editor dei modelli, devi trovare il file "Titolo" (intestazione.php), se questo non è il caso, allora - "Modello principale" (index.php)... Ora devi trovare il tag o... Se in questi file non ci sono tali tag (tutti i temi sono diversi, questo potrebbe essere), quindi dovrai aprire tutti i file per la modifica e cercare un tag in ciascuno di essi ... Per cercare, puoi utilizzare la scorciatoia da tastiera "Ctrl + F".

Una volta trovato tag obbligatori, puoi inserire la prima parte del codice poco prima del tag di chiusuratesta> in modo da non toccare accidentalmente i codici di altri script.

La seconda parte del codice è posizionata dove vuoi che vengano selezionati i pulsanti dei social media per il sito. Se il codice è composto da una sola parte, è sufficiente eseguire solo questa operazione.

Molto spesso, i pulsanti vengono aggiunti prima o alla fine di un articolo. La più semplice, ovviamente, è la seconda opzione. Lo considereremo.

Devi trovare dove finisce l'articolo (principale parte di testo pagine). Per fare ciò, è necessario modificare il file "Una voce" (separare.php).

Ora devi trovare l'operatore responsabile della visualizzazione del contenuto principale dell'articolo. Nel mio caso, questo è "the_content", subito dopo il codice del pulsante.

Allo stesso modo, puoi inserire il codice all'inizio dell'articolo, devi solo trovare un posto tra il titolo e il testo dell'articolo.

Dall'autore: Saluti. Oggi i social network si sono sviluppati a un livello tale che un totale di oltre 3 miliardi di persone sono registrati su di essi. Questo è potenzialmente un pubblico molto potente, quindi oggi ti mostrerò come aggiungere i pulsanti dei social media al tuo sito.

Aggiunta a un sito WordPress

Inizierò con il fatto che il più in modo semplice se hai WordPress, installa semplicemente qualche plugin per questo caso. Quale? Ad esempio, ho usato Juiz Social Post Sharer. In generale, basta inserire la parola social nella ricerca del plugin e vedere cosa c'è. L'unico vantaggio è che probabilmente non dovrai configurare nulla.

Yandex ha anche sviluppato una pagina in cui puoi personalizzare e installare i pulsanti per te stesso. In questa pagina puoi scegliere servizi necessari(e ce ne sono circa 25). Sulla destra, puoi scegliere l'aspetto del blocco. Questi possono essere contatori che mostreranno quante volte gli utenti hanno cliccato sui pulsanti. Questo, a sua volta, ti aiuterà a tenere traccia dell'utilità del materiale per i tuoi lettori.

Naturalmente, non è necessario utilizzare tutte e tre le opzioni, una è migliore. Anche se ho visto siti in cui il blocco era all'inizio e alla fine della pagina.

Ora devi trovare il file con il codice che visualizza gli articoli. In wordpress, ad esempio, di solito è chiamato single.php, oppure In un modo simile... Quindi, se devi inserire un blocco con pulsanti dopo l'articolo, cerca la riga the_content. È dietro di esso che puoi inserire il codice. Ti aiuterà molto se lo sviluppatore del tuo modello ha fatto commenti nel codice.

Esistono diversi modi per modificare i file del sito. Ad esempio, puoi farlo direttamente tramite il pannello di amministrazione del motore (aspetto - editor). In questo caso, il codice non è evidenziato, quindi non è così comodo navigarci dentro. Un altro modo è tramite ftp. Collegati al sito usando il client ftp, vai su wp-content - temi. Qui devi trovare il modello attivo nel tuo questo momento... Entriamo e troviamo lo stesso single.php o cerchiamo qualcosa di simile nel nome.

Nel file con il codice stesso, trova la riga the_content usando la ricerca (Ctrl + F). Incolla questo codice da qualche parte dopo di esso.

I commenti sono ciò che spicca in questo screenshot qui sopra in verde... Come puoi vedere, lo sviluppatore ha esplicitamente indicato che il testo dell'articolo stesso viene visualizzato in questo luogo. È fantastico, basta incollare il codice subito dopo l'articolo e otterrai il risultato desiderato.

Pulsanti più

Tendenze moderne e approcci nello sviluppo web

Impara da zero l'algoritmo di crescita rapida nella costruzione del sito

Puoi scegliere lo stile dei pulsanti, personalizzarne lo sfondo, la posizione e le dimensioni. Puoi anche scegliere icone con un contatore integrato. E un altro vantaggio dei pulsanti Pluso è il loro aspetto sorprendente e la capacità di integrarli in quasi tutti i design.

Quando tutto è impostato, basta copiare il codice e incollarlo nel punto in cui vogliamo vedere il blocco corrispondente.

Un'altra opzione è Condividi42

Se opzioni precedenti non ti è piaciuto qualcosa, c'è un altro modo per inserire i pulsanti dei social media sul sito. Questo è il servizio share42.com. Si chiamava così, probabilmente perché al momento della creazione aveva 42 pulsanti per i servizi sociali, anche se al momento ne esistono 43.

Non descriverò il processo in dettaglio, perché sul sito è già tutto organizzato nel modulo istruzioni passo passo... Non è possibile modificare il design di queste icone, solo la dimensione. Tuttavia, sembrano buoni.

Le icone di cui hai bisogno, devi selezionarle facendo clic su di esse con il mouse. Vorrei anche notare la presenza di tali opportunità interessanti come aggiunta a preferiti del browser, link a rss e tasto "Su".

Quindi puoi scegliere il tipo di pannello: orizzontale o verticale? E se viene selezionato il secondo, il numero di pulsanti può essere limitato. Consiglio di lasciare la codifica su UTF-8. Puoi anche aggiungere un'icona del servizio stesso al set di pulsanti in modo che gli utenti della tua pagina possano accedervi e impostare questi pulsanti per se stessi.

Anche se hai intenzione di aggiungere icona RSS, allora è indispensabile indicare l'indirizzo del tuo feed e, se vuoi mostrare il numero di clic sui pulsanti, le ultime due caselle di controllo devono essere contrassegnate.

Ci sono 2 pulsanti sotto. Il primo ti permette di dare un'occhiata a come appariranno i pulsanti social che hai configurato. Il secondo viene utilizzato per scaricare lo script. Deve essere caricato tramite ftp sul tuo sito web all'indirizzo cartella root.

Passo successivo specificare il percorso di questa cartella nella pagina del servizio. Spesso è sufficiente sostituire site.com con il tuo. Nome del dominio... Tutto, resta da inserire il codice, dopo aver selezionato prima di questo cms, su cui è in esecuzione la risorsa. Dove inserire il codice dovresti già capire, spero.

Non ho dubbi che ci siano un paio di normali servizi in cui puoi creare pulsanti social e ci sono solo molti script e plugin che li aggiungono. Oggi ho elencato per te le migliori, secondo me, opzioni.

Bene, oggi abbiamo imparato come aggiungere pulsanti per social network e servizi al nostro progetto Internet. Adesso tuo materiali utili possono essere condivisi automaticamente sui social network dai tuoi lettori riconoscenti. E questo è tutto per me.

Tendenze e approcci moderni nello sviluppo web

Impara da zero l'algoritmo di crescita rapida nella costruzione del sito

Saluti! Recentemente io in risposta chiesto come creare gli stessi pulsanti di social media che sono installati sul mio sito. E ho deciso di dare la risposta nell'articolo facendo una recensione 6 servizi sociali... pulsanti per il sito.

Vantaggi e svantaggi

Tuttavia, va notato che in alcuni casi il posizionamento dei pulsanti può presentare lievi svantaggi. Considera perché è necessario posizionare i pulsanti dei social media sul blog creato e considera anche il principale positivo e lati negativi posizionamento di tali icone.

Screpolatura

1. La velocità di caricamento della pagina potrebbe diminuire.
2. Con un focus altamente specializzato del progetto Internet, potresti non ottenere l'effetto desiderato.

Panoramica dei servizi dei pulsanti dei social media

Diamo un'occhiata ai servizi più popolari che puoi utilizzare per aggiungere pulsanti di social media al tuo sito web.

è completamente servizio gratuito che funziona come segue. Genera automaticamente sceneggiatura speciale, con l'aiuto del quale è possibile per i visitatori del progetto Internet pubblicare collegamenti ai social network. Il servizio sembra pulsanti. L'installazione è molto semplice e conveniente e i pulsanti posizionati hanno un bell'aspetto sulla pagina.

Il servizio offre oltre trecento opzioni per diversi pulsanti! Puoi semplicemente scegliere quelli che ti piacciono di più.

L'installazione avviene letteralmente con un clic. C'è una statistica delle transizioni.

1. 
   

   Questo è probabilmente uno dei servizi online più interessanti con cui è possibile generare un pulsante con diversi parametri: dimensione e aspetto esteriore... Inoltre, puoi scegliere come posizionare il pannello con i pulsanti (orizzontale o verticale). Puoi anche specificare la codifica. Dopo aver selezionato tutto impostazioni richieste, lo script generato deve essere scaricato e inserito nel tuo progetto Internet nella posizione richiesta. Per lo più subito dopo l'articolo.

2. 
   

   Yandex offre di scegliere in modo indipendente quali social network verranno visualizzati. L'utente può farlo semplicemente posizionando le caselle di controllo davanti ai pulsanti che verranno posizionati sul blocco. Puoi modificare il loro aspetto.

   Successivamente, il sistema genererà automaticamente il codice sorgente, che dovrà essere installato sul tuo blog. I principali vantaggi di questo servizio includono il fatto che lo script non inserisce collegamenti in uscita sul blog creato. È anche possibile collegare Yandex.Metrica per tenere le statistiche.

3. 
   

   Questo servizio invita gli utenti a posizionare pulsanti di social network molto belli ed eleganti sul proprio sito Web. Il modulo creato dal servizio utilizza css e javascript. Il modulo generato si adatterà perfettamente al design di qualsiasi progetto Internet. Come i pulsanti sono realizzati usando tecnologia moderna jquery. La connessione è molto semplice e non causerà alcuna difficoltà nemmeno ai principianti. Il download è molto veloce.

4. 
   

   Questo è un servizio online utile e completamente gratuito che offre agli utenti di posizionare i pulsanti in questo modo: in una riga, disposizione sotto forma di menu a discesa, icone di tutti i servizi in fila. Dopo aver scelto le opzioni di visualizzazione, il servizio genererà automaticamente uno speciale codice javascript, che dovrà essere collocato nella posizione richiesta sul sito.

   Inoltre, il servizio indica come aggiungere il codice generato ai modelli.

5. 
   

   Usando di questo servizio, puoi aggiungere rapidamente e facilmente i pulsanti necessari al tuo sito Web o blog. Per fare ciò, devi completarne solo tre semplici passaggi: scegli il luogo in cui verrà posizionato il widget creato, scegli lo stile dei pulsanti e ottieni il codice. Inserendo tali pulsanti sul blog creato, i visitatori saranno in grado di aggiungere materiali interessanti ai tuoi segnalibri e social network.

Quindi, l'installazione dei pulsanti dei social media per il sito è molto semplice e non causerà alcuna difficoltà anche per gli utenti Internet inesperti. Facoltativamente, è possibile impostare i pulsanti di tutte le reti disponibili o selezionarne solo alcune alcune reti... Per fare ciò, è necessario utilizzare widget ufficiali o di terze parti servizi online... I pulsanti più popolari sono installati su blog personali, o su progetti Internet di notizie o intrattenimento. :)

P.S. Grazie per l'attenzione. Che servizio preferisci? Aspettando i tuoi commenti. :)