Come aggiungere un pulsante alla Pagina Facebook.

Facebook permette agli utenti di creare Pagine dedicate a una attività commerciale, a una iniziativa particolare, a un personaggio pubblico, a un avvenimento o anche come supporto a un sito web. C'è una differenza sostanziale tra Pagine e Gruppi con i secondi che possono anche essere chiusi e segreti.

Le Pagine Facebook hanno una loro identità e l'utente può scegliere se commentare o mettere un Mi Piace a nome suo o a nome di una delle pagine che ha creato. Le Pagine Facebook hanno anche una funzionalità di messaggistica per permettere ai lettori di aprire una conversazione con l'autore.

Per iniziare un colloquio il sottoscrittore della pagina deve cliccare su Messaggio per aprire la finestrella della conversazione. Recentemente Facebook ha introdotto la possibilità di creare un bottone per collegare la pagina a un modulo di contatto, a un Gioco, un Video o a una applicazione. 

Come installare in Blogger il bottone di condivisione di Skype.

Sono stato informato in un commento che è stato rilasciato un bottone di condivisione di Skype sulla falsariga di quello di WhatsApp con la possibilità di scelta tra vari stili. In questo modo quando un navigatore legge un nostro interessante post può cliccare sopra al pulsante di condivisione e, se è loggato a Skype o a Microsoft, potrà con un click  condividere il link con il contatto che selezionerà.

Insieme al link e al Titolo del post verrà condivisa anche la miniatura della prima immagine. In questo articolo vediamo come si possa installare il bottone in una sidebar di Blogger e quindi di mostrarlo nella versione desktop. In un prossimo articolo vedrò se mi riuscirà la installazione di questo bottone anche nella versione mobile in modo da mostrarlo magari sotto al post accanto agli altri bottoni di condivisione.

Come mostrare un pulsante per tornare a inizio pagina.

In un articolo precedente abbiamo visto come inserire due icone per spostarsi in alto e in basso della pagina web che si sta visitando. Se due icone sempre visibili paiono troppo invasive si può optare per una soltanto per tornare a inizio pagina che si inizia a vedere solo quando si è fatto già un certo scroll della pagina.

Lo script che andrò a presentare utilizza la libreria jQuery e l'ho preso da Dynamic Drive. Lo spostamento non è repentino e si può configurare anche il punto della pagina in cui riportare il lettore che clicca sopra alla icona. Inoltre ho preparato anche tutta una serie di icone adatte ai diversi layout. Per la installazione mi riferirò a un blog su Blogger ma lo script è funzionante in qualsiasi pagina web in cui si possa editare l'HTML.

Come far stampare le ricette nei siti di cucina su Blogger.

Ho appena ricevuto un commento in cui mi si chiedeva se in Blogger fosse possibile aggiungere un bottone o un link per stampare solo la ricetta e non tutta la pagina come invece succede con Blogger. La mia risposta è stata negativa ma forse è stata anche affrettata perché un sistema per stampare una ricetta presente nel post, e solo quella, si può trovare usando Google Sites che è un servizio di Google per creare dei siti statici e che può essere utilizzato con le stesse credenziali di Blogger.

Naturalmente il procedimento che andrò a presentare vale anche per siti diversi da quelli di cucina e può essere usato tutte le volte che si voglia permettere ai lettori di stampare in modo semplice non solo una ricetta ma anche una guida, un modulo, un documento o qualsiasi altra cosa. L'utilizzo di Google Sites è da preferire ad altre soluzioni perché in basso a tutte le pagine di Google Sites i lettori visualizzano il link Stampa pagina con cui possono stampare la pagina corrente. Ovviamente bisognerà informare i lettori di questa opportunità perché non tutti la conosceranno ma questo lo vedremo in seguito.

Come mostrare i pulsanti ufficiali di condivisione di Blogger solo nei post.

A seguito di una domanda inserita in commento che ho appena letto vado a pubblicare un instant post di risposta perché illustrare in un commento la procedura per nascondere i pulsanti ufficiali di condivisione di Blogger sarebbe stato oltremodo complesso. I bottoni di Blogger non piacciono molto agli utenti perché piccoli e poco colorati da risultare non molto visibili. Per attivarli si va su Layout > main >  Post sul blog > Modifica  e si mette la spunta su Mostra i pulsanti per la condivisione quindi si va in basso su Salva.

I bottoni di condivisione verranno mostrati di default in tutte le pagine del blog

Come installare i pulsanti di condivisione sociale nella versione desktop e mobile di Blogger.

Ritorno sul tema delle condivisioni sui social network che sono cosa diversa dai bottoni ufficiali con cui oltre a condividere si possono anche visualizzare i contatori del numero di tali azioni. In un post recente ho illustrato come si possano installare delle icone del tipo material design nella versione mobile di Blogger in questo articolo invece vedremo come si possa usare lo stesso CSS per mostrare le icone sia quando si visualizzi un post da mobile sia quando lo si visualizzi da desktop.

Benché il CSS sia comune le icone scelte per le due differenti valutazioni non coincidono. Il pulsante per la condivisione su WhatsApp ha senso mostrarlo solo nei dispositivi mobili in cui sono presenti delle applicazioni dell'omonimo servizio di messaggistica. Al contempo nella versione per il mobile è bene non abbondare con i pulsanti perché altrimenti potrebbero mostrarsi su due file nei cellulari con piccola risoluzione. Naturalmente si tratta di opinioni personali e ognuno può scegliersi la giusta configurazione per le proprie esigenze.

Come installare i pulsanti di condivisione sui social network nella versione mobile di Blogger.

La condivisione di articoli sui social network è un modo di attirare traffico sempre molto importante ma è anche un sistema per dare autorevolezza al post e al sito stesso. Molti fattori di ranking di Google dipendono proprio dal numero e dalla qualità delle condivisioni sociali.

Le condivisioni poi avvengono sempre di più da mobile visto che le persone stanno sempre di più preferendo questi dispositivi ai classici computer per una maggiore usabilità e perché possono navigare su internet stando in treno come alle poste, in una sala di attesa come in spiaggia sotto l'ombrellone. In questo articolo vi propongo una serie di icone da visualizzare nella versione mobile di Blogger da mostrare alla fine del post. Nell'articolo precedente abbiamo visto come nascondere l'icona di Google+ che dava appunto fastidio per questa installazione.

Come nascondere il pulsante di Google+ nella versione mobile di Blogger.

I pulsanti per la condivisione nei social network possono essere inseriti nella versione desktop andando su Layout > Post sul blog > Modifica e mettendo la spunta su Mostra i pulsanti per la condivisione. Si può anche decidere di non mostrare questi bottoni togliendo la flag accanto a tale opzione. Bisogna comunque sempre ricordarci di andare in basso su Salva, nella finestra che si apre, per rendere effettive le modifiche introdotte.

Anche nel caso si sia scelto di non mostrare i pulsanti di condivisione sociale nella versione mobile rimarrà comunque il pulsante con contatore di Google+ che vista la posizione che ha nel layout rende piuttosto difficile l'inserimento di altri elementi. In questo articolo vedremo come si procede per nascondere questo pulsante senza eliminare il codice in modo da rendere molto semplice un suo eventuale ripristino.

Come installare su Blogger e Wordpress il pulsante per le donazioni con Paypal o con carta di credito.

Nel precedente articolo abbiamo visto come ci si possa registrare su Paypal semplicemente collegando il nostro account a un indirizzo email che poi andrà verificato per poter ricevere dei pagamenti. In molti blog che offrono gratuitamente informazioni è presente un pulsante per permettere ai visitatori di ringraziare in modo tangibile con l'invio di una piccola somma di denaro.

In questo post vediamo appunto come procedere nella facile installazione del pulsante di Paypal e sul suo funzionamento. La prima cosa da fare è loggarci su Paypal con l'account desiderato nel caso ne aveste più di uno. Lo si può fare anche dopo aver aperto la pagina dei Pulsanti per Donazioni di Paypal

Pulsanti per condividere le immagini nei social con SlingPic.

Le immagini sono da sempre una parte integrante di un blog. In alcuni casi si può sicuramente dire che le immagini sono addirittura la parte predominante di un sito. Non è un caso che Pinterest sia diventato uno dei social a più alto trend di crescita. Il blogger può facilitare la condivisione delle foto su Pinterest mostrando l'apposito pulsante quando il mouse passa sopra a una immagine.

Le immagini però non vengono condivise solo su Pinterest ma si possono postare su Twitter, su Facebook o anche in altri social. Il servizio SlingPic offre un plugin per Wordpress e un codice per le altre piattaforme che mostrerà in automatico un pulsante Share per condividere le foto nei social network più importanti.

Widget di pulsanti scorrevoli per Social Network.

Dopo il grande successo avuto dalle piccole icone animate alla fine dei post riprendo a presentare widget di condivisione sui social network. Si tratta di pulsanti che portano il lettore direttamente nell'account dell'autore del post su Facebook, Twitter, Google+, Pinterest e nella pagina dell'URL dei Feed RSS. Se siete sufficientemente bravi con la grafica potrete certamente creare altre immagini simili a quelle proposte per aggiungere altri social. Dovranno essere aggiunti altri elementi <li> alla fine del codice e le classi di stile relative seguendo la stessa sintassi.

È inoltre possibile eliminare la riga del social che non ci dovesse interessare. Per la installazione di questi bottoni non occorre modificare il modello ma basta andare su Layout e aggiungere un nuovo elemento pagina HTML/Javascript. Il widget sarà visibile in alto a sinistra e ciascun pulsante si mostrerà al passaggio del mouse. Viene utilizzata la Libreria JQuery. Ecco l'aspetto che prenderà il gadget

Pulsante per invitare gli amici di Facebook a visitare il blog.

La stragrande maggioranza dei lettori dei blog hanno anche un account Facebook con una media di 150-200 amici per ciascuno. Se un navigatore ritiene utili i contenuti di un sito web perché non dargli la possibilità di condividere questo apprezzamento con una parte o con tutti i suoi amici di Facebook? Ecco quindi che Facebook ha reso disponibile per gli utenti quello che forse è uno dei modi più efficaci per aumentare le visite al sito.

Si può infatti installare nel blog un pulsante su cui i lettori possono cliccare e che aprirà una finestra popup in cui potranno invitare tutti gli amici che vorranno e che riceveranno una notifica in tal senso nella sezione Richieste. Per evitare abusi Facebook ha messo il limite di 50 inviti per volta ma dopo aver fatto il primo invito a 50 persone se ne può fare un altro ad altre 50 e così via.

La condizione per l'inserimento di questo pulsante è la creazione di una applicazione Facebook che può essere fatta accedendo alla pagina Facebook Developers. Se non avete mai verificato il vostro account con un codice inviato per SMS non vi sarà data possibilità di creare una applicazione. Bisogna creare una applicazione per ciascun sito che si gestisce in quanto il suo funzionamento è legato al dominio su cui opera. Andate su Crea applicazione se non ne avete ancora una per il vostro blog. Se invece la avete già creata andate su Edit Setting per verificare che sia tutto a posto

Pulsanti per andare a inizio o a fondo pagina e per farla scorrere a velocità prestabilita.

In moltissimi siti sono presenti dei bottoni per aiutare il navigatore nello spostarsi all'interno della pagina. La soluzione più semplice è quella di mettere un pulsante per tornare a inizio pagina e un altro per spostarsi alla fine della stessa. Questi spostamenti possono essere resi più eleganti e meno repentini attraverso la libreria JQuery. L'esempio più semplice è proprio quello del pulsante per tornare al top del post che utilizza un semplice link per funzionare. Un metodo più sofisticato è quello di utilizzare due icone per andare a inizio e a fondo pagina che usano anche JQuery.

La soluzione più completa che avevo proposto fino a questo momento consisteva di due bottoni affiancati per spostarsi al top o a fondo pagina usufruendo di ben sei stili differenti di icone. Questo articolo vuole mostrare come installare un tool di 6 pulsanti sempre visibili in posizione fissa in basso a destra della pagina che consentano le seguenti azioni: al Top della Pagina, Pagina Su, Pagina Giù, Fondo Pagina, Auto Scroll e Stop Auto Scroll. Lascio ai lettori più acculturati in materia se sia più giusto scrivere Su senza accento o con l'accento e mi occuperò degli ultimi due pulsanti

Come inserire un pulsante per condividere i post su Tumblr.

Questo si può definire veramente un instant post visto che lo sto scrivendo a seguito di un commento appena ricevuto su un pulsante per condividere i post di Blogger su Tumblr. Esiste proprio una pagina di Tumblr con i codici dei bottoni che possiamo usare a questo scopo. Nella parte alta ci sono i tasti per seguire un sito di Tumblr e in quella bassa per condividere le pagine web su un blog di Tumblr.

Andiamo con ordine. Se desideriamo inserire il codice per seguire il nostro blog su Tumblr va prima di tutto selezionato il tipo di bottone quindi dobbiamo andare su Prendi il codice dopo aver digitato l'URL personalizzabile del nostro sito su Tumblr che potrà essere p.e ernesto-tirinnanzi.tumblr.com. Il codice ottenuto sarà quello di un iFrame che, se cliccato, farà aprire un'altra scheda del browser di Tumblr con il pulsante Segui. I navigatori vi potranno cliccare sopra per seguire il blog di Tumblr

Pulsanti con contatore di Twitter, Facebook e Google Plus per la sidebar di Blogger.

Dopo che molti lettori mi hanno chiesto come abbia fatto a inserire i pulsanti di condivisione di Facebook, Twitter e Google Plus nella sidebar di destra mi sono finalmente deciso a farci un post. Non illustrerò esattamente il procedimento che ho seguito visto che i javascript di Google Plus e di Facebook li ho inseriti nel modello dato che mi servono anche per la altri widget come il Like Box. Il codice che vado a presentare è invece funzionante senza dover modificare il template.

La particolarità di questi bottoni è che sono visibili in tutte le pagine del blog e permettono quindi di condividere oltre ai post anche le pagine di etichette, quelle di archivio e la homepage.

Come creare dei bottoni con gradiente che puntano a un link.

I bottoni per il blog in genere vengono sostituiti con delle immagini che svolgono il loro compito in modo praticamente identico e sono più semplici da creare e da configurare. E' evidente però che l'utilizzo di pulsanti dà un tocco di maggiore professionalità a tutto il sito.

Iniziamo a vedere quale sia il codice da usare per inserire un bottone che punti a un determinato URL e che apra quella pagina se cliccato. Tale indirizzo può essere quello di un post del sito, di un video su Youtube, di un feed o che comunque conduca in qualche parte del web. I parametri da modificare sono appunto l'indirizzo della pagina e il testo da visualizzare all'interno del bottone

Bottoni per condividere su Facebook, Twitter e Google Plus gli articoli di Blogger.

Qualche anno fa alla fine dei post di molti blog si poteva notare tutta una serie di pulsanti per condividere l'articolo nei vari social network e social bookmarking. Da allora hanno perso ci sono diversi servizi che hanno perso importanza quali Technorati, Delicious e Digg mentre altri sono diventati assolutamente essenziali. Attualmente gli imprescindibili sono solo tre: Facebook, Twitter e Google Plus.

C'è stata quindi una certa pulizia nei layout dei siti che ha portato a lasciar perdere quei pulsanti che tanto non erano usati da nessuno e a dare invece una maggiore evidenza ai tre servizi appena citati. La proposta di questo articolo è l'installazione di un widget visibile alla fine di tutti i post che mostri un invito per condividere il contenuto appena letto mediante i classici bottoni resi in questo modo più visibili

Inserire nel layout e nell'header di Blogger immagini, bottoni, ecc.

In linea di massima possiamo inserire un oggetto in qualsiasi punto del layout di Blogger. Lo possiamo fare con bottoni ma anche con pulsanti e pure con certi widget. Si può scegliere un posizionamento assoluto oppure un posizionamento flottante che mantiene fisso l'oggetto allo scorrere della pagina.

La differenza tra le due impostazioni sta nel CSS position:absolute; oppure position:fixed;. In questo post mi occuperò del primo caso ma con una semplice modifica del codice si può facilmente passare alla seconda tipologia di inserimento.

COME INSERIRE UN OGGETTO NEL LAYOUT DI BLOGGER

Per semplicità prendiamo come esempio una immagine ma la cosa funziona anche per i pulsanti ecc. Ci si deve solo ricordare che il modello di Blogger è in XML quindi, in taluni casi è opportuno convertire in questo linguaggio il codice dell'oggetto da inserire mediante il tool Blogcrowds.

Bottoni floreali per spostarsi a inizio e a fondo pagina.

Vediamo come inserire dei bottoni nel layout del nostro blog su Blogger in modo da spostarsi velocemente all'inizio e alla fine della pagine. Ho inserito due bottoni realizzati con una immagine di un fiore che è piaciuta molto a una lettrice ma si possono usare anche delle immagini più asettiche.

 

Vi ricordo che ho dedicato a questo argomento anche un post che però illustrava come inserire il solo bottone per tornare all'inizio  e un altro articolo che aveva anche il pulsante per andare alla fine del post ma non aveva implementato alcun effetto.

 

In questo articolo saranno presentati due bottoni molto simili che permetteranno di spostarsi dal basso in alto e viceversa usando JQuery e un po' di effetto opacità.

 

Come inserire i bottoni di condivisione animati su Blogger.

Ecco un'altra interessante variante per l'inserimento di pulsanti di condivisione nei vari social network e social bookmarking. La novità è che stavolta si tratta di bottoni che si animano al passaggio del mouse con un movimento orizzontale che sfrutta la libreria JQuery.

Ho inserito i pulsanti di Facebook, Twitter, Google Plus, Digg, LinkedIn, OKNotizie e Stumbleupon. Alcuni di questi social possono però essere sostituiti da altri che ritenete più utili mantenendo la stessa sintassi e acquisendo il codice dall'articolo che illustra come crearsi da soli delle icone di condivisione.

Quando un navigatore passerà con il cursore sopra a queste icone provocherà un movimento laterale decisamente originale. Ovviamente quando si cliccherà sopra a un bottone si potrà condividere il post sul social network corrispondente