Cómo agregar botones sociales sin necesidad de instalar Plugins

thezar · 27 Sep 2012

Hola!

Amigos alguno de ustedes me podría decir cómo puedo colocar botones alineados en todos los post de WP sin necesidad de instalar plugins?, aparte de que estos estén con contadores y alineados, para Twitter, Facebook, Google+,

He buscado y buscado pero no logro dar con una respuesta exacta y precisa de lo que necesito,

Si alguno se interesa en responder por favor me indica donde debo colocar el código,

Me gustaría que se viera algo como esto:

Saludos!

spermatodj · 27 Sep 2012

Utiliza los botones de addthis.com, es super sencillo.

thezar · 27 Sep 2012

spermatodj dijo:
Utiliza los botones de addthis.com, es super sencillo.

Me parece que no ofrece lo que busco para wordpress.com, gracias igual!

Zuruck · 27 Sep 2012

y1duque dijo:
Me parece que no ofrece lo que busco para wordpress.com, gracias igual!

con Tablas se puede, te recomiendo el uso de Socialite.js para acelerar los botones.

Pero para alinear los botones simplemente con tablas... busca en Google "alinear botones sociales"

:encouragement:

thezar · 27 Sep 2012

ZombieAnonimo dijo:
con Tablas se puede, te recomiendo el uso de Socialite.js para acelerar los botones.

Pero para alinear los botones simplemente con tablas... busca en Google "alinear botones sociales"

:encouragement:

Entré y me lleva a una página de descargas, no se utilizarlo, tampoco tengo idea de donde irían los códigos, igual gracias por responder!

Me recomiendan páginas de donde se pueden sacar códigos pero ese es mi problema, no tengo ni idea de donde van 🙁

Zuruck · 27 Sep 2012

Insertar CODE, HTML o PHP:

<table border="0" cellspacing="0" cellpadding="3">
<tbody>
<tr>
<td>
<strong>AQUI CÓDIGO DEL BOTÓN, IMÁGEN, ELEMENTO...</strong>
</td>
<td>
<strong>AQUI CÓDIGO DEL BOTÓN, IMÁGEN, ELEMENTO...</strong>
</td>
<td>
<strong>AQUI CÓDIGO DEL BOTÓN, IMÁGEN, ELEMENTO...</strong>
</td>
</tr>
</tbody>
</table>

Asi los tengo alineados... ya las sombras y eso es con CSS

ziney · 27 Sep 2012

Puedes hacerlo así tambien.

HTML:

<style>
.redes {
 color: #333;
}
.redes .red{
display: inline-block;
width: 110px;
}

</style>
<div class="redes">
 Comparte esto: 
  <div class="red">
     FACEBOOK 
  </div>

   <div class="red">
    TWITTER
  </div>

 <div class="red">
   GOOGLE 
  </div>

</div>

Zuruck · 27 Sep 2012

ziney dijo:

Puedes hacerlo así tambien.

HTML:

<style>
.redes {
 color: #333;
}
.redes .red{
display: inline-block;
width: 110px;
}

</style>
<div class="redes">
 Comparte esto: 
  <div class="red">
     FACEBOOK 
  </div>

   <div class="red">
    TWITTER
  </div>

 <div class="red">
   GOOGLE 
  </div>

</div>

Claro, mete el HTML en el lugar que quieras ponerlo y el CSS en el style.css de tu theme.
Saludos

thezar · 27 Sep 2012

De verdad gracias por su tiempo a todos, pero lo que yo quiero saber es donde van los códigos exactamente para que se vean los botones sociales en los post, porque de verdad no tengo idea.

Disculpen la molestia pero mi manejo de códigos y saber dónde van es este: 0%, si me dicen CSS ok pero uno abre eso y te salen como 50mil líneas, me hablan como si fuera progamador y sólo soy un humilde blogger en crecimiento jejeje, gracias igual por sus respuestas.

deluxxin · 27 Sep 2012

y1duque dijo:
De verdad gracias por su tiempo a todos, pero lo que yo quiero saber es donde van los códigos exactamente para que se vean los botones sociales en los post, porque de verdad no tengo idea.

Disculpen la molestia pero mi manejo de códigos y saber dónde van es este: 0%, si me dicen CSS ok pero uno abre eso y te salen como 50mil líneas, me hablan como si fuera progamador y sólo soy un humilde blogger en crecimiento jejeje, gracias igual por sus respuestas.

no te entiendo entonces como quieres poner eso sin plugins ?? si no sabes nada de programación dejate de tonteras e instala el plugin que tengo yo mira quedan como quieres.

thezar · 27 Sep 2012

deluxxin dijo:
no te entiendo entonces como quieres poner eso sin plugins ?? si no sabes nada de programación dejate de tonteras e instala el plugin que tengo yo mira quedan como quieres.

Ver el archivo adjunto 8577

No me agrada mucho como se ven y tampoco que se corten los números, pero si a la final tengo que instalar un plugin pues que más.

ziney · 27 Sep 2012

SIN PLUGINS. (Por cucharitas)

PASO 1:

Ir al editor de themes desde el panel de wordpress, y buscar el archivo Footer.php

PASO 2:

Justo antes de la etiqueta </body>, pega las siguientes líneas:

HTML:

<script type="text/javascript" src="http://apis.google.com/js/plusone.js"> {lang: 'es'}</script>   
 <script src="//platform.twitter.com/widgets.js" type="text/javascript"></script>  
  <div id="fb-root"></div>   
 <script>(function(d, s, id) {      
var js, fjs = d.getElementsByTagName(s)[0];    
  if (d.getElementById(id)) return;    
  js = d.createElement(s); js.id = id;     
 js.src = "//connect.facebook.net/es_ES/all.js#xfbml=1";  
    fjs.parentNode.insertBefore(js, fjs);    }(document, 'script', 'facebook-jssdk'));</script>

 <script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script>

Guarde los cambios.

PASO 3:

Busque el archivo Single.php , Probablemente en themes mas complejos estén modularizados como Loop.php
Busque en single.php, la función: the_content() , Seguidamente después de ello, en un espacio en blanco, coloca lo siguiente:

HTML:

<!--Inicio de iconos sociales-->
<div class="redes"> Comparte esto:  

<div class="red">   
    <div class="fb-like" data-send="false" href="<?php the_permalink() ?>" data-layout="button_count" data-width="100" data-show-faces="false" data-action="like"></div>
</div>

<div class="red">  
   <a href="https://twitter.com/share" class="twitter-share-button" data-via="" data-lang="es">Twittear</a>
</div>

<div class="red">   
   <div class="g-plusone"></div>
</div>

</div> <!-- /Fin de iconos sociales-->

Guarde los cambios.

PASO 4:

Edite el archivo style.css, y agregue esto al final:

.redes {
color: #333;
}
.redes .red{
display: inline-block;
width: 110px;
}

Guarde los cambios. Puede modificar colores y ancho a este css si lo deseas.

Completado!! :encouragement:

- - - Actualizado - - -

Hice algunos cambios.

thezar · 27 Sep 2012

Ziney, observa las opciones que tiene mi Theme

1 Left Sidebar (Deprecated) Plantilla de Página
(1l-sidebar.php)
1 Left, 1 Right Sidebar (Deprecated) Plantilla de Página
(1l1r-sidebar.php)
1 Right Sidebar (Deprecated) Plantilla de Página
(1r-sidebar.php)
2 Left Sidebars (Deprecated) Plantilla de Página
(2l-sidebars.php)
2 Right Sidebars (Deprecated) Plantilla de Página
(2r-sidebars.php)
Error 404 (página no encontrada)
(404.php)
admin-help.php
suffusion-options-page.php
theme-definitions.php
theme-options-blog-features.php
theme-options-custom-types.php
theme-options-intro.php
theme-options-layouts.php
theme-options-renderer.php
theme-options-sidebars-and-widgets.php
theme-options-templates.php
theme-options-theme-skinning.php
theme-options-typography.php
theme-options-visual-effects.php
theme-options.php
Plantilla de archivos adjuntos
(attachment.php)
Plantilla de autor
(author.php)
Blog Authors Plantilla de Página
(authors.php)
All Bookmarks Plantilla de Página
(bookmarks.php)
All Categories Plantilla de Página
(categories.php)
Plantilla de categoría
(category.php)
comment-author-above.php
comment-author-below.php
comment.php
Comentarios
(comments.php)
breadcrumb-page.php
breadcrumb.php
byline-line-page.php
byline-line.php
byline-tile.php
dbx.php
navigation-menu.php
pagination-comments.php
pagination-mosaic.php
pagination-posts.php
post-footer.php
post-header.php
prev-next.php
pullout-page.php
pullout.php
seo.php
site-footer.php
custom-styles.php
date.php
featured-posts.php
Pie de página
(footer.php)
actions.php
admin.php
bp-integration.php
custom-post-types.php
filters.php
fonts.php
framework.php
magazine-functions.php
media.php
shortcodes.php
template.php
wpml-integration.php
Funciones del tema
(functions.php)
gradient.php
Cabecera
(header.php)
Plantilla de imagen adjunta
(image.php)
Plantilla de la página principal
(index.php)
layout-blog.php
layout-list.php
layout-mosaic.php
layout-tiles.php
template-missing.php
suffusion-admin-walkers.php
suffusion-walkers.php
Log In Plantilla de Página
(login.php)
Magazine Plantilla de Página
(magazine.php)
No Sidebars (Deprecated) Plantilla de Página
(no-sidebars.php)
Plantilla de autor
(now-reading/author.php)
library.php
nr-shelf.php
Resultados de la búsqueda
(now-reading/search.php)
Barra lateral
(now-reading/sidebar.php)
Entrada individual
(now-reading/single.php)
Plantilla de etiqueta
(now-reading/tag.php)
Plantilla de página
(page.php)
content-audio.php
content-chat.php
content-gallery.php
content-status.php
content.php
Page of Posts Plantilla de Página
(posts.php)
Resultados de la búsqueda
(search.php)
Formulario de búsqueda
(searchform.php)
sidebar-2.php
sidebar-above-footer.php
sidebar-above-header.php
sidebar-below-header.php
sidebar-in-header.php
sidebar-nav-main-left.php
sidebar-nav-main-right.php
sidebar-nav-top-left.php
sidebar-tabs.php
Barra lateral
(sidebar.php)
Entrada individual
(single.php)
suffusion-css-generator.php
suffusion-css-helper.php
suffusion.php
Plantilla de etiqueta
(tag.php)
Custom Layout Plantilla de Página
(template-custom-layout.php)
Custom Post Type Archive Plantilla de Página
(template-custom-post-type-archive.php)
Sitemap Plantilla de Página
(template-sitemap.php)
widget-areas.php
suffusion-child-pages.php
suffusion-featured-posts.php
suffusion-flickr.php
suffusion-meta.php
suffusion-query-posts.php
suffusion-query-users.php
suffusion-search.php
suffusion-subscription.php
suffusion-translator.php
suffusion-twitter.php
suffusion-widgets.php
Estilos
Hoja de estilo
(style.css)
attachment-styles.css
dark-style.css
ie-fix.css
rounded-corners.css
Hoja de estilos RTL
(rtl.css)

En single.php no está la función the_content() y tampoco existe la función loop.php

jackemathe · 28 Sep 2012

Si eres novato solo instala un plugin y ya no te compliques :distant:

JD Full Digital · 28 Sep 2012

Pues si no quieres utilizar plugins o funcionalidades hechas por otros, te tocara a ti implementar las APIs.

Don Gato · 23 May 2013

Muchas gracias Enlace eliminado por el tutorial, justo lo que buscaba, me vino de maravilla :encouragement:

¿Cómo puedo alinearlo horizontal? los botones me aparecen verticalmente.

ziney · 24 May 2013

Marcelord dijo:
Muchas gracias Enlace eliminado por el tutorial, justo lo que buscaba, me vino de maravilla :encouragement:

¿Cómo puedo alinearlo horizontal? los botones me aparecen verticalmente.

Si quieres alinear horizontal, hacer flotar a la izquierda así:

.redes {
color: #333;
}
.redes .red{
display: inline-block;
width: 110px;
float: left;
}

Puede aumentar o reducir el width según convenga.

webofthegames · 27 May 2013

Lo primero muchas gracias por la info, como lo puedo colocar en una parte determinada(en la mitad de un post) de la pantalla( la web) digo que no tengo ni idea del tema, esta seria la manera para que cargue mas rapida??

webofthegames · 13 Jun 2013

He suguido los pasos y si aparecen los botones pero el boton de facebook me hace una cosa muy rara, en la misma entrada entro 1 vez en la entrada y aparece "0" en facebook, salgo y vuelvo a entrar y sale "3", salgo y vuelvo a entra y sale "0" otra vez,¿¿¿???? a alguien mas le pasa esto???

ziney dijo:
SIN PLUGINS. (Por cucharitas)

PASO 1:

Ir al editor de themes desde el panel de wordpress, y buscar el archivo Footer.php

PASO 2:

Justo antes de la etiqueta </body>, pega las siguientes líneas:

HTML:

<script type="text/javascript" src="http://apis.google.com/js/plusone.js"> {lang: 'es'}</script> <script src="//platform.twitter.com/widgets.js" type="text/javascript"></script> <div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/es_ES/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> <script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script>

Guarde los cambios.

PASO 3:

Busque el archivo Single.php , Probablemente en themes mas complejos estén modularizados como Loop.php
Busque en single.php, la función: the_content() , Seguidamente después de ello, en un espacio en blanco, coloca lo siguiente:

HTML:

 <div class="redes"> Comparte esto: <div class="red"> <div class="fb-like" data-send="false" href="<?php the_permalink() ?>" data-layout="button_count" data-width="100" data-show-faces="false" data-action="like"></div> </div> <div class="red"> <a rel="nofollow" href="https://twitter.com/share" class="twitter-share-button" data-via="" data-lang="es">Twittear</a> </div> <div class="red"> <div class="g-plusone"></div> </div> </div> 

Guarde los cambios.

PASO 4:

Edite el archivo style.css, y agregue esto al final:

Guarde los cambios. Puede modificar colores y ancho a este css si lo deseas.

Completado!! :encouragement:

- - - Actualizado - - -

Hice algunos cambios.

webofthegames · 6 Jul 2013

a ver si alguien me puede respoonder el problema que tengo con me guta que varia pero si cambias <?php the_permalink() ?> por una url htp://www.mi123sitio.com/entrada ya no lo hace, siempre sale el mismo numero por muchas ventanas que se habran

Cómo agregar botones sociales sin necesidad de instalar Plugins

thezar

spermatodj

thezar

Zuruck

thezar

Zuruck

ziney

Zuruck

thezar

deluxxin

thezar

ziney

thezar

jackemathe

JD Full Digital

Don Gato

ziney

webofthegames

webofthegames

webofthegames

Temas similares

Privacidad y transparencia

Privacidad y transparencia