Pulsanti social su Joomla

[danielepenna]

Pulsanti social su Joomla

Ciao a tutti,
scusate la mia ignoranza, ma non riesco ad inserire i bottoni social sul mio sito. Qualcuno potrebbe indicarmi qualche video o link che mi possa aiutare a capire come devo fare?
Grazie anticipatamente.
Daniele

[fda]

Ciao danielepenna, benvenuto sul ForumGT.
Indica per piacere la versione di Joomla! e l'estensione o il widget scelto per implementare i pulsanti di condivisione.

[danielepenna]

Ciao FDA,
grazie per il benvenuto e per avermi risposto! La versione del mio Joomla è: 3.4.3
Sono alle prime armi con Joomla e brancolo un po' nel buio. Vorrei inserire dei bottoni che rimandano ai vari social network, non quelli "condividi pagina". Ne ho visti parecchi, ma non so quali scegliere. Avresti qualche suggerimento da darmi?

Grazie!

[fda]

I pulsanti per collegare i social sono semplici link, basta aggiungere qualche riga di html e applicare stili personalizzati se serve.

Alcuni temi già includono i link ai social tramite pulsanti/icone e devi soltanto impostarli dal pannello; in altri casi vanno inseriti via template (file php) oppure in un modulo da posizionare; in alcuni casi, infine, è possibile servirsi di estensioni che presentano campi in cui inserire il codice html (es. barre che si fissano ai bordi).

Per quanto riguarda il codice html, puoi usare tue immagini (eventualmente in sprite css) oppure icone caricate da una libreria.

Esempio 1: uso di una libreria
Nel caso volessi usare fontawesome (scarica da: http:// fontawesome.io), devi caricare la libreria e fare in modo che venga richiamata nell'head delle pagine in maniera simile a questa:

<link rel="stylesheet" href="css/font-awesome/css/font-awesome.min.css">

quindi aggiungere questo codice html:

<div>
    <ul class="socialinks">
        <li><a href="https:// ...Facebook" title="Facebook" target="_blank"><i class="fa fa-facebook-square fa-2x"></i></a></li>
        <li><a href="https:// ...Twitter" title="Twitter" target="_blank"><i class="fa fa-twitter-square fa-2x"></i></a></li>
        <li><a href="https:// ...YouTube" title="YouTube" target="_blank"><i class="fa fa-youtube-square fa-2x"></i></a></li>
        <li><a href="https:// ...GooglePlus" title="GooglePlus" target="_blank"><i class="fa fa-google-plus-square fa-2x"></i></a></li>
    </ul>
</div>

Devi chiaramente sostituire i pecorsi in href con gli url degli account social.
L'aspetto dipende dagli stili. Se non avessi stili potresti considerare un codice inline come questo:

<style type="text/css">
    ul.socialinks {list-style: none; float: right;}
    ul.socialinks li {display: inline; margin-left: 10px;}
    ul.socialinks li a {color: #555555;}
    ul.socialinks li a:hover {color: #C72323;}
</style>

Considera che alcuni template già includono fontawesome.

Se non hai già caricato fontawesome o un'analoga libreria e vuoi fare tutto a mano da zero, devi scegliere dove mostrare i link ai social e come fare per mostarli, che poi potrebbe significare capire in quale posizione pubblicare il modulo custom html che deve contenere l'html postato sopra (quello con i punti elenco). Poi dovrai fare caricare il css nell'head e inserire gli stili personalizzati. Se non riesci da solo posta pure qui un commento.

Esempio 2: uso di immagini
Se invece del punto elenco con gli elementi i per le icone usi delle immagini? Il codice html è simile ma hai un vantaggio e uno svantaggio:

• il vantaggio è che non devi caricare una libreria, cosa che ti fa risparmiare una richiesta e il tempo di scaricamento (bene se la libreria la usi poco, ad esempio solo per le icone social);
• lo svantaggio è che devi scaricare le immagini e quindi avrai una richiesta in più per ciascuna immagine (a meno che non usi una tecnica come lo sprite css, utile se hai nel sito tante immagini di piccole dimensioni).

L'html potrebbe essere simile a questo:

<div>
    <div id="socialinks">
        <div><a href="https:// ...Facebook" title="Facebook" target="_blank"><img src=facebook alt="...facebook"></a></div>
        <div><a href="https:// ...Twitter" title="Twitter" target="_blank"><img src=twitter alt="...twitter"></a></div>
        <div><a href="https:// ...YouTube" title="YouTube" target="_blank"><img src=youtube alt="...youtube"></a></div>
        <div><a href="https:// ...GooglePlus" title="GooglePlus" target="_blank"><img src=googleplus alt="...googleplus"></a></div>
    </div>
</div>

In img src=... dovrai inserire i percorsi delle immagini usate per le icone social.

Gli stili inline potrebbero essere così:

<style type="text/css">
            div#socialinks {float: right;}
            div#socialinks div {display: inline; margin-left: 10px;}
            div#socialinks div a {opacity: 1;}
            div#socialinks div a:hover {opacity: 0.7;}
</style>

Nulla ti vieta di migliorare gli stili, per esempio aggiungendo un effetto di transizione morbido.

Esempio 3: uso di un'estensione
Il mio consiglio è di provarne più di una a partire da quelle gratuite (poi facci sapere quale hai scelto e come ti trovi ). Inizia da qui: extensions.joomla.org/category/social-web/social-presence

[danielepenna]

Grazie mille, sei stato gentilissimo!