Aggiornato:  | 8 commenti :

Come rendere visibile il pulsante Mi Piace di Facebook anche nei blog con sfondo scuro.


Se avete un blog a sfondo scuro e avete provato a inserire l'iFrame del Mi Piace di Facebook avrete certamente notato che la parte relativa al testo non viene visualizzata molto bene. Ecco infatti come appare in un caso come questo

mi-piace-facebook 

Viene male agli occhi per cercare di leggere il testo. Ricordo che il codice è da inserire subito sopra alla riga <div class='post-footer'> o subito sotto a <data:post.body/>. Se si ha un modello in cui è stato inserito anche il Read More si può cercare il blocco di codice del jump che sarà simile a questo

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a>
</div>
</b:if>

e incollarlo subito dopo. Il codice per i blog chiari ricordo che era questo

<!--FACEBOOK MI PIACE INIZIO-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot;+ data:post.url + &quot;&amp;layout=standard&amp;show-  faces=true&amp;width=530&amp;height=30&amp;action=like&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:530px; height:30px'/>
</b:if>
<!--FACEBOOK MI PIACE FINE-http://www.ideepercomputeredinternet.com-->

Per le personalizzazioni riguardo alla presenza o meno anche dell'icona di chi clicca su Mi Piace vi rimando all'articolo sul Like di Facebook. Come vedete dal codice esiste il tag "style" per cui si potrebbe pensare che sia possibile cambiare il colore del testo ma non è così semplice e immediato visto che, come detto, si tratta di un iFrame.

Per far diventare le scritte di colore chiaro e quindi visibili anche nei blog a sfondo scuro dobbiamo agire su light, evidenziato di rosso nel blocco precedente. Bisogna semplicemente sostituire questa espressione inglese con dark dagli ovvi significati. Ecco quindi il codice per i blog con il background scuro

<!--FACEBOOK MI PIACE INIZIO-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show-  faces=true&amp;width=530&amp;height=30&amp;action=like&amp;colorscheme=dark&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:530px; height:30px'/>
</b:if>
<!--FACEBOOK MI PIACE FINE-http://www.ideepercomputeredinternet.com-->

Le due righe evidenziate di rosso servono per mostrare il pulsante solo nei post. Se lo volete in tutte le pagine basta eliminarle. Dopo questa modifica il pulsante si vedrà in questo modo

mi-piace-facebook-blog-scuri

cioè decisamente più visibile e usabile.

8 commenti :

  1. SEI UN GRANDE!!!!!!

    sono stato giorni a scervellarmi senza trovare soluzioni ho provato tutti i codici possibili.

    Ne approfitto anche per chiederti una cosa.
    Nei blog a fondo scuro lo stesso problema si rivela anche quando uno mette il fanbox di face.
    Se vai sul mio blog e vedi a destra nella sidebar verso la fine capirai cosa intendo

    RispondiElimina
  2. @Redazione
    Sto studiando il problema e guardo se trovo qualche soluzione. In un mio blog ho un problema simile. A dir la verità la soluzione l'avevo trovata ma non funziona con IE :-(

    RispondiElimina
  3. Perfetto, infatti mi stavo proprio chiedendo come ovviare a questo problema.
    Di nuovo grazie mille

    RispondiElimina
  4. Complimenti per il tuo Blog e per la chiarezza con la quale scrivi.
    Volevo sottoporti un quesito.
    Quando i lettori entrano sul sito versione mobile, i tasti di condivisione facebook e twitter sono incorporati dentro un tasto chiamato "condividi".
    E' possibile scorporare quei tasti e farli visualizzare direttamente, senza costringere il lettore a cliccare sul bottone condividi?

    RispondiElimina
    Risposte
    1. Non so a che widget ti riferisci ma puoi inserire un widget a piacere solo nella versione mobile
      http://www.ideepercomputeredinternet.com/2013/10/blogger-versione-mobile-desktop-personalizzare-editor-html.html
      @#

      Elimina

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