¿Como añadir redes sociales en wordpress sin plugins ?

Share on facebook
Share on twitter
Share on whatsapp

[fvplayer src=»https://www.youtube.com/watch?v=EpwdbwpNbis&feature=youtu.be»]

Hola a todos, bienvenidos a un nuevo post, en esta ocasión veremos como insertar botones sociales a nuestras publicaciones sin necesidad de plugins, esto lo hacemos por que los mejores plugins para esta funcionalidad son de pago y muchas veces no tenemos el dinero para comprarlos, y en segundo lugar por que los que hay gratuitos simplemente no son tan buenos, pueden recargar el sitio web de mucho codigo que no necesitamos y finalmente no cumplen nuestras expectativas.

En este post podras adquirir los conocimientos para tener esta funcionalidad de una manera sencilla, y que en ningun momento ocasione problemas a tu sitio web, vamos a añadir los botones sociales para compartir contenido, quedate conmigo en este post y sigue el paso a paso, y sin más palabras, a lo que venimos.

– Editando el functions.php de nuestro theme

Lo que debemos hacer en primer lugar si tu sitio web esta en un servidor ingresar a el mediante accesos FTP, navegaremos a la raiz de la instalación al archovo wp-content/themes/tutheme. Una vez estemos ahi crearemos una carpeta la cual le puedes poner el nombre que quieras, en el caso de nuestro tutorial se llamara ArchivosInc y dentro de esta carpeta crearas un nuevo archivo el cual tambien podras nombrar como lo desees pero que para nuestro caso se llamara botonessociales.php, en este incluiremos el codigo que esta a continuación.

<?php
function dc_social_sharing_buttons($content) 
{
	if( is_single() )
	{	
		$plantilla		='
		 <a class="dc-link dc-twitter" href="{twitter}" target="_blank"><i class="fa fa-twitter"></i> Twitter</a>'.
		'<a class="dc-link dc-facebook" href="{facebook}" target="_blank"><i class="fa fa-facebook"></i> Facebook </a>'.
		'<a class="dc-link dc-googleplus" href="{google}" target="_blank"><i class="fa fa-google-plus"></i> Google+</a>'.
		'<a class="dc-link dc-linkedin" href="{linkedin}" target="_blank"><i class="fa fa-linkedin"></i> LinkedIn</a>'.
		'<a class="dc-link dc-whatsapp" href="{whatsapp}" target="_blank"><i class="fa fa-whatsapp"></i> WhatsApp</a>';
		$cad			='';
		$urlArticulo 	= urlencode(get_permalink());
 		$titleArticulo 	= str_replace( ' ', '%20', get_the_title());
		// Urls
		$twitterURL	= 'https://twitter.com/intent/tweet?text='.$titleArticulo.'&amp;url='.$urlArticulo.'&amp;via=WpFacilito';
		$facebookURL= 'https://www.facebook.com/sharer/sharer.php?u='.$urlArticulo;
		$googleURL 	= 'https://plus.google.com/share?url='.$urlArticulo;
		$whatsappURL= 'whatsapp://send?text='.$titleArticulo . ' ' . $urlArticulo;
		$linkedInURL = 'https://www.linkedin.com/shareArticle?mini=true&url='.$urlArticulo.'&amp;title='.$titleArticulo;
 
		$ar_buscar 		= array('{twitter}','{facebook}','{google}','{linkedin}','{whatsapp}');
		$ar_reemplazar 	= array($twitterURL,$facebookURL,$googleURL,$linkedInURL,$whatsappURL);
		$cad	.= '<div class="dc-social">';
		$cad	.= '<p></p>';
		$cad	.=  str_replace($ar_buscar, $ar_reemplazar, $plantilla);
		$cad	.= '</div>';
		$content = $cad.$content; //botones superiores
		$content .= $cad; //botones inferiores
		return $content;
	}
	else
	{
		return $content;
	}
};
add_filter( 'the_content', 'dc_social_sharing_buttons',0);

Una vez tengamos listo lo anterior nos dirigiremos al archivo functions.php y copiaremos el siguiente codigo:

include_once('ArchivosInc/botonessociales.php');

Lo anterior quiere decir que mantendremos nuestro codigo en el archivo botonessociales.php, pero lo estaremos llamando para incluirlo en el functions.php de nuestro theme, despues de este proceso tendremos una imagenen parecida a la siguiente:

Redes sociales sin Css

– Introduciendo nuestro codigo Javascript

En los enlaces que vemos en la imagen anterior podemos apreciar que si damos clic sobre ellos nos redirigira automaticamente a otra ventana y la verdad no queremos eso, ya que queremos que nuestros seguidores compartan el contenido pero que no abandonen nuestro sitio web. Para tal fin haremos que al dar clic sobre cualquier botón este cree una ventana emergente donde se pueda compartir el contenido, para ello vamor a ir a cualquier archivo .js de nuestro theme y copiaremos el siguiente codigo.

Si tu theme trabaja con jQuery no tendras necesidad de copiar todo el codigo, asi mo lo explico en el video.

(function($){

	$('.dc-social a').click(function(event){
		event.preventDefault();

                //popup 
                var width  = 575,
                    height = 520,
                    left   = ($(window).width()  - width)  / 2,
                    top    = ($(window).height() - height) / 2,
                    opts   = 'status=1' +
                        ',width='  + width  +
                        ',height=' + height +
                        ',top='    + top    +
                        ',left='   + left;

                window.open($(this).attr("href"), 'share', opts);
        
	});


})(jQuery);

Una vez realizado este proceso y haciendo clic en cualquier botón tendremos el siguiente resultado:

Ventana emergente de redes sociales

– Introduciendo nuestro codigo CSS

Y por ultimo obviamente queremos que nuestros botones se vean bonitos, con los colores adecuados de cada red social, para este fin iremos a cualquier archivo .css de nuestro theme que normalmente sera el style.css, nos pondremos al final del archivo y copiaremos el siguiente codigo:

/*Social Share*/

.dc-link:hover,.dc-link:active {
    color: white;
}
 
.dc-twitter {
    background: #00aced;
}

.dc-twitter:hover,.dc-twitter:active {
    background: #0084b4;
}
 
.dc-facebook {
    background: #3B5997;
}
 
.dc-facebook:hover,.dc-facebook:active {
    background: #2d4372;
}
 
.dc-googleplus {
    background: #D64937;
}
 
.dc-googleplus:hover,.dc-googleplus:active {
    background: #b53525;
}
 

.dc-whatsapp {
    background: #43d854;
}
 
.dc-whatsapp:hover,.dc-whatsapp:active {
    background: #009688;
}

.dc-linkedin {
    background: #0074A1;
}
 
.dc-linkedin:hover,.dc-linkedin:active {
    background: #006288;
}

.dc-social {
	font-family: lato;
	font-size:1.4rem;
    margin-bottom: 40px;
    text-align: center;
}   

.dc-social .dc-link {
	color: white!important;
	font-size: 1.4rem;
	padding: 5px 10px;
	border-radius: 3px;
	margin-right: 2px;
	margin-top: 20px;
	cursor: pointer;
	display: inline-block;
}

.dc-social i{
	font-size: 1.6rem;
}

.dc-social p{
	margin-bottom: 8px;
}

@media screen and (min-width: 768px) {
    .dc-whatsapp {
		display: none!important;
    }
}

Con esto obtendremos el siguiente resultado:

Botones sociales con Css

Despues de esto ya tienes tus botones sociales listo para usar, sin plugins y de facil implementacion.

Aun no entiendes algo, mira el video en la parte superior y sigue el paso a paso.

Felipe Calderón

Felipe Calderón

Soy Felipe Calderón y me encantaría ayudarte, empezando desde cero a crear tu propia web y conseguir clientes, ventas y dinero con tu sitio ¿Quieres saber cómo?. Suscribete a continuación 👇

Indice de Contenido

Utilizar Beaver Builder con Genesis Child Theme

Hola a todos, el día de hoy quiero mostrarles como se puede integran el constructor Web Beaver Builder con el …

Review de Beaver Builder 2018 (Regalo plugin con actualizaciones)

Nota: Si quieres que te regale el plugin, suscribete a mi canal de youtube y en los comentarios déjame tu correo, …