Pubblicato il 19/11/15 - aggiornato il  | Nessun commento :

Come installare in Blogger il bottone di condivisione di Skype.

Come installare su Blogger il bottone di condivisione di Skype per permettere ai lettori di inviare link ai nostri post con un click.
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.

condivisione-post-skype-blogger

Verrà automaticamente condivisa la pagina corrente del vostro sito visto che nel codice ho inserito un apposito tag di Blogger che rileva in modo automatico l'URL del post o della pagina.  Nella finestra che si aprirà dopo aver cliccato sul pulsante di Skype il lettore dovrà selezionare il contatto con cui condividere il post per poi cliccare su Invia.

Per l'installazione dopo aver salvato il template si va su Modello > Modifica HTML e si cerca la riga </head> quindi, subito sopra a questa, si incolla il seguente codice

<!-- Skype Button Start -->
<script>
//<![CDATA[
(function(r, d, s) {
    r.loadSkypeWebSdkAsync = r.loadSkypeWebSdkAsync || function(p) {
        var js, sjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(p.id)) { return; }
        js = d.createElement(s);
        js.id = p.id;
        js.src = p.scriptToLoad;
        js.onload = p.callback
        sjs.parentNode.insertBefore(js, sjs);
    };
    var p = {
        scriptToLoad: 'https://swx.cdn.skype.com/shared/v/latest/skypewebsdk.js',
        id: 'skype_web_sdk'
    };
    r.loadSkypeWebSdkAsync(p);
})(window, document, 'script');
//]]>
</script>
<!-- Skype Button End -->

Si salva il modello di Blogger. Successivamente si va su Layout > Aggiungi un gadget > Base > HTML/Javascript e, in Sezioni del sito, si incolla quest'altro codice

<div class='skype-share' data-expr:href='data:post.canonicalUrl' data-lang='it' data-style='large' ></div>

quindi si salva l'elemento e si posiziona nel layout con il drag & drop del mouse. I parametri da configurare sono due. In data-lang='it' si può scegliere una lingua diversa dall'italiano mentre il parametro style='large' serve per lo stile del bottone. Come illustrato nelle istruzioni di installazione dei bottoni di Skype lo stile large può essere sostituito da uno dei seguenti: small, circle, square e custom. Le prime tre opzioni non hanno bisogno di spiegazione mentre l'ultima è quella per personalizzare completamente il bottone con i colori del nostro sito. Ecco un esempio di codice:

<div class='skype-share' data-expr:href='data:post.canonicalUrl' data-lang='it' data-style=''  style='text-align:center;width:100px;margin:auto;height:22px;background-color:#00AFF0;color:#FFF; font-size:18px;'>Share</div>

che mostrerà un pulsante rettangolare con le dimensioni di 100x22 pixel, con codice del colore dello sfondo :#00AFF0 e codice del colore del testo color:#FFF mentre Share sarà il testo del bottone e font-size:18px la dimensione dei caratteri del testo.

bottone-condivisione-skype[4]
Per controllare la funzionalità del pulsante di Skype aprite il post di Demo


Nessun commento :

Posta un commento

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy