No consigo poner botón de Google + junto a otros iconos

[nosempres]

Buenas tardes,


Tengo un problema con el icono de Google +, cuando intento añadirlo al lado de otros dos iconos de facebook y twitter el boton de google se monta debajo de ellos y quiero que aparezca al lado.


Este sería el código de los iconos de las redes sociales y idiomas.

Código HTML:

<p><a href="/index.php/en/">
<img alt="http://www.barcelona-beach.com//images/United-Kingdom.png" src="http://www.barcelona-beach.com//images/United-Kingdom.png" longdesc="English"></a>
<a href="/index.php/de/"> 
<img alt="http://www.barcelona-beach.com/images/Germany.png" src="http://www.barcelona-beach.com/images/Germany.png" longdesc="Deutsch" border="0"></a>
<a href="/index.php/fr/"> 
<img alt="http://www.barcelona-beach.com/images/France.png" src="http://www.barcelona-beach.com/images/France.png" longdesc="Francais" border="0"></a>
<a href="/index.php/es/"> 
<img alt="http://www.barcelona-beach.com/images/Spain.png" src="http://www.barcelona-beach.com/images/Spain.png" longdesc="Spanish" border="0"></a><br>
<a href="https://www.facebook.com/barcelona.beach.1?sk=info&edit=eduwork" target="_blank">
<img class="decoded" alt="http://www.barcelona-beach.com//templates/aquilo/images/facebook.png" src="http://www.barcelona-beach.com//templates/aquilo/images/facebook.png"></a> 
<a href="https://twitter.com/bcn_beach_com" target="_blank"> <img class="decoded" alt="http://www.barcelona-beach.com//templates/aquilo/images/twitter.png" src="http://www.barcelona-beach.com//templates/aquilo/images/twitter.png"></a> <!-- Inserta esta etiqueta donde quieras que aparezca Botón +1. -->

Este otro es el de Google + que tendria queir a la derecha de los de facebook y twitter.

Código HTML:

<script type="text/javascript">
  window.___gcfg = {lang: 'es'};

  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script><div class="g-plusone" data-annotation="none" data-href="http://www.barcelona-beach.com"></div><br> 

Si entrais en la web podreis comprobar que el botón se monta debajo de los de las redes sociales. http://www.barcelona-beach.com/index.php/en/


Un saludo.

[cesa_r]

El primer error que note esque el <span></span> que hace referiencia al icono de google queda fuera de la etiqueta <p></p> que contiene a los demas iconos sociales. Esto hace el icono de google quede hacia afuera de la etiqueta.

[nosempres]

Como tendria que poner el código de ambos para solo añadirlo y salga bien.

¿Podrias añadirme el código dentro de la etiqueta <p></p>?

Gracias.

[cesa_r]

En primera no almacenes los iconos en una etiqueta <p></p>
quita <p></p> y remplazalo por un <div></div>

a:

<script type="text/javascript">
window.___gcfg = {lang: 'es'};

(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script><div class="g-plusone" data-annotation="none" data-href="http://www.barcelona-beach.com"></div><br>

quitale <div class="g-plusone" data-annotation="none" data-href="http://www.barcelona-beach.com"></div><br>

y ponla dentro del <div></div>:
quedando asi:

<div> //quite <p> y la remplace por un <div>
<a href="/index.php/en/">
<img alt="http://www.barcelona-beach.com//images/United-Kingdom.png" src="http://www.barcelona-beach.com//images/United-Kingdom.png" longdesc="English"></a>
<a href="/index.php/de/">
<img alt="http://www.barcelona-beach.com/images/Germany.png" src="http://www.barcelona-beach.com/images/Germany.png" longdesc="Deutsch" border="0"></a>
<a href="/index.php/fr/">
<img alt="http://www.barcelona-beach.com/images/France.png" src="http://www.barcelona-beach.com/images/France.png" longdesc="Francais" border="0"></a>
<a href="/index.php/es/">
<img alt="http://www.barcelona-beach.com/images/Spain.png" src="http://www.barcelona-beach.com/images/Spain.png" longdesc="Spanish" border="0"></a><br>
<div class="block">
<a href="https://www.facebook.com/barcelona.beach.1?sk=info&edit=eduwork" target="_blank">
<img class="decoded" alt="http://www.barcelona-beach.com//templates/aquilo/images/facebook.png" src="http://www.barcelona-beach.com//templates/aquilo/images/facebook.png"></a>
</div>
<div class="block">
<a href="https://twitter.com/bcn_beach_com" target="_blank"> <img class="decoded" alt="http://www.barcelona-beach.com//templates/aquilo/images/twitter.png" src="http://www.barcelona-beach.com//templates/aquilo/images/twitter.png"></a> <!-- Inserta esta etiqueta donde quieras que aparezca Botón +1. -->
</div>
<div class="block"> //el boton google y los demas iconos sociales los meti en otro div cuya clase es block.
<div class="g-plusone" data-annotation="none" data-href="http://www.barcelona-beach.com"></div> // esto basicamente es el boton google
</div>
</div>

y por ultimo en tus estilos agrega:

.block {
display: inline-block;
}

¡Espero te aiga sido de ayuda!

[nosempres]

Hola,

El tercer código que me facilitas donde lo tengo que introducir, ya que todo este html que te facilito va introducido en una plantilla Joomla desde el Cpanel en una especie de area de texto, no va incluido dentro de ningún archivo .css, html o php. Si intento visualizar el código tal como lo has puesto me aparece en vertical los iconos

[cesa_r]

1. Para modificar una plantilla de Joomla, lo ideal es tener nociones básicas de CSS y HTML. En tu panel de administración entra en el "Gestor de plantillas" y después haz clic sobre la que quieras modificar.

Entonces podrás "editar el archivo CSS", que es donde se asignan los estilos de la plantilla (tipo de fuente, colores, dimensiones, etc.) aqui es donde debes de poner:

.block {
display: inline-block;
}

O bien, "editar el archivo HTML", donde podrás modificar la estructura de tu plantilla (posición de las tablas, divs, módulos, etc).