Cómo agregar botones sociales sin necesidad de instalar Plugins

  • Autor Autor thezar
  • Fecha de inicio Fecha de inicio
T

thezar

Eta
SEO
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:

drcy12.png


Saludos!
 
Última edición:
Utiliza los botones de addthis.com, es super sencillo.
 
y1duque dijo:
Me parece que no ofrece lo que busco para wordpress.com, gracias igual!
Hacer clic para expandir...

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:
 
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:
Hacer clic para expandir...

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 🙁
 
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
 
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>
 
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>
Hacer clic para expandir...

Claro, mete el HTML en el lugar que quieras ponerlo y el CSS en el style.css de tu theme.
Saludos
 
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.
 
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.
Hacer clic para expandir...

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.

lol.webp
 
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;
}
Hacer clic para expandir...
Guarde los cambios. Puede modificar colores y ancho a este css si lo deseas.

Completado!! :encouragement:

- - - Actualizado - - -

Hice algunos cambios.
 
Última edición:
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
 
Si eres novato solo instala un plugin y ya no te compliques :distant:
 
Pues si no quieres utilizar plugins o funcionalidades hechas por otros, te tocara a ti implementar las APIs.
 
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.
 
Última edición:
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.
Hacer clic para expandir...

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

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

Puede aumentar o reducir el width según convenga.
 
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??
 
Última edición:
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: 
<!--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 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> <!-- /Fin de iconos sociales-->

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.
Hacer clic para expandir...
 
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
 
Última edición:
Hay que estar conectado o registrado para responder aquí.

Temas similares

M
Tutorial: Cómo agregar botones sociales flotantes en tu sitio web
Respuestas
13
Visitas
2K
Dark-Zenen
V
exe8422
Tutorial: Cómo agregar botones sociales flotantes a tu blog
Respuestas
16
Visitas
2K
alexg
A
Soren
¿Cómo agregar botones de redes sociales en WordPress?
Respuestas
5
Visitas
578
cyberocioso
C
kahlo
Cómo agregar botones sociales flotantes sin instalar un plugin
Respuestas
5
Visitas
1K
Kakkonen
Kakkonen
Wizard
Cómo agregar botones compartir redes sociales en blogs de Blogger
Respuestas
1
Visitas
632
spamer01
spamer01
Atrás
Arriba