No se pueden mostrar los Me gusta de Google+ y Facebook en la misma línea

Me he estado golpeando la cabeza durante las últimas horas para resolver esto, pero no funciona.

Quiero mostrar el cuadro Me gusta de Facebook, Twitter y Google + en una línea, pero los muestra en líneas diferentes y solo muestra el cuadro Me gusta de Facebook correctamente.

Aquí está el código que estoy utilizando:

<div class="likefooter">                    

<iframe src="http://www.facebook.com/plugins/like.php?href={$my_base_url}{$story_url}& amp;layout=standard;&amp;show_faces=false&amp;width=450&amp;action=like&amp;font=arial&amp;colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none;  overflow:hidden; width:450px;"></iframe>

<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

<g:plusone size="medium" annotation="inline"></g:plusone>

        </div>  

El archivo CSS está aquí: http://www.box.net/shared/2agu4dy10mb4y3pj7e1m

preguntado el 27 de agosto de 11 a las 23:08

Probablemente debería agregar las partes relevantes de su CSS en la pregunta. El visor de documentos en el sitio al que está enlazando es horrible para navegar por el código. Pero agregue solo las partes que importan, para que la gente no tenga que leerlo todo. -

7 Respuestas

por favor, inténtalo

    <div class="likefooter">                    

    <div style="float:left;"><iframe src="http://www.facebook.com/plugins/like.php?href={$my_base_url}{$story_url}& amp;layout=standard;&amp;show_faces=false&amp;width=450&amp;action=like&amp;font=arial&amp;colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none;  overflow:hidden; width:450px;"></iframe></div>  

    <div style"float:left;"><a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></div>  

   <div style="float:left;"><g:plusone size="medium" annotation="inline"></g:plusone></div>  

     </div>  

Respondido 28 ago 11, 05:08

La solución puede ser mucho más sencilla: el ancho predeterminado del botón de Facebook es 250, abre el html y redúcelo a 75 aproximadamente.

Respondido 15 Jul 12, 19:07

  1. envolver los elementos en <li>
  2. estilizarlos display:inline
  3. omitir el data-width atributo de la <div class="fb-like"> etiqueta.

css:

ul.social { list-style: none outside none; }
ul.social > li { display:inline; }

html:

<ul class="social">
  <li>
    <div id="fb-root"></div>
    <script>{{ facebook SDK script }}</script>
    <div class="fb-like" data-href="{{ your URL }}" data-send="false" data-layout="button_count"  data-show-faces="false"></div>
  </li>
  <li>
    <{{ twitter button }}>
    <script>{{ twitter javascript }}</script>
  </li>
</ul>

contestado el 01 de mayo de 15 a las 17:05

Me gusta tu solución: aquí no hay estilos en línea. Simplemente edite el error tipográfico - "social" en css. Y puedes agregar ul.social > li {vertical-align: top;} ya que FB se está perdiendo, en comparación con otros botones sociales. - pl71

iFrame es un elemento a nivel de bloque por defecto. Tendrá que hacer la visualización: en línea en el CSS. g: plusone podría ser uno también, pero nunca había oído hablar de esa etiqueta.

Respondido 28 ago 11, 04:08

genial ... ¿así que acabo de añadir esta propiedad en CSS? Gracias - Kamran

poner padding-top: 5px; en el que está en la segunda línea.

Respondido 28 ago 11, 04:08

Si los ajustes de CSS no ayudan, asegúrese de que su documento no se esté procesando en modo peculiar. A veces, el modo de renderizado de peculiaridades hace que el botón +1 se muestre en la siguiente línea.

Puede verificar esto usando las herramientas para webmasters de Firefox o intentar enviar su página a un validador (http://validator.w3.org/) para asegurarse de que no haya demasiados errores.

Respondido 31 ago 11, 22:08

Este código funciona:

    <table cellpadding="4" style="width: auto !important; float: none !important; margin: 8px 0;">
                <tr>
<td><img src="http://gnosisarts.com/home/images/fancy_g2.jpg" width="75" border="0" alt="Gnosis Media Group Internet PR Firm" /></td>
                    <!-- Google +1 Section Starts -->
                    <td>
                        <g:plusone size="tall" href="http://gnosisarts.com/home/Internet_PR"></g:plusone>
                        <script type="text/javascript">
                            (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>
                    </td>
                    <!-- Google +1 Section Ends -->

                    <!-- Twitter Button Section Starts -->
                    <td>
                        <!-- async trick from http://techoctave.com/c7/posts/40-xhtml-strict-tweet-button-and-facebook-like-button -->
                        <script type="text/javascript">
                        //<![CDATA[
                        (function() {
                                document.write('<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="gnosisarts" data-url="http://gnosisarts.com/home/Internet_PR">Tweet</a>');
                                var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];
                                s.type = 'text/javascript';
                                s.async = true;
                                s.src = 'http://platform.twitter.com/widgets.js';
                                s1.parentNode.insertBefore(s, s1);
                        })();
                        //]]>
                        </script>
                    </td>
                    <!-- Twitter Button Section Ends -->

                                        <!-- LinkedIn Button Section Starts -->
                    <td>
                        <script type="text/javascript">
                        //<![CDATA[
                        (function() {
                                var e = document.createElement('script');
                                e.type="text/javascript"; e.async = true;
                                e.src = 'http://platform.linkedin.com/in.js';
                                document.getElementsByTagName('head')[0].appendChild(e);
                        })();
                        //]]>
                        </script>
                        <script type="IN/Share" data-url="http://gnosisarts.com/home/Internet_PR" data-counter="top"></script>
                    </td>
                    <!-- LinkedIn Button Section Ends -->

                    <!-- Like Button Section Starts -->
                    <td>
                        <iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Ffacebook.com%2Fgnosisartsmediagroup&amp;send=false&amp;layout=box_count&amp;width=65&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=arial&amp;height=65" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:65px; height:65px;" allowTransparency="true"></iframe>
                    </td>
                    <!-- Like Button Section Ends -->

            </tr>
            </table>

#

Simplemente cambie las URL para compartir en redes sociales y otros parámetros a sus propios sitios en consecuencia.

Eric

Respondido el 21 de diciembre de 12 a las 23:12

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.