Blog

  • Repositorio de Eclipse en Dropbox

    Repositorio de Eclipse en Dropbox

    Cuando desarrollamos un proyecto, uno de los problemas que nos podemos encontrar es el de llevar con nosotros el código del mismo. Ya sea almacenado en un sistema de almacenamiento en la nube o en un dispositivo USB, puede ocurrir que se nos olvide actualizarlo o bien que nos dejemos el USB olvidado.

    Una solución pasa por usar Dropbox para almacenar el repositorio de Eclipse. Dropbox, como ya analicé en otro post, es un servicio de almacenamiento online gratuito hasta 2 Gb con un programa de sincronización integrado. Funciona en los tres sistemas operativos más utilizados (Windows, Mac y Linux). Simplemente con tener conexión a Internet puedes instalar la aplicación (o acceder al servicio vía navegador). Se trata pues de una buena solución para llevar el código contigo. Dropbox lo puedes obtener en la página www.dropbox.com.

    Uno de los IDEs más utilizados en el desarrollo de aplicaciones es Eclipse. Veamos cómo configurar un repositorio dónde almacenar nuestros proyectos cuyo código se va a sincronizar en todas los equipos dónde tengamos instalado Dropbox.

    Una vez que tengamos instalada la aplicación podemos crear una carpeta donde almacenar el proyecto. Para ello abrimos la carpeta Dropbox y creamos una carpeta con el nombre que deseemos, por ejemplo Eclipse.

    En el caso de que ya tengamos un proyecto y queremos pasarlo a Dropbox y modificar Eclipse para que abra el nuevo repositorio seguiremos los siguientes pasos:

    1. Abrimos Eclipse normalmente y borramos el proyecto del workspace, pero cuando aparezca el cuadro de diálogo pidiendo la confirmación debemos estar seguros de no marcar la casilla para borrar también los contenidos del disco.
    2. Una vez borrado, navegamos con el explorador de archivos de Windows (o el equivalente en los diferentes Sistemas Operativos) hasta la carpeta del repositorio actual, y movemos la carpeta con el proyecto que acabamos de borrar, a la carpeta que hemos creado en Dropbox.
    3. Volvemos a Eclipse y seleccionamos File -> Switch Workspace -> Other…
    4. Seleccionamos la carpeta que hemos creado en Dropbox y pulsamos Ok.
    5. Esto hace que Eclipse se reinicie para cargar el nuevo repositorio.
    6. Una vez cargado seleccionamos File -> Import… -> General -> Existing Projects into Workspace, desde el menú.
    7. En la caja de texto Select root directory, seleccionamos la carpeta del nuevo repositorio dentro de Dropbox y en la lista de proyectos aparecerá el proyecto copiado. Lo seleccionamos y pulsamos Finish.
    8. Repetiremos los pasos del 3 al 7 para cada uno de los equipos que utilicemos (casa, oficina, portátil, etc.).

    En el caso de que no tuviéramos un proyecto previo el proceso sería más sencillo. Simplemente realizaríamos los pasos 3 al 5 en cada uno de los equipos.

    La sincronización entre las diferentes máquinas puede llevar algo de tiempo. Si modificamos el código en el trabajo y queremos recuperarlo cuando lleguemos a casa, simplemente refrescamos el workspace desde Eclipse y ya estará preparado para trabajar desde donde lo dejamos. Con 2 Gb. es más que suficiente para almacenar tus proyectos, aunque si necesitas más espacio puedes aumentarlo (Ver tarifas).

    Otra de las características de Dropbox es que puedes hacer pública la carpeta y compartir enlaces entre las personas que tú autorices a la misma para compartir el código.

    Cómo ves esta solución nos puede sacar de un apuro cuando no tenemos el código pero disponemos de una conexión a Internet y cuando queremos trabajar con el mismo desde diferentes equipos.

     

  • Gantter.com: La alternativa online a Microsoft Project

    Gantter.com: La alternativa online a Microsoft Project

    Si pensamos en una herramienta para la gestión de proyectos, a todos nos viene a la cabeza Microsoft Project. Aunque no es la única, sí es la más popular y la más extendida entre los profesionales para planificar y gestionar sus proyectos.

    Hace ya varios meses me encontraba realizando mi labor profesional en las instalaciones de un cliente en el que necesitaba la planificación de las tareas del proyecto, que habíamos realizado previamente en MS Project y no disponíamos de licencia para utilizar la herramienta. Descubrí entonces gantter.com.

    Gantter.com es una aplicación web 2.0 para la planificación de proyectos que se integra, si así lo deseas, con Google Docs. Puedes pensar que Gantter es similar a MS Project sin que los usuarios tengan que comprar ni instalar nada, tan sólo utilizando su navegador. Hay que decir qué es compatible con todos los navegadores del mercado.

    Comenzar a utilizarlo es muy sencillo. Después de un rápido registro (no es obligatorio, podremos utilizarla sin identificarnos) aparecerá una pantalla con el típico diagrama de Gantt en el que comenzaremos añadiendo las tareas e introduciendo las dependencias entre ellas. También podemos establecer los calendarios con el horario de trabajo y los días de vacaciones, así como asignar recursos a las tareas y algunas acciones avanzadas.

    Pantalla de Gantter.com con un diagrama de Gantt

    Una característica importante que hace la herramienta más atractiva si cabe es la opción de importar proyectos en el formato MS Project (.mpp), por lo que podemos trabajar con ellos, almacenarlos en la nube de Gantter (también en Google Docs como ya comenté) o volverlo a exportar en formato mpp de nuevo. En el caso de querer almacenarlo en tu dispositivo físico, puedes exportar y descargar tu proyecto en formato xml.

    Permite compartir proyectos con otros colaboradores, de manera que les llegará una notificación para hacerles saber que compartes con ellos dicha planificación de tareas. Actualmente Gantter soporta más de 11 idiomas (y creciendo). Las funcionalidades son las mismas, sólo cambia la interfaz basada en el idioma seleccionado por el usuario.

    En resumen, una herramienta muy completa y muy a tener en cuenta con las siguientes características:

    • Herramienta de planificación con gestión de tareas, recursos y calendarios.
    • No requiere instalación de software. Soporte para todos los navegadores.
    • Almacenar y compartir en la nube.
    • Se integra con Google Docs.
    • Posibilidad de importar/exportar ficheros MS Project (mpp).
    • Disponible en múltiples idiomas.

     

  • Introducción a Aplicaciones REST con Spring 3.0 Web MVC Framework

    Introducción a Aplicaciones REST con Spring 3.0 Web MVC Framework

    El Framework Web MVC (modelo-vista-controlador) de Spring está diseñado alrededor de un Servlet (DispatcherServlet) encargado de enviar las peticiones a los diferentes manejadores (handlers) de la aplicación, a partir de la configuración del mapeo de manejadores, la resolución de las vistas, locale, etc. Es decir, al configurar este serlvet en el fichero web.xml de tu aplicación web, todas las peticiones pasarán por él y se encargará de redirigir a los diferentes manejadores. Los manejadores por defecto se basan en las anotaciones @Controller y @RequestMapping como veremos a continuación. A partir de la versión 3.0 de Spring es posible crear aplicaciones Web RESTfull a través de la anotación @PathVariable.

    En esto último se va a centrar este artículo, en la implementación de los controladores a través de anotaciones y en la configuración de los mismos para crear aplicaciones REST.

    Dispatcher Servlet

    Cómo comentamos al principio, el framework MVC de Spring está diseñado alrededor de un servlet que reenvía las peticiones a los diferentes controladores. Este servlet está plenamente integrado con el contenedor IoC (Inversion of Control) lo que permite usar todas las características del framework Spring.

    Workflow del Servlet

    Se trata de un servlet (hereda de la clase base HttpServlet) y como tal se declara en el fichero de configuración web.xml de tu aplicación web:

    <web-app>
    
        <servlet>
            <servlet-name>buscar</servlet-name>
            <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
            <load-on-startup>1</load-on-startup>
        </servlet>
    
        <servlet-mapping>
            <servlet-name>buscar</servlet-name>
            <url-pattern>*.do</url-pattern>
        </servlet-mapping>
    
    </web-app>

    En el ejemplo anterior, tal como se puede ver en el mapeo del servlet, todas las peticiones que acaben en .do serán manejados por el DispatcherServlet buscar.

    En el framework Web MVC cada DispatcherServlet tiene asociado su propio WebApplicactionContext, el cuál hereda todos los beans definidos en el WebApplicationContext raíz que pueden ser sobreescritos. Una vez inicializado el DispatcherServlet, el framework busca un fichero llamado [servlet-name]-servlet.xml en el directorio WEB-INF de tu aplicación web y crea los beans allí definidos (si hay beans con el mismo nombre que los del contexto raíz los sobreescribe). En el ejemplo anterior debemos tener un fichero llamado buscar-servlet.xml.

    El DispatcherServlet de Spring usa beans especiales para procesar las peticiones y mostrar las vistas apropiadas. Estos beans son parte del Framework y pueden ser configurados en el contexto WebApplicationContext como harías con otros beans. Sin embargo, para la mayoría de los beans se proporcionan parámetros por defecto y no necesitan configuración.

    Contexto del DispatcherSerlvet

    Implementando Controladores

    Los controladores proveen acceso al comportamiento de la aplicación, interpretan los inputs del usuario y los transforman en un modelo que es representado al usuario por una vista (modelo-vista-controlador). Spring implementa un controller de una manera abstracta, lo que permite crear una gran variedad de controladores.

    A partir de la versión 2.5, y la mantiene también en la versión 3.0, Spring introdujo el modelo de programación basado en anotaciones, que usa anotaciones como @RequestMapping, @RequestParam, @ModelAttribute, etc. Los controladores implementados a través de este estilo no necesitan heredar de ninguna clase base o implementar ninguna interfaz específica:

    @Controller
    public class HelloWorldController {
    
        @RequestMapping("/helloWorld")
        public ModelAndView helloWorld() {
            ModelAndView mav = new ModelAndView();
            mav.setViewName("helloWorld");
            mav.addObject("message", "Hello World!");
            return mav;
        }
    }

    Definiendo un controlador con @Controller

    La anotación @Controller indica que una clase tendrá el rol Controlador. No se requiere heredar de ninguna clase base o del API de Servlet, como ocurría en la versión 2.0. El Dispatcher busca las clases «marcadas» con dicha anotación para mapear los métodos y detectar todas las anotaciones @RequestMapping (ver más abajo).

    Para activar la autodetección de los controllers que contienen la anotación, debes añadir a tu configuración el componente que los escanea:

    <?xml version="1.0" encoding="UTF-8"?>
    <beans xmlns="http://www.springframework.org/schema/beans"
        xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xmlns:p="http://www.springframework.org/schema/p"
        xmlns:context="http://www.springframework.org/schema/context"
        xsi:schemaLocation="
            http://www.springframework.org/schema/beans
            http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
            http://www.springframework.org/schema/context
            http://www.springframework.org/schema/context/spring-context-3.0.xsd">
    
        <context:component-scan base-package="com.paquete.ejemplo.controllers"/>
    
        // ...
    
    </beans>

    Mapeando peticiones con @RequestMapping

    Se usa la anotación @RequestMapping para mapear URLs como por ejemplo «/mostrareventos» con una clase, o bien un método dentro de la clase. Si es a nivel de clase, se suele mapear una URL concreta con métodos adicionales que acotan el mapeo a través de métodos HTTP específicos (POST, GET, etc.) o bien mediante parámetros en la petición.

    @Controller
    @RequestMapping("/mostrareventos")
    public class AppointmentsController {
    
        private final AppointmentBook appointmentBook;
    
        @Autowired
        public AppointmentsController(AppointmentBook appointmentBook) {
            this.appointmentBook = appointmentBook;
        }
    
        @RequestMapping(method = RequestMethod.GET)
        public Map<String, Appointment> get() {
            return appointmentBook.getAppointmentsForToday();
        }
    
        @RequestMapping(value="/{dia}", method = RequestMethod.GET)
        public Map<String, Appointment> getForDay(
                    @PathVariable @DateTimeFormat(iso=ISO.DATE) Date dia,
                    Model model) {
            return appointmentBook.getAppointmentsForDay(dia);
        }
    
        @RequestMapping(value="/new", method = RequestMethod.GET)
        public AppointmentForm getNewForm() {
            return new AppointmentForm();
        }
    
        @RequestMapping(method = RequestMethod.POST)
        public String add(@Valid AppointmentForm evento,
                           BindingResult result) {
            if (result.hasErrors()) {
                return "mostrareventos/new";
            }
            appointmentBook.addAppointment(evento);
            return "redirect:/mostrareventos";
        }
    }

    En el ejemplo anterior la anotación @RequestMapping se usa primero a nivel de clase. De esa manera indica que todos los métodos de este controlador manejarán las peticiones con el path relativo «/mostrareventos». El métdo get() refina dicha URL y se ejecuta únicamente cuando se trata de un método GET. El método add(), por el contrario, se ejecuta cuando se realiza un POST de un formulario del sitio web.

    Los métodos getForDay() y getNewForm() se ejecutarán cuando se trate de una petición GET y además la URL contenga «/mostrareventos/díaEvento» o «/mostrareventos/new», respectivamente.

    URI Templates

    Para acceder a partes de la URL en los métodos manejadores usamos los patrones de URI o URI Templates, dando valores dentro del path de @RequestMapping. Luego podemos usar la anotación @PathVariable para indicar que un parámetro del método se va a enlazar con un valor que viene en una variable de la URI. Veamos un ejemplo:

    @RequestMapping(value="/alumnos/{alumnoId}", method=RequestMethod.GET)
    public String findAlumno(@PathVariable String alumnoId, Model model) {
      Alumno alumno = alumnoService.findAlumno(alumnoId);
      model.addAttribute("alumno", alumno);
      return "displayAlumno";
    }

    La URI Template «/alumnos/{alumnoId}» especifica la variable con el nombre alumnoId. Cuando un controlador maneja esta petición, el valor de alumnoId se establece con el valor que viene en la URL. Por ejemplo, cuando llega una petición con esta URL «/alumnos/francisco» el valor «francisco» se asociará al parámetro alumnoId de tipo String del método manejador.

    Puedes usar varias anotaciones @PathVariable para enlazar múltiples variables URI Templates:

    @RequestMapping(value="/alumno/{alumnoId}/asignatura/{asignaturaId}",
                     method=RequestMethod.GET)
    public String findAsignatura(@PathVariable String alumnoId,
                     @PathVariable String asignaturaId, Model model) {
      Alumno alu = alumnoService.findAlumno(alumnoId);
      Asignatura asig = alumno.getSignatura(signaturaId);
      model.addAttribute("Asignatura", asignatura);
      return "displayAsignatura";
    }

    El método findAsignatura se ejecutaría al invocar, por ejemplo la URL «/alumno/245/asignatura/32«. Podemos indicar una parte a nivel de clase y otra a nivel de método como en el siguiente ejemplo:

    @Controller
    @RequestMapping("/alumno/{alumnoId}")
    public class RelativePathUriTemplateController {
    
      @RequestMapping("/asignatura/{asignaturaId}")
      public void findPet(@PathVariable String alumnoId,
                           @PathVariable String asignaturaId,
                             Model model) {
        // implementación omitida
      }
    }

    Conclusiones

    Tal y cómo nos propusimos al inicio de este artículo pretendíamos realizar una introducción a la programación de aplicaciones REST con Spring 3.0. Cómo cualquier aplicación Spring MVC, hemos configurado el DispatcherServlet, hemos aprendido a declarar controladores mediante la anotación @Controller. También hemos mapeado peticiones con la anotación @RequestMapping y por último hemos asociado valores de variables de la URL a parámetros de los métodos manejadores de los controladores mediante URI Templates y la anotación @PathVariable. Con todo esto podemos comenzar a construir una aplicación REST en la que cada recurso sea accesible mediante una URL amigable del tipo:

    http://mi-dominio/gestionalumnos/
    http://mi-dominio/gestionalumnos/alumno/new
    http://mi-dominio/gestionalumnos/alumno/234
    http://mi-dominio/gestionalumnos/alumno/234/asignatura/32
    http://mi-dominio/gestionalumnos/asignatura/new
    http://mi-dominio/gestionalumnos/asignatura/32
    etc...

    Este artículo está basado en la documentación de referencia de Spring. Para ampliar estos y otros temas puedes consultar la Referencia del framework Spring MVC.

  • Configura tu Entorno de Desarrollo Android y Crea tu Primera Aplicación

    Configura tu Entorno de Desarrollo Android y Crea tu Primera Aplicación

    En este post aprenderemos a configurar el entorno de desarrollo Android. Al final del mismo tendremos configurado el Sistema y seremos capaces de desarrollar, compilar y ejecutar una pequeña aplicación en el emulador. Para ello vamos a seguir los siguientes pasos:

    1. Instalar el SDK de Android
    2. Instalar el entorno de desarrollo Eclipse y el plugin ADT (Android Development Tools)
    3. Configuración del ADT e instalación de los paquetes del SDK con las versiones del S.O.
    4. Desarrollar y ejecutar un proyecto.

    Debemos tener en cuenta que necesitamos previamente tener instalada una versión de Java, se requiere JDK 5 o superior.

    Instalación del SDK

    El SDK de Android está dividido en dos partes, el paquete principal y los componentes del mismo. Hay versiones para Mac OS X, Windows y Linux.

    Descargamos el paquete principal desde la dirección http://developer.android.com/sdk/index.html para el sistema operativo que deseemos.

    Descomprimimos el fichero descargado en una carpeta de fácil acceso. Por defecto los ficheros del SDK vienen comprimidos en un directorio llamado android-sdk-<plataforma de la máquina>.

    Instalación de Eclipse

    Eclipse es un entorno de desarrollo open source que incluye una colección de herramientas y que fue originalmente creado por IBM para Java. Actualmente es el IDE (Integrated Development Environment) favorito para la comunidad de desarrolladores de Java.

    Descarga «Eclipse for Java Developers» (es una versión del entorno de desarrollo orientado a la programación con Java) desde http://www.eclipse.org/downloads. Instala Eclipse descomprimiendo el fichero descargado.

    Eclipse organiza el trabajo en proyectos y los proyectos se almacenan en Workspaces y cada workspace se almacena en el directorio que tú elijas. La primera vez que ejecutes Eclipse te pedirá la localización del workspace. Si trabajas en Windows te recomiendo que elijas un directorio sin espacios (ej: c:workspace) y en linux (/home/usuario/workspace).

    Eclipse IDE

    Instalación del plugin ADT

    Una vez ejecutado Eclipse pulsa el menú Help->Install New Software…

    Pulsa Add, en la esquina superior derecha

    En el diálogo que aparece para añadir repositorio, tecleamos «ADT Plugin» para el nombre y la siguiente URL para la localización:

    https://dl-ssl.google.com/android/eclipse/

    Pulsamos OK

    Instalar ADT

    En el diálogo de Software disponible, seleccionamos el checkbox de la opción Developer Tools y pulsamos Next.

    En la siguiente ventana veremos la lista de herramientas a descargar. Pulsamos Next.

    Leemos y aceptamos los acuerdos de licencia, y pulsamos Finish. Si aparece una advertencia de seguridad diciendo que la autenticidad o validez del software no puede ser contrastada, pulsamos OK.

    Una vez completada la instalación, reiniciamos Eclipse.

    Para configurar el ADT y especificar dónde está instalado el SDK de Android, pulsamos Window->Preferences y a la izquierda del diálogo que aparece pulsamos sobre Android. En la caja de texto con la etiqueta SDK location debemos introducir la ruta del SDK (ejemplo en linux: /home/usuario/android-sdk-linux_x86) y pulsamos OK.

    Preferencias ADT

    Instalación de los componentes del SDK

    Para la instalación de los componentes que faltan debemos ejecutar el SDK. Esta vez lo podemos hacer desde el propio Eclipse, pulsando sobre el  botón de la barra de herramientas que abre la aplicación Android SDK y AVD Manager. Esta opción también la encontraremos desde el menú Window.

    AndroidToolEclipse

    Pulsamos sobre la opción Available Packages en la parte izquierda de la aplicación, para seleccionar los paquetes que queramos. Los componentes básicos son SDK Tools, SDK Platform Tools y al menos una versión de la plataforma, los recomendados son la documentación y los ejemplos y si queremos instalarlo por completo podemos marcar las herramientas de terceros y las APIS de Google. Marcaremos todos los paquetes en el caso de que no tengamos problemas de espacio y pulsamos Install. El proceso de instalación lleva bastante tiempo por lo que mejor dejamos que se vaya instalando mientras hacemos cualquier otra cosa.

    Pantallazo-Android SDK and AVD Manager

    Hello World!

    Para ver que está todo configurado correctamente vamos a desarrollar nuestro primer proyecto Android, un sencillo Hello World. Ejecutamos Eclipse, si es que no lo tenemos ya en ejecución, y seleccionamos  File->New->Android Project. Si esta opción no se encuentra en el menú, seleccionamos la opción Other… y en el cuadro de diálogo desplegamos Android y pulsamos sobre Android Project.

    Especificamos un nombre al proyecto (HelloWorld), más abajo la versión de Android para la que vamos a desarrollar; seleccionamos la versión 2.2 y especificamos el nombre del paquete. En Android los paquetes son importantes, entre otras cosas, a efectos de firmas de aplicaciones. Suele ser el nombre del dominio y opcionalmente uno o varios subdominios al estilo Java (por ejemplo com.example.calculator). Pulsamos Finish y Eclipse nos generará una estructura básica de proyecto con los ficheros necesarios:

    • AndroidManifest.xml en el directorio raíz es el fichero que une todos los componentes de la aplicación, los bloques que la componen y los permisos que requiere.
    • Layout: main.xml, en el directorio res->Layout especifica el layout de la pantalla. En este sencillo caso es un layout lineal con un texto, cuyo valor viene dado por la etiqueta @string/hello.
    • Strings.xml en el directorio res->values es el que almacena los valores de las cadenas de texto a visualizar en la pantalla. Aquí se encuentra el valor de la cadena a mostrar en la pantalla, y que podemos modificar si deseamos.
    • En el directorio gen/nombrepaquete/R.java, el fichero responsable de enlazar los recursos y las clases java. Es un fichero autogenerado y no debemos editarlo.
    • En el diretorio src se encuentran las clases java.  Es el código que se convertirá en ejecutable y correrá en la máquina java virtual Dalvik (la máquina virtual Java de Android). Automáticamente nos ha generado una clase HelloWorldActivity.java que hereda de la clase Activity. En Android las Activity representan pantallas de aplicación. Una aplicación puede tener una, varias o ninguna Activity. En este ejemplo sencillo invocamos al método setContentView() pasándole cómo parámetro el código para el layout principal (y único definido en la aplicación).

    El Emulador

    Ejecutar la aplicación en un dispositivo físico o en un dispositivo emulado es similar, ejecuta el mismo código base al igual que en el dispositivo. Para usar el emulador debemos crearnos uno desde las herramientas Android.
    Abrimos el SDK y seleccionamos Virtual Devices. Como no tenemos ninguno pulsamos New… y seleccionamos un nombre (GingerBread, por ejemplo), la versión de Android que se ejecuta en él (2.3) y el tamaño de la SD externa en Mb. Pulsamos Create AVD y a continuación seleccionamos de la lista el dispositivo creado y pulsamos Start… para ejecutarlo. En unos breves instantes aparecerá en la pantalla un sistema Android, con ciertas carencias, como localización gps y acelerómetro pero totalmente funcional para la mayoría de los desarrollos.
    Para ejecutar el proyecto, desde Eclipse lo seleccionamos y pulsamos el botón derecho del ratón para hacer clic sobre Run As->Android Application. Automáticamente, en el dispositivo virtual, aparecerá la siguiente ventana:
    Emulador
    Si has llegado a este punto sin problemas, ¡enhorabuena! Ya has configurado tu entorno de desarrollo y has ejecutado una sencilla aplicación. Ahora se abre un mundo de posibilidades para ti en el ecosistema Android.
  • Cómo añadir el botón +1 de Google en tu WordPress

    Cómo añadir el botón +1 de Google en tu WordPress

    En fechas recientes Google ha lanzado el botón +1 en el buscador, como una manera de recomendar sitios a tus amigos y contactos. Al pulsar el botón en la lista de resultados del buscador estamos recomendando ese enlace, de manera que cuando aparezca dicho resultado en la búsqueda de tus amigos, aparecerá un mensaje indicando que lo recomiendas junto a tu foto. Pero el botón no se restringe únicamente a los resultados del buscador. Cómo habrás podido comprobar el botón aparece en multitud de webs, de manera que cuando visitas una página puedas recomendarla directamente. A continuación se detalla el proceso para incluir el botón +1 en tu web:

    Cómo conseguir el código del botón

    1. Ir al sitio de Google para Webmasters dónde se configura el botón.
    2. Lo primero que tenemos que especificar es el tamaño del botón (en píxeles) que más se aproxima a las dimensiones que disponemos en nuestra web. También debemos elegir el idioma.
    3. Tras esto hacemos clic en Opciones Avanzadas de modo que se despliegan más opciones de configuración. Aquí podemos desmarcar la casilla «Incluir recuento» en caso de que no deseemos que aparezca el número de veces que se ha pulsado el botón junto al mismo. También tenemos que incluir la dirección URL que queremos recomendar cuando se pulse el botón, que suele ser la url de nuestra página. En caso de que vayamos a incluir el botón en WordPress sería el permalink con la llamada a la función: <?php the_permalink(); ?>.

    Con todo esto se generará un código para incluir en nuestras páginas.

    <!-- Añade esta etiqueta en la cabecera o delante de la etiqueta body. -->
    <script type="text/javascript" src="https://apis.google.com/js/plusone.js">
      {lang: 'es'}
    </script>
    
    <!-- Añade esta etiqueta donde quieras colocar el botón +1 -->
    <g:plusone size="medium" href="<?php the_permalink(); ?>"></g:plusone>

    Inserción del código en WordPress

    Lo normal es que la primera parte del código, que va entre las etiquetas <script></script> se inserte en la cabecera de la página, justo antes de la etiqueta <body>. Desde el escritorio de WordPress, dentro del menú Apariencia, seleccionamos el menú Editor. Aparecerá entonces una ventana de edición y a la derecha una lista de páginas. Seleccionamos la correspondiente a la cabecera (header.php) para visualizarla en el editor. Copiamos y pegamos la primera parte del código del botón generado dentro de las etiquetas <head></head> justo antes de la etiqueta <body> y pulsamos el botón Actualizar Archivo.

    La segunda parte del código debemos insertarla dónde queramos colocar el botón. En mi caso lo incluiré tanto en la página principal como en la página de cada uno de las entradas, así que copio y pego esta segunda parte del código tanto en la página principal (index.php) como en la página de entrada individual (single.php). Pulsamos el botón Actualizar Archivo para cada página y ya tenemos el botón +1 en nuestra web.

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para su aceptación y la de nuestra política de cookies.

ACEPTAR
Aviso de cookies