Ciao, cari lettori del sito blog. Ovviamente puoi utilizzare un plugin per questa attività, ma non è così difficile farlo da solo, e ce ne saranno meno, soprattutto perché ne lavoro già parecchi (vedi articolo al link fornito). Ho preso le icone dei social network, di cui ho già scritto in dettaglio (spero che Dimox non si opponga a questo).
E l'ho ritenuto opportuno anche per l'Email.
Dopo aver creato tutti i gruppi e le pagine necessari sui social network, il che significa che hai ricevuto tutti i collegamenti necessari, potresti rimanere perplesso aggiungendo pulsanti al sito. Ovviamente puoi, secondo il mio post su, scegliere un'icona adatta per ciascun social network e, se necessario, ridurne le dimensioni alla dimensione richiesta in e.
Ma questa non è l'opzione migliore. Perché? Bene, perché per caricare ciascuna immagine del social network, verrà effettuata una richiesta separata al tuo server. Se hai una dozzina di icone, significa dieci richieste, che in ogni caso creeranno un carico aggiuntivo sul server e . Tale stravaganza non ci si addice, soprattutto perché lo è da molto tempo.
Ho deciso di non reinventare la ruota (creare uno sprite), ma di utilizzare quella che crea il costruttore Share42 (il collegamento alla descrizione di come lavorarci è riportato appena sopra). In esso puoi selezionare i social network di cui hai bisogno delle icone e insieme al codice riceverai uno sprite CSS, ad es. fisicamente un file grafico, che conterrà tutte le icone dei social network di cui hai bisogno e le iscrizioni ai feed RSS (e alle Email, se necessario).
Ho scelto quattro reti principali e un paio di icone per gli abbonamenti alle notizie con dimensioni delle icone di 24 x 24 , quindi il mio sprite assomiglia a questo (tuttavia è comunque riuscito a insinuarsi lì, ma non importa):
Ora abbiamo tutti gli ingredienti: collegamenti a gruppi o pagine di social network e icone per visualizzarli sul sito. Resta solo da preparare tutto questo correttamente, ad es. trucco. Il mio blog è gestito da WordPress, quindi incollerò il codice del pulsante in uno dei file . Nel mio caso si chiama sidebar.php. codice html il risultato è molto semplice:
Bene, il più interessante. Con l'aiuto, determiniamo quale area del nostro sprite verrà visualizzata in questo particolare luogo come sfondo (nel nostro caso, questo sfondo è posizionato sotto un collegamento ipertestuale). Ci vuole molto tempo per spiegare come ciò avvenga, quindi leggi l'articolo al link e tutto ti sarà chiaro (ci sono anche esempi illustrativi). Se sei troppo pigro, sperimenta con i numeri che, come avrai notato, non sono invano multipli di 24.
Sì, carica il file sprite tramite FTP sul tuo sito e specifica il percorso in background (). È tutto. Se non funziona, leggi più attentamente i materiali sui collegamenti sopra e, se non funziona proprio nulla, descrivi la tua situazione nei commenti (in dettaglio - per inserire il codice, non dimenticare di allegarlo a tag PHP con parentesi quadre).
Buona fortuna a te! A presto sulle pagine del blog del sito
Potresti essere interessato
Recentemente, ogni secondo (se non il primo) cliente nei requisiti per lo sviluppo del sito chiede di essere sicuro di collegarlo ai social network. I pulsanti “social” sul sito sono lo strumento numero 1 per attirare il pubblico target, distribuire contenuti e PR in generale. E completamente gratuito!
I social network forniscono codici per i loro pulsanti e widget da posizionare sul sito e allegano istruzioni per installarli nel sistema di gestione dei contenuti. Qualsiasi CMS (sistema operativo) ti consente di installarli, l'importante è inserirli armoniosamente nel design del tuo sito.
Se il tuo sito è rivolto a persone che comunicano con i social network più diffusi. reti, ad esempio Vkontakte, Twitter, Instagramm, Facebook, Google+, Pinterest, ecc., e vuoi coprirle tutte, per non impostare separatamente i pulsanti per ciascuna di esse, dato che possono differire per dimensioni e design, 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 analizzeremo i servizi più apprezzati.
Ora ci sono diversi modi per aggiungere pulsanti di social network al sito, c'è una scelta e fa piacere. I pulsanti social svolgono un ruolo importante nella pagina, con il loro aiuto, come molti già sanno, puoi ripubblicare rapidamente qualsiasi voce in uno dei social network selezionati. I pulsanti social del sito ora vengono posizionati ovunque e ovunque, ma a volte nel posto sbagliato.
Molte persone sanno già quanto sono sviluppati i social network ora e quanto è bello se il tuo sito ha tali pulsanti con cui puoi aggiungere il tuo post preferito o parte di un post alla tua bacheca. Con questa azione, non solo commenti o ripubblichi messaggi, ma dai anche un segnale aggiuntivo ai motori di ricerca.
Il sogno di ogni proprietario del sito, se tutti i suoi post vengono ripubblicati dai lettori sulle loro pagine in uno dei social network. Ora soprattutto c'è 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 relativi pulsanti fa risparmiare tempo. Inoltre, molte persone utilizzano questi servizi e potrebbero anche voler ripubblicare la tua voce 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 in modo rapido e semplice. O direttamente attraverso ciascun social network separatamente. Qui ognuno ha la propria scelta. Prima aggiungevo i pulsanti separatamente tramite ciascun social network, ora li ho installati utilizzando il servizio.
Esiste un servizio del genere, si chiama condividi42. È stato scritto molto materiale su di lui, su quanto è bravo e su 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ù. Esistono altre opzioni in cui è necessario copiare e incollare il codice già finito senza cartelle aggiuntive. Quindi dimentica questo servizio.
Aggiungi solo i pulsanti più elementari dei social network utilizzati dalla maggioranza, non scolpire dozzine di pulsanti inutili dimenticati.
Cosa puoi utilizzare oggi per aggiungere pulsanti social per il sito:
Probabilmente non hai bisogno di intrometterti altrove, 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 facoltativamente ripubblicare la tua voce. Non dovrebbe cercarli da qualche parte alla fine della pagina. I posti più ottimali, a mio avviso, in cui posizionare tali pulsanti sono nella barra laterale e immediatamente alla fine di ogni voce.
Al momento io stesso utilizzo questo servizio, mi è piaciuto. Oltre alla comodità, il servizio uptolike ha numerosi privilegi rispetto ad altri del suo genere.
Per utilizzarlo sono sufficienti i privilegi rispetto ad altri servizi simili. In questo caso viene aggiunto solo un piccolo codice sotto forma di script e un paio di righe con stili. Allo stesso tempo non è presente alcun collegamento estraneo, l'ho controllato tramite il servizio di collegamenti in uscita. Se sbaglio, puoi correggermi.
Oltre a 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 alcuni altri dalla maggioranza. Seleziona la casella per il supporto. Successivamente, sui 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 hover. Non è necessario fare altro. Per generare un codice contatore, è necessario specificare l'indirizzo del sito Web e la casella di posta. Subito dopo apparirà un codice per l'inserimento dei pulsanti social sul 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.
Selezionare le icone del servizio desiderato. 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 nient'altro, tutto è modesto e di buon gusto.
In questo metodo, devi aprire ciascun social network separatamente e configurare ciascun pulsante di ripubblicazione separatamente. Per aggiungere un pulsante Facebook, devi andare Qui. Per i compagni di classe e il mio mondo, è necessario aggiungere dati. Per Twitter, tutto avviene 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 ciascun pulsante separatamente, quindi incollare tutto in un unico posto e utilizzare gli stili CSS per allinearlo in una colonna. Se non hai problemi con questo, puoi provare.
Per aggiungere un pulsante Vkontakte, fare clic su Connetti 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 proprio gruppo, consigli, sondaggi, iscriversi all'autore e pubblicare collegamenti. Nel nostro caso, seleziona Pubblica collegamenti.
Non c'è niente di complicato, selezioniamo lo stile del pulsante (con o senza contatore), scriviamo il testo sul pulsante, l'opzione logo e in fondo ci sarà un codice di incorporamento già pronto. Io stesso ho utilizzato questo metodo manuale di aggiunta, ma al momento sto provando un servizio di terze parti. Vediamo cosa succede. Se non mi va bene, tornerò immediatamente al metodo manuale.
Un altro modo per aggiungere pulsanti a un sito è con Servizio Plus. Anche il servizio non è male, molti ne hanno notato i pulsanti. La scelta delle opzioni di progettazione è ampia, oltre al amatoriale 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 grandi, medie o piccole. Anche icone quadrate per il sito o rotonde, su una o due righe, orizzontali o verticali. Con o senza contatore, senza sfondo oppure imposta lo sfondo in modo che corrisponda al design del tuo sito web.
Dopo tutti questi passaggi, di seguito ci sarà un codice già pronto da inserire nella pagina. Se devi inserirlo nella pagina principale, frughiamo nel file index.php, se in tutti i tuoi post aggiungiamo il codice al file single.php subito dopo la fine del post.
Se non capisci nulla in questo codice, cosa deve essere copiato, dove e come funziona, c'è una via d'uscita. Se disponi di un motore WordPress, puoi installare un plug-in che ti fornirà i pulsanti dei social media. Oggi esiste solo un gran numero di tali plugin. Vai al pannello di amministrazione - Plugin. Puoi subito scrivere nella ricerca dei plugin “pulsanti social”, “social” o “VKontakte”. Sono sicuro che troverai qualcosa.
Tra la maggior parte dei plugin simili per WordPress, guardando la valutazione, questi sono i più indicati:
In effetti, ci sono molti di questi plugin, devi installarli e decidere quale ti piace di più, funziona correttamente, cosa mostra e come puoi personalizzarlo per te stesso. Diamo un'occhiata all'esempio del primo plugin di questo tipo, 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 "Pulsanti Condividi". Nelle impostazioni principali inseriamo il logo del sito e scriviamo il testo davanti ai pulsanti social.
Assicurati di attivare la generazione di metadati, il titolo e la descrizione della pagina verranno inclusi. Allinea i pulsanti orizzontalmente e scegli dove saranno. Scegliamo solo nei post. Facoltativamente, è possibile escludere le pagine necessarie. In fondo, devi specificare il soprannome nel tritter.
Nella scheda successiva, Impostazioni di condivisione, 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 plugin farà tutto per te.
A voi la scelta del metodo da utilizzare. Aggiungi icone dei social media tramite uptolike, Pluso o tramite Yandex. Non dovresti installare immediatamente il plugin su WordPress, provare a fare tutto manualmente o con l'aiuto di un servizio.
Se conosci qualche altro buon servizio o un modo per aggiungere pulsanti social al sito, ti sarò grato per il commento.
Una panoramica dei designer e degli script nazionali per i pulsanti dei social network per i siti Web, nonché degli analoghi stranieri. Brevemente, chiaramente e chiaramente.
2. Un modo semplice per ottenere collegamenti al sito - QIP.RU
Inserisci un pulsante sul tuo sito e offri ai visitatori l'opportunità di aggiungere il contenuto del sito che preferiscono ai segnalibri, ai blog e ai social network. Tre passaggi: dove posizionare il pulsante (sito web, Blogger o WordPress), stile del pulsante (opzioni già pronte) e ottenere il pulsante.
3. Pulsanti per aggiungere contenuti ai social network - Pluso
Posiziona i pulsanti e consenti ai visitatori di condividere le loro pagine preferite sui social network, nonché di stampare, inviare un'e-mail e aggiungere segnalibri.
4. Servizio di attività sociale - UpToLike
Pulsanti social media personalizzati con la possibilità di impostare colore, forma, dimensione ed effetti speciali. Ulteriori funzionalità sono il widget di condivisione immagini PicShare, la funzione "Citazione" e la funzione Seguito personalizzata.
5. Un pulsante! - per tutti i servizi di bookmarking e social network
Seleziona il pulsante Visualizza. Dove verrà installato il pulsante: sito web, Blogger o WordPress. Aggiungi un pulsante.
1. Bellissimi pulsanti social per il sito: goodshare.js
Visualizza i pulsanti su quasi tutti i dispositivi. Codice pulito. Breve documentazione. SEO amichevole.
2. Pulsanti di script per segnalibri e reti sociali - Condividi42
Seleziona la taglia e segna le icone dei servizi che desideri utilizzare sul sito. Seleziona le opzioni che desideri. Guarda come apparirà e/o scarica lo script finito. Installa lo script su un sito WordPress, Drupal, ecc.
3. Bellissimi pulsanti Mi piace social utilizzando jQuery - Mi piace social
Script di pulsanti Mi piace con contatori nello stesso stile per i social network: Facebook, Twitter, VKontakte, Odnoklassniki, My world, Google+ e Pinterest.
1. Pulsanti Condividi - AddThis
I pulsanti di condivisione ti aiuteranno ad aumentare il pubblico del sito attirando visitatori da altre risorse e social network attraverso i contenuti distribuiti.
4. Condivisione sui social - Post.st
Ottieni di più dalla condivisione sui social media. Il servizio faciliterà il processo di condivisione nei social network per i visitatori, che aumenterà il traffico organico del sito.
5. Pulsanti di condivisione per qualsiasi sito Web: AddToAny
Ottieni il codice dei pulsanti dei social media per qualsiasi sito web. Scegli il tipo e lo stile dei pulsanti, specifica un'e-mail e altre opzioni oppure scegli una delle piattaforme: WordPress, Drupal, Tumblr, Joomla, Elgg, WordPress.com, Blogger, TypePad o FeedFlare. Ottieni il codice del pulsante.
| alle 8:00 | Modifica messaggio | 6 commenti |
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 consentiranno 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 oggi su quasi tutti i siti. 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 rendono abbastanza semplice l'implementazione dell'attività.
E in questo blocco vengono utilizzate solo le immagini necessarie dei pulsanti social, combinate in formato . Tutti gli stili sono ridotti al minimo. Inoltre un semplice framework html.
Considereremo la versione classica, quando i pulsanti si trovano dopo l'articolo.
Puoi farlo 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 delle funzioni del tema (functions.php ).
Ti mostrerò entrambe le opzioni e tu sceglierai quella più adatta a te.
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 pulsanti social.
Guarda attentamente lo screenshot, concentrati sui 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 complicato in questo. E inoltre, hai una copia di backup, non c'è nulla di cui aver paura.
Ed ecco il codice html del blocco dei pulsanti social:
Spiegazioni del codice:è un singolo div con classe .share che contiene collegamenti ai social network. Il collegamento si apre in una finestra pop-up separata, questa funzione onClick=window.open è responsabile di ciò. La sostituzione di un collegamento a un articolo viene eseguita con questo codice. Ogni collegamento ha una propria classe, attraverso la quale viene assegnata l'immagine del pulsante.
Questo completa l'inserimento tramite il codice sorgente. E poi devi aggiungere gli stili CSS.
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_pulsante() ( ?> 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 posto prima dei commenti. Il codice del pulsante social stesso è racchiuso tra i tag posteriori per l'apertura e la chiusura di php. Nel codice li ho segnati in rosso. questo è l'intero trucco di inserire codice html in php, attraverso le funzioni del tema.
Su questo e questo metodo è finito, passiamo al caricamento delle immagini sul sito.
Ad esempio, ho preparato diversi sprite con immagini di pulsanti social. Puoi scaricarli.
Lo sprite che uso come esempio pesa 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 i pulsanti tramite gli stili CSS.
Naturalmente, questo passaggio può essere fatto per primo, ma preferisco fare prima tutto il lavoro tecnico complesso e poi procedere alle piccole cose carine con gli stili CSS.
Quindi, apri il file style.css responsabile del design del tuo sito. E incolla questi stili:
Condividi un ( display: blocco in linea; allineamento verticale: eredita; margine: 5px 0 0 2px; riempimento: 0px; dimensione carattere: 0px; larghezza: 40px; altezza: 40px; sfondo: url("http://test ..png ") scorrimento senza ripetizione 0px 0px trasparente;) .share a.vkontakte ( background: url("http://test..png ") scorrimento senza ripetizione -168px 0px trasparente; ) .share a.google ( background: url("http://test..png ") nessuna ripetizione scroll -252px 0px trasparente; ) .share a.livejournal ( background: url("http://test..png ") nessuna ripetizione scroll -336px 0px trasparente; ) .share a.twitter ( background: url("http://test..png ") no-repeat scroll -42px 0px trasparente; ) .share a.mail ( background: url("http ://test..png ") scorrimento senza ripetizione -294px 0px trasparente; ) .share a.odnoklassniki ( background: url("http://test..png ") scorrimento senza ripetizione -126px 0px trasparente; ) .share a.pinterest ( background: url("http://test..png ") no-repeat scroll -210px 0px trasparente; ) .share a.liveinternet ( background: 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 ( background: url("http://test..png ") scorrimento senza ripetizione -504px 0px trasparente; ) .share a.print ( background: url("http://test..png ") scorrimento senza ripetizione -546px 0px trasparente; ) .share a.digg ( background: url("http://test..png ") scorrimento senza ripetizione -588px 0px trasparente; ) .share a.spring ( background: url("http://test..png ") scorrimento senza ripetizione -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 propria classe e ad ognuno di questi collegamenti, tramite la proprietà background, viene assegnato l'aspetto di un pulsante. I pulsanti vengono renderizzati come sprite CSS e ciascun pulsante è largo 40 px e alto 40 px, con un riempimento di 2 px tra di loro, consentendo di definire con precisione l'immagine per ciascun pulsante. Cioè, il primo pulsante viene 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 al controllo.
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.
Questo è tutto. Ha affrontato il compito. Auguro a tutti buona fortuna e ci vediamo con nuovi articoli e video tutorial.
