Aiuto e supporto ai creatori di forum Forumattivo. Creare un forum e amministrarlo. Scopri nuove guide, nuovi tutoriali, nuove astuzie nel supporto di Forumattivo

Aggiungi nuovi bottoni di condivisione e funzioni aggiuntive nella Toolbar

Forum dei Forum: Aiuto per Forumattivo ::  Forumattivo & Voi ::  :: Tutorial :: Header del forum


Tutorial Aggiungi nuovi bottoni di condivisione e funzioni aggiuntive nella Toolbar

Messaggio Da Niko Dom 17 Gen 2021 - 14:01

Aggiungi nuovi bottoni di condivisione e funzioni aggiuntive nella Toolbar


Descrizione

Questo tutorial ti insegnerà come gestire i pulsanti visualizzati nella sezione Condividi della barra degli strumenti di Forumattivo.
Toolbar - Aggiungi nuovi bottoni di condivisione e funzioni aggiuntive nella Toolbar Share10

Imparerai come creare i tuoi pulsanti, rimuovere quelli esistenti e altro in questo tutorial .. :bene:

Installa il codice javascript

Per iniziare è necessario installare un piccolo script che verrà utilizzato per gestire i pulsanti di #condivisione e le funzioni aggiuntive. Vai al tuo Pannello di amministrazione> Moduli> Gestione codici JavaScript e crea un nuovo script con le seguenti impostazioni.

  • Titolo: A tua scelta
  • Posizionamento: in tutte le pagine
  • Codice:
    Codice:
    $(function() {
      var share = {
     
        text : _lang.Share,
     
        buttons : {
          /* DEFAULT SHARE BUTTONS */
          fb : {
            enable : true,
            title : 'Condividi su Facebook'
          },
       
          twitter : {
            enable : true,
            title : 'Condividi su Twitter'
          },
       
          gp : {
            enable : true,
            title : 'Condividi su Google Plus'
          },
       
          mail : {
            enable : true,
            title : 'Invia la pagina via email ad un amico'
          },
       
          rss : {
            enable : true,
            title : 'Visualizza il Feed RSS di questa pagina'
          },
     
          /* START CUSTOM SHARE BUTTONS */
       
          /* extra share buttons */
          pinterest : {
            enable : true,
            innerHTML : '<img src="http://i21.servimg.com/u/f21/18/21/60/73/pinter10.png" />',
            title : 'Condividi suPinterest',
         
            onclick : function(e) {
              var media = prompt('Stai per creare un Pin di questa pagina.');
           
              if (media == null) return false;
              else if (media == '') media = $('meta[property="og:image"]').attr('content') || '';
           
              window.open('http://pinterest.com/pin/create/button/?url=' + encodeURIComponent(window.location.href) + (media ? '&media=' + encodeURIComponent(media) : '') + '&description=' + encodeURIComponent(document.title), '', 'menubar=no,status=no,scrollbars=no,width=800,height=600');
              e.preventDefault();
            }
          },
       
          tumblr : {
            enable : true,
            innerHTML : '<img src="http://i21.servimg.com/u/f21/18/21/41/30/tumblr11.png" />',
            title : 'Condividi su Tumblr',
         
            onclick : function(e) {
              window.open('http://www.tumblr.com/share/link?url=' + encodeURIComponent(window.location.href), '', 'menubar=no,status=no,scrollbars=no,width=800,height=600');
              e.preventDefault();
            }
          },
       
          reddit : {
            enable : true,
            innerHTML : '<img src="http://i21.servimg.com/u/f21/18/21/41/30/reddit10.png" />',
            title : 'Condividi su Reddit',
         
            onclick : function(e) {
              window.open('http://www.reddit.com/submit?url=' + encodeURIComponent(window.location.href) + '&title=' + encodeURIComponent(document.title), '', 'menubar=no,status=no,scrollbars=no,width=800,height=600');
              e.preventDefault();
            }
          },
       
          /* misc buttons */
          print : {
            enable : false,
            innerHTML : '<img src="http://i21.servimg.com/u/f21/18/21/60/73/print11.png" />',
            title : 'Stampa la pagina',
         
            onclick : function(e) {
              window.print();
              e.preventDefault();
            }
          },
       
          copy_url : {
            enable : false,
            innerHTML : '<img src="http://i21.servimg.com/u/f21/18/21/41/30/link10.png" />',
            title : 'Copia URL BBCode',
         
            onclick : function(e) {
              prompt('Copia il codice BBCode di questa pagina ?', '[url=' + window.location.href + ']' + document.title + '[/url]');
              e.preventDefault();
            }
          },
       
          top : {
            enable : false,
            innerHTML : '<img src="http://i21.servimg.com/u/f21/18/21/41/30/top10.png" />',
            title : 'Torna in cima alla pagina',
            href : '#top'
          },
       
          bottom : {
            enable : false,
            innerHTML : '<img src="http://i21.servimg.com/u/f21/18/21/41/30/bottom11.png" />',
            title : 'Vai in fondo alla pagina',
            href : '#bottom'
          }
          /* END CUSTOM SHARE BUTTONS*/
        }
      },
     
      newList = document.createElement('SPAN'),
      fa_share,
      fa_share_text,
      existingNode,
      newNode,
      i, k;
     
      $(function() {
        fa_share = document.getElementById('fa_share');
        fa_share_text = document.getElementById('fa_share_text');
        if (!fa_share) return;
     
        // apply new share text
        if (fa_share_text) fa_share_text.innerHTML = share.text + ' : ';
     
        // redefine share buttons
        for (i in share.buttons) {
          existingNode = document.getElementById('fa_' + i);
     
          // modify exisiting share buttons
          if (existingNode) {
            if (share.buttons[i].enable) {
              for (k in share.buttons[i]) if (k != 'enable') existingNode[k] = share.buttons[i][k];
              newList.appendChild(existingNode);
            }
            else existingNode.parentNode.removeChild(existingNode);
          }
       
          // create a new share button
          else if (share.buttons[i].enable) {
            newNode = document.createElement('A');
            newNode.id = 'fa_' + i;
         
            for (k in share.buttons[i]) if (k != 'enable') newNode[k] = share.buttons[i][k];
            if (!newNode.href) newNode.href = '#';
         
            newList.appendChild(newNode);
          }
     
        }
     
        fa_share.appendChild(newList);
      });
    });


Per impostazione predefinita, questo script aggiungerà 3 nuovi pulsanti di condivisione; Pinterest, Tumblr e Reddit, oltre a quattro pulsanti aggiuntivi disabilitati. Lo script aggiungerà anche suggerimenti a tutti i pulsanti esistenti. Wink

Per sapere come gestire questi pulsanti, leggi la sezione successiva. :good:

Gestisci i vari pulsanti

Lo scopo generale di questo script è consentire la personalizzazione completa della sezione "Condividi" sulla barra degli strumenti. Ad esempio l'aggiunta di nuovi pulsanti, collegamenti o la modifica completa dello scopo di quest'area. Qui, ti aiuteremo a insegnarti come gestire e creare pulsanti.

Modifica il testo dei bottoni condivisione

Se desideri modificare il testo visualizzato accanto ai pulsanti, puoi modificare la proprietà del testo che dovrebbe trovarsi all'inizio dello script. Assomiglia a questo:
Codice:
text : _lang.Share,

_lang.Share è la lingua dei testi predefinita per "Condividi" e cambia in base alla lingua dell'utente. Se vuoi personalizzarlo per dire qualcos'altro, elimina semplicemente _lang.Share e sostituiscilo con una stringa, come sotto.
Codice:
text : 'Buttons',

Quindi salva

Gestisci i bottoni esistenti

Questa sezione spiegherà come gestire i pulsanti esistenti in questo script. Come abilitare, disabilitare e apportare piccole modifiche. Innanzitutto esamineremo come abilitare e disabilitare i pulsanti.

I pulsanti utilizzano un valore booleano per determinare se sono abilitati o disabilitati;

true: il pulsante è abilitato
false: il pulsante è disabilitato

Prendi il pulsante Facebook per esempio:
Codice:
fb : {
  enable : true,
  title : 'Share on Facebook'
},

Noterai che contiene una proprietà di abilitazione. Il pulsante è attualmente abilitato, come puoi vedere dal valore "true", ma cambiare questa proprietà su false rimuoverà il pulsante dalla sezione di condivisione. Ogni pulsante contiene la proprietà di attivazione in modo da poter attivare e disattivare facilmente i pulsanti come un interruttore della luce. :bene:
Codice:
enable : false, // bottone disattivato

Ora che lo sai, dovresti essere in grado di disabilitare i pulsanti che non desideri e magari abilitare alcuni dei pulsanti extra inclusi in questo script.

Ora, sono sicuro che hai notato anche la proprietà del titolo sul pulsante Facebook:
Codice:
title : 'Condividi su Facebook'

Ciò aggiunge un valore all'attributo del titolo del pulsante. Quindi quando passi il mouse sul pulsante verrà visualizzato "Condividi su Facebook". Qualsiasi attributo utilizzabile in HTML può essere applicato qui. Assicurati solo di separare ogni coppia attributo: valore con una virgola.

Per ulteriori informazioni sugli attributi HTML, vedere uno dei seguenti riferimenti:



Crea nuovi bottoni

Questa sezione ti guiderà attraverso la creazione di un semplice pulsante che collega agli argomenti più recenti sul tuo forum.

In primo luogo, il pulsante dovrebbe iniziare con un nome non ancora utilizzato, due punti e due parentesi graffe. Come nell'esempio seguente:
Codice:
new_topics : {
 
}

Nota: se questo pulsante viene prima di un altro pulsante, assicurati di aggiungere una virgola alla fine dell'ultima parentesi.

Ora che il layout di base è impostato, puoi iniziare ad aggiungere proprietà a questo pulsante. Innanzitutto ti consigliamo di aggiungere la proprietà enable e impostare il valore su true in modo che venga visualizzato sulla barra degli strumenti.
Codice:
new_topics : {
  enable : true
}

Successivamente ti consigliamo di aggiungere del contenuto a questo pulsante in modo che sia visibile. Aggiungi una virgola dopo il valore di enable e scrivi innerHTML, quindi due punti e infine due virgolette singole:
Codice:
new_topics : {
  enable : true,
  innerHTML : ''
}

Tra queste virgolette puoi scrivere testo normale o HTML per formattare immagini e simili. Per questo esempio, useremo un'immagine HTML, ma puoi scrivere quello che vuoi ovviamente. Wink
Codice:
new_topics : {
  enable : true,
  innerHTML : '<img src="http://i21.servimg.com/u/f21/18/21/41/30/new10.png" />'
}

Nota: se stai utilizzando una virgoletta singola tra le virgolette singole correnti, dovrai eseguire l'escape di quella che hai appena scritto in questo modo: \ 'altrimenti, la stringa terminerà prima causando un errore.

Abbiamo quasi finito, ora che abbiamo riempito il pulsante con il contenuto, dobbiamo solo fare in modo che ci porti su un'altra pagina quando viene cliccato. Per fare ciò, dobbiamo aggiungere la proprietà href. Come prima, aggiungi una virgola dopo il valore di innerHTML, quindi scrivi href, due punti e due virgolette singole:
Codice:
new_topics : {
  enable : true,
  innerHTML : '<img src="http://i21.servimg.com/u/f21/18/21/41/30/new10.png" />',
  href : ''
}

Fai proprio come abbiamo fatto con innerHTML e inserisci un collegamento tra le virgolette singole di href. Poiché volevamo che questo collegasse ai post più recenti, inseriremo il percorso della pagina di ricerca; / ricerca? search_id = newposts
Codice:
new_topics : {
  enable : true,
  innerHTML : '<img src="http://i21.servimg.com/u/f21/18/21/41/30/new10.png" />',
  href : '/search?search_id=newposts'
}

Tutto ciò che resta da fare ora è salvare e il tuo nuovo pulsante dovrebbe essere visibile! Se lo desideri, puoi anche aggiungere proprietà aggiuntive come il title per visualizzare un suggerimento o il target per aprire il collegamento in una nuova finestra. Lascio un esempio di questo di seguito. Wink
Codice:
new_topics : {
  enable : true,
  innerHTML : '<img src="http://i21.servimg.com/u/f21/18/21/41/30/new10.png" />',
  href : '/search?search_id=newposts',
  title : 'Visualizza i post dalla ultima visita',
  target : '_blank'
}

Se hai domande sulla creazione di un pulsante personalizzato, puoi anche chiedere a noi sul forum. :good:

Modifichiamo un po' lo stile

Questa sezione esaminerà la regolazione dello stile dei pulsanti di condivisione utilizzando CSS.
(Visualizza> Colori> Foglio di stile CSS)

Lo stile dei pulsanti di condivisione può essere facile. Se non hai aggiunto un ID personalizzato per il tuo pulsante, ne verrà generato uno quando viene creato in questo modo: fa_button_name. Avrà il prefisso "fa_" e quindi il nome del tuo pulsante. Quindi, se volessimo modellare il pulsante Pinterest, la nostra regola CSS sarebbe simile a questa:
Codice:
#fa_pinterest {
  /* proprietà di stile (CSS) */
}

Quindi tutto ciò che devi fare è scrivere le proprietà di stile per la regola. Puoi usarlo per regolare l'altezza, la posizione, lo sfondo, ecc. I pulsanti predefiniti usano le immagini di sfondo per visualizzare le loro icone, quindi se vuoi farlo in questo modo puoi usare la proprietà CSS background-image, in questo modo:
Codice:
#fa_pinterest {
  width:30px;
  height:30px;
  background-image:url('http://i21.servimg.com/u/f21/18/21/60/73/pinter10.png');
}

Lista dei bottoni di default

Questa sezione elencherà tutti i pulsanti inclusi in questo script e il loro scopo. La maggior parte è abilitata per impostazione predefinita, mentre altre sono disabilitate. Puoi usare questo elenco per decidere cosa vuoi sulla tua barra degli strumenti.

  • fb Il pulsante fb ti consente di condividere i contenuti del tuo forum su Facebook.
  • twitter Il pulsante twitter ti consente di condividere contenuti sul tuo forum su Twitter.
  • gp Il pulsante gp ti consente di condividere i contenuti del tuo forum su Google Plus.
  • mail Il pulsante mail consente di comporre un nuovo messaggio di posta elettronica quando si fa clic su di esso.
  • rss Il pulsante rss ti permette di visualizzare il feed RSS del tuo forum.


Pulsanti personalizzati

  • pinterest Il pulsante pinterest ti consente di condividere contenuti sul tuo forum su Pinterest.
  • tumblr Il pulsante tumblr ti permette di condividere contenuti sul tuo forum su Tumblr.
  • reddit Il pulsante reddit ti consente di condividere i contenuti del tuo forum su Reddit.
  • print Il pulsante print consente di stampare la pagina corrente quando si fa clic su di esso.
  • copy_url Il pulsante copy_url ti permette di copiare l'URL del BBCode della pagina corrente.
  • top Il pulsante in alto ti permette di saltare velocemente all'inizio della pagina.
  • bottom Il pulsante bottom consente di passare rapidamente alla fine della pagina.


Per ogni problema o domanda, siamo a vostra disposizione nel forum di supporto :good:

Tutorial creato da Ange Tuteur del forum di supporto inglese e Tradotto da Niko

Niko
Niko
Moderatore
Moderatore

Sesso : Maschio
Età : 28
Messaggi : 9576
Località : Provincia di Varese

https://www.fmcodes.net/
Niko è stato ringraziato dall'autore di questo topic.

Visualizza l'argomento precedente Visualizza l'argomento successivo Torna in alto

- Argomenti simili

Forum dei Forum: Aiuto per Forumattivo ::  Forumattivo & Voi ::  :: Tutorial :: Header del forum

 
Permessi in questa sezione del forum:
Non puoi rispondere agli argomenti in questo forum.