Ultimamente ho ricevuto molte richieste per condividere un tutorial su come ho creato il widget della barra laterale sul mio blog personale. Sembra bello e, cosa più importante, funziona! Con alcuni semplici PHP e CSS, sono sicuro che tutti possono implementarlo facilmente nei loro blog. Oggi vi mostrerò come creare il mio ... nella speranza che sarete in grado di creare la vostra versione personalizzata per i vostri progetti!
Passaggio 1 Ottieni social!
In primo luogo, ciò richiede che tu abbia una pagina Facebook, non solo un profilo regolare ... quindi se non ne hai uno, dovrai prima crearne uno. Continueremo supponendo che ne possiedi già uno!
Ok, facciamo in modo che la tua pagina Facebook e i codici di abbonamento e-mail siano pronti. Non copiare i codici nel passaggio 1! Leggi tutto qui prima. Copia solo il codice completato nel passaggio 2 ... inizieremo per prima cosa le basi:
Cosa ti servirà dalla tua pagina Facebook
Immergetevi direttamente nel codice che utilizzeremo per il widget della barra laterale, in modo da poter indicare alcune informazioni di cui avrete bisogno. Questo frammento verrà utilizzato per la porzione Social del nostro widget Facebook:
Ecco la parte difficile: ogni volta che modifichi il tuo CSS, assicurati di cambiare il numero '? 1' (nella riga 4 dell'esempio precedente) a un altro che corrisponde alla versione cache del CSS. Se non lo cambi, potrebbe non funzionare. (questa è certamente una strana situazione - ho avuto successi e errori nel farlo funzionare).
?1
Per il tuo ID della pagina (è un numero lungo che rappresenta l'ID della tua pagina Facebook): Accedi al tuo Pagina Facebook> Modifica pagina e vedrai il tuo id di pagina nella barra degli indirizzi del browser. Utilizzare questo per l'ID profilo sulla riga 4 a meno che non si desideri pubblicizzare la mia pagina Facebook sul proprio sito;).
Nella barra del browser su Modifica Pagina, vedrai qualcosa di simile a questo:
Puoi anche modificare le connessioni, la larghezza e l'altezza in modo che si adatti bene alla barra laterale. La larghezza minima deve essere 250 (px), meno di quello e non sarai in grado di adattare il pulsante e il testo all'interno delle scatole.
Dettagli dell'iscrizione e-mail
Ora dobbiamo prendere i dettagli della tua iscrizione da Feedburner. Ancora una volta, suppongo che tu abbia già questo set up, quindi dovresti solo accedere e prendere i seguenti dettagli.
Brucia il tuo feed utilizzando Feedburner e sostituisci il Feedburner id nel codice qui sotto con il tuo. L'id di Feedburner è quello dell'URL del masterizzatore di feed. Ad esempio feeds.feedburner.com/Ariff. Sì, ho avuto un po 'di confusione cercando questo prima.
Ecco il codice effettivo che useremo per la porzione di abbonamento del widget:
Passaggio 2 Mettendolo insieme: il codice completo
Puoi trasformarlo in un plug-in completo (o shortcode), se lo desideri, ma oggi prenderemo una scorciatoia per ottenere le cose buone e lavorare direttamente su un widget di testo. No, questo non è raccomandato per la produzione effettiva ... ma ci farà muovere immediatamente.
Copia questo codice in a widget di testo sulla tua barra laterale. Ricordati di cambiare tutti gli attributi come menzionato sopra e includere le tue credenziali di Twitter e Google+. Se hai già il pulsante Google+ sul tuo sito, puoi rimuovere il codice javascript di Google+ dal basso in quanto una singola istanza dello script è già sufficiente per più pulsanti.
Consiglia su Google
Seguirti
Passaggio 3 Codice CSS
Copia i codici CSS nel tuo foglio di stile del tema. Nota che se la casella di Facebook non funziona, i codici per la scatola devono essere inseriti nel tuo foglio di stile principale (style.css) e non in qualche altro posto per i codici personalizzati.
Il risultato finale dovrebbe assomigliare a questo:
E abbiamo finito! Puoi controllare il codice CSS dove inserisco alcuni markup di ciò che può essere cambiato. Tutto il meglio con questo. Ora hai qualcosa di Mashable-ish sul tuo sito, con un po 'di personalizzazione.
Fonte del codice della pagina Facebook: Daddy Design
Tenete a mente, questo è solo un punto di partenza! Alcuni dei tuoi sviluppatori di plugin avanzati potrebbero anche avere modi migliori di fare alcune delle cose mostrate in questo tutorial, quindi sentiti libero di condividere i tuoi commenti e idee nella sezione commenti qui sotto! Saremo sicuri di aggiornare il tutorial se qualcuno ha delle idee grandiose.
Share
Accentsconagua
