Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)
En la primera parte de esta serie, analizamos cómo recuperar mediante programación el recuento de Me gusta de una página de Facebook, y el número de seguidores de Twitter y Google+. Al final, habíamos creado tres funciones auxiliares PHP para simplificar la recuperación de los recuentos de las redes sociales.
Estas funciones aceptan como argumento, un nombre de usuario de página de Facebook, un nombre de usuario de Twitter y un nombre de usuario o ID de Google+ respectivamente y a su vez devuelven el recuento de Me gusta o seguidores.
En esta parte final de la serie, desarrollaremos un widget de perfil social que enlaza con una página de Facebook, con una cuenta de Twitter y un perfil de Google+. El widget también mostrará el recuento de Me gusta de una página de Facebook, así como el recuento de seguidores en Twitter y en Google+.
A continuación se muestra una captura de pantalla del widget que construiremos a lo largo de este tutorial.
Codificar el widget
Al igual que sucede en todos los plugins de WordPress, el encabezado del archivo que contiene la meta información (como Nombre, Versión, Autor, etc.) relacionada con el plugin debe estar al principio del archivo del mismo.
A continuación se muestra nuestro encabezado del plugin de widget.
<?php /* * Plugin Name: Tuts+ Social Profile Widget * Plugin URI: https://code.tutsplus.com * Description: Social widget that links to various social media profiles * Author: Agbonghama Collins * Author URI: http://tech4sky.com */
Para crear un widget de WordPress, la clase estándar WP_Widget debe ser ampliada y en la clase secundaria se deben incluir los métodos necesarios. Finalmente, se registra la clase secundaria del widget y se engancha a WordPress.
Crea la clase secundaria que extiende la clase primaria WP_Widget.
class Tutsplus_Social_Profile extends WP_Widget {
// ...
Asigna un nombre y una descripción al widget utilizando el método __construct().
function __construct() {
parent::__construct(
'Tutsplus_Social_Profile', __( 'Social Networks Profiles', 'translation_domain' ),
array( 'description' => __('Links to Author social media profile', 'translation_domain' ) )
);
}
En este momento, es el momento de aprovechar las funciones auxiliares que creamos en el último artículo para que podamos mostrar los Me gusta y los seguidores de Facebook, Twitter y Google+.
public function twitter_count( $username ) {
require_once 'TwitterAPIExchange.php';
// Set access tokens here - see: https://dev.twitter.com/apps/
$settings = array(
'oauth_access_token' => "211978035-fedllb5xEQhnoHxAsK3259VIOhsFrLuRUyR4Atvr",
'oauth_access_token_secret' => "7Nev2EyOxoHAVgb8Y5VHPRYuKbKomFqe3kf1ouOHtmHVs",
'consumer_key' => "MsHrMc5B9dZyP8mgqV0m2JGsq",
'consumer_secret' => "YhIdWozaAb9cvKcjKqamEcN2GgSBrzqfWZpIvKSeYVvCQsb8LL"
);
$url = 'https://api.twitter.com/1.1/users/show.json';
$getfield = '?screen_name=' . $username;
$request_method = 'GET';
$twitter_instance = new TwitterAPIExchange( $settings );
$follow_count = $twitter_instance ->setGetfield( $getfield )
->buildOauth( $url, $request_method )
->performRequest();
$count = json_decode( $follow_count, true );
return $count['followers_count'];
}
public function facebook_count( $username ) {
$facebook_count = file_get_contents( 'http://graph.facebook.com/' . $username );
return json_decode( $facebook_count )->likes;
}
public function googleplus_count( $username, $apikey = 'AIzaSyBHm7J9qLupabYWaxLg_9_UZPbxWdso2vY' ) {
$google = file_get_contents( 'https://www.googleapis.com/plus/v1/people/' . $username . '?key=' . $apikey );
return json_decode( $google ) -> circledByCount;
}
En el anterior método twitter_count(), el token de acceso OAuth de la aplicación de Twitter, el secreto del token de acceso, la clave de consumidor y el secreto de consumidor están codificados de forma rígida para el método.
Tendrás que cambiarlas por las credenciales de OAuth de tu aplicación de Twitter.
Lo mismo ocurre con la clave API de Google Plus en el método googleplus_count().
Las opciones de configuración del widget constarán de cinco campos de formulario que contienen el título del widget, los nombres de usuario de Facebook, de Twitter y de Google+ como se muestra en la siguiente imagen.
El siguiente método form() crea el formulario del Widget.
public function form( $instance ) {
isset ( $instance['title'] ) ? $title = $instance['title'] : null;
empty ( $instance['title'] ) ? $title = 'My Social Profile' : null;
isset ( $instance['facebook'] ) ? $facebook = $instance['facebook'] : null;
isset ( $instance['twitter'] ) ? $twitter = $instance['twitter'] : null;
isset ( $instance['google'] ) ? $google = $instance['google'] : null;
?>
<p>
<label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title:'); ?></label>
<input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>">
</p>
<p>
<label for="<?php echo $this->get_field_id('facebook'); ?>"><?php _e('Facebook Page Username:'); ?></label>
<input class="widefat" id="<?php echo $this->get_field_id('facebook'); ?>" name="<?php echo $this->get_field_name('facebook'); ?>" type="text" value="<?php echo esc_attr( $facebook ); ?>">
</p>
<p>
<label for="<?php echo $this->get_field_id('twitter'); ?>"><?php _e('Twitter Username:'); ?></label>
<input class="widefat" id="<?php echo $this->get_field_id('twitter'); ?>" name="<?php echo $this->get_field_name('twitter'); ?>" type="text" value="<?php echo esc_attr( $twitter ); ?>">
</p>
<p>
<label for="<?php echo $this->get_field_id('google'); ?>"><?php _e('Google+ Username or ID:'); ?></label>
<input class="widefat" id="<?php echo $this->get_field_id( 'google' ); ?>" name="<?php echo $this->get_field_name( 'google' ); ?>" type="text" value="<?php echo esc_attr( $google ); ?>">
</p>
<?php
}
Cuando se introducen valores en el campo de formulario, deben guardarse en la base de datos. El método update() desinfecta los valores de formulario eliminando datos malintencionados y una vez desinfectados, guarda los valores en la base de datos.
public function update( $new_instance, $old_instance ) {
$instance = array();
$instance['title'] = ( ! empty ( $new_instance['title']) ) ? strip_tags( $new_instance['title'] ) : '';
$instance['facebook'] = ( ! empty ( $new_instance['facebook']) ) ? strip_tags( $new_instance['facebook'] ) : '';
$instance['twitter'] = ( ! empty ( $new_instance['twitter']) ) ? strip_tags( $new_instance['twitter'] ) : '';
$instance['google'] = ( ! empty ( $new_instance['google']) ) ? strip_tags( $new_instance['google'] ) : '';
$instance['linkedin'] = ( ! empty ( $new_instance['linkedin']) ) ? strip_tags( $new_instance['linkedin'] ) : '';
return $instance;
}
A continuación el método widget() muestra los enlaces a los perfiles de redes sociales junto con el recuento de los Me gusta y los seguidores en el front-end de WordPress.
$title = apply_filters( 'widget_title', $instance['title'] );
$facebook = $instance['facebook'];
$twitter = $instance['twitter'];
$google = $instance['google'];
// social profile link
$social_widget = '
<ul class="diverz">
<li class="diverz facebookz">
<a href="https://www.facebook.com/' . $facebook . '">
<div class="main-diverz">
<i class="facebookz fa fa-facebook"></i>
<br/>
<big class="spanz facebookz">facebook</big>
</div>
</a>
<div class="sub-diverz">
<strong>' .
$this->facebook_count( $facebook ) . '</strong>
<br/>fans
</div>
</li>
<li class="diverz twitterz">
<a href="https://www.twitter.com/' . $twitter . '">
<div class="main-diverz">
<i class="twitterz fa fa-twitter"></i><br/>
<big class="spanz twitterz">twitter</big>
</div></a>
<div class="sub-diverz"><strong>' .
$this->twitter_count('tech4sky') . '</strong><br/>fans
</div>
</li>
<li class="diverz googlez">
<a href="https://plus.google.com/u/0/' . $google . '">
<div class="main-diverz">
<i class="googlez fa fa-google-plus"></i><br/>
<big class="spanz googlez">google+</big>
</div></a>
<div class="sub-diverz"><strong>' .
$this->googleplus_count( $google ) . '</strong><br/>fans
</div>
</li>
</ul>';
echo $args['before_widget'];
if ( !empty($title) ) {
echo $args['before_title'] . $title . $args['after_title'];
}
echo $social_widget;
echo $args['after_widget'];
}
Hemos terminado de incluir los métodos y los códigos necesarios para la clase, por lo que todo lo que nos queda por hacer es incluir la llave de cierre de la clase.
// ... }
La clase de widget Tutsplus_Social_Profile debe registrarse usando la función register_widget de WordPress, y luego debe engancharse a la acción widgets_init.
Si no se hace esto, el widget no será reconocido por WordPress.
function register_tutsplus_social_profile() {
register_widget( 'Tutsplus_Social_Profile' );
}
add_action( 'widgets_init', 'register_tutsplus_social_profile' );
Para que el widget tenga una buena apariencia, a continuación añadimos el siguiente CSS para el widget que también incluye el archivo de la hoja de estilo de los iconos de Font Awesome importado.
@import "//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css";
social-icons {
font-size: 21px;
}
ul .diverz {
width: 80px;
border: 1px solid #e3e3e3;
list-style-type: none;
overflow: hidden;
padding: 4px 2px;
margin: 2px 2px !important;
background-color: #eee;
}
.main-diverz {
font-size: 16px;
padding: 2px;
}
.sub-diverz {
color: #000;
background-color: #FFFFFF;
margin: 2px;
padding: 2px;
}
.diverz {
float: left;
text-align: center;
}
.spanz {
font-size: 15px;
vertical-align: middle;
}
.facebookz, .facebookz a {
color: #3B5998;
}
.twitterz, .twitterz a {
color: #00abe3;
}
.main-diverz i {
font-size: 20px;
}
Guarda el archivo CSS con el nombre tutsplus-social-profile-widget.css en la carpeta raíz del plugin.
Por último, debemos poner en cola en WordPress el archivo CSS:
// enqueue css stylesheet
function tutsplus_social_profile_widget_css() {
wp_enqueue_style( 'social-profile-widget', plugins_url( 'tutsplus-social-profile-widget.css', __FILE__ ) );
}
add_action( 'wp_enqueue_scripts', 'tutsplus_social_profile_widget_css' );
Perfecto, ya hemos terminado de codificar nuestro widget para perfiles sociales
Mejoras sugeridas
En la clase de widget, las credenciales OAuth de Twitter y la clave de API de Google+ se codificaron de forma rígida para la clase. Al desarrollar un plugin de esta naturaleza, debería existir una página de configuración que contenga un formulario para guardar las claves de OAuth y API en la base de datos de WordPress que luego serían recuperadas y utilizadas por la clase.
El formulario del widget carece de un útil mecanismo de validación del lado del cliente que garantice que se introducen los valores de formulario correctos. Lee mi artículo sobre Validación de formularios del lado del cliente con HTML5 para obtener información sobre cómo se puede realizar la validación.
El widget solo incluye Facebook, Twitter y Google+. Pero eres libre de ampliar la clase del widget e incluir otras redes sociales.
En la esquina superior derecha de esta página encontrarás un enlace para descargar el archivo del plugin Widget. Sigue adelante y utilízalo en tu propio sitio WordPress y estudia también el código para comprender completamente cómo funciona.
¡Todos y cada uno de los comentarios y preguntas que me envíes a través de la sección de comentarios son bienvenidos!
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post
