viernes, 28 de septiembre de 2012

Botón Compartir en Linkedin para Blogger

Cuando creas una entrada en un blog de Blogger aparecen en la parte inferior los iconos para compartir ésta en twiter, Facebook y Google+ pero muy probablemente eches de menos el compartir en Linkedin; en este artículo (donde puedes ver el mencionado botón) te explicaremos como añadirlo, personalizarlo y cambiar el idioma del texto.

  1. Entramos en Blogger, vamos al apartado Plantilla y pulsamos sobre el botón "Edición de HTML" y marcamos la casilla "Expandir plantilla de artilugios".


  2. Situaremos el botón Compartir en Linkedin justo debajo de los botones de twitter, facebook... (tal como está en este blog) por lo que buscamos dentro del HTML de la plantilla el código:
    <div class='post-footer-line post-footer-line-2'>
    
  3. Justo encima del código anterior añadimos el código siguiente para añadir el botón Compartir en Linkedin:
    <script src='http://platform.linkedin.com/in.js' type='text/javascript'/>
    <script data-counter='right' expr:data-url='data:post.url' type='IN/Share'/>
    
    Tras insertar el código guardamos la plantilla y recargamos nuestra página, nos aparecerá el siguiente botón.


  4. Todo lo comentado anteriormente está bien, lo podéis encontrar con facilidad en otros blogs, ahora vamos a por nota... El botón Compartir en Linkedin es ligeramente personalizable, os muestro las 3 opciones:

    Areatic, botón share / compartir en Blogger - Personalizar botón
    De izquierda a derecha, en función del valor de "data-counter" del segundo <script>:
    • data-counter="top":
      <script src='http://platform.linkedin.com/in.js' type='text/javascript'/>
      <script data-counter='top' expr:data-url='data:post.url' type='IN/Share'/>
      
    • data-counter="right":
      <script src='http://platform.linkedin.com/in.js' type='text/javascript'/>
      <script data-counter='right' expr:data-url='data:post.url' type='IN/Share'/>
      
    • eliminando data-counter del script:
      <script src='http://platform.linkedin.com/in.js' type='text/javascript'/>
      <script expr:data-url='data:post.url' type='IN/Share'/>
      

  5. Y ahora ya a por la matrícula de honor, je je je... Supongo que os habéis fijado en que el texto que aparece en el botón Compartir en Linkedin es Share y seguro que os gustaría cambiarlo a Compartir, a otro idioma o personalizarlo incluso más... para hacerlo utilizaremos JQuery, justo bajo las 2 líneas insertadas anteriormente añadiremos 2 más, el código quedaría de la forma:

    <script src='http://platform.linkedin.com/in.js' type='text/javascript'/>
    <script data-counter='right' expr:data-url='data:post.url' type='IN/Share'/>
    <script src='//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
    <script> $(window).load( function() { $('.IN-widget').find('span[id$="-title-text"]').text('Share'); }); </script>
    

    Simplemente es modificar en la última línea del código anterior el texto Share por Compartir, cualquier otro idioma o simplemente el texto que más nos guste (manteniendo ' ').
Hecho, si recargas la página ya tienes el botón Compartir en Linkedin personalizado y en el idioma deseado. Es importante destacar que el HTML de los puntos 3, 4 y 5 podemos insertarlo en nuestro blog de Blogger pero también en cualquier otro blog o web. Espero que os sea útil este artículo, dentro de areaTIC puedes encontrar otros artículos interesantes, no dudes en consultar nuestro archivo.


viernes, 21 de septiembre de 2012

WCF - Interceptar y manipular mensaje soap Cliente usando Message Inspector en tiempo de ejecución

En la mayoría de los casos WCF permite mediante la clase MessageContract modificar el mensaje soap. Si cliente y servidor son WCF no debería haber problema para manipular el mensaje usando MessageContract y sin duda es el modo más elegante de personalizar un mensaje pero a efectos de interoperabilidad no es aplicable en todos los escenarios.

WCF Extensibility proporciona herramientas con el objetivo que el desarrollador pueda personalizar el comportamiento de diversos aspectos de los servicios como seguridad, hosting, serialización, publicación de metadatos, canales...

En concreto en este artículo veremos como crear un Message Inspector personalizado y lo añadiremos a nuestro cliente WCF. El objetivo de Message Inspector es tener acceso a todos los mensajes de salida y entrada que procesa el cliente para manipular algún aspecto del mensaje soap.

En primer lugar crearemos una clase AreaTICMessageInspector:

    public class AreaTICMessageInspector: IDispatchMessageInspector, IClientMessageInspector
    {
        public AreaTICMessageInspector()
        {

        }

        #region IDispatchMessageInspector Members

        public object AfterReceiveRequest(ref System.ServiceModel.Channels.Message request, System.ServiceModel.IClientChannel channel, System.ServiceModel.InstanceContext instanceContext)
        {
            return null;
        }

        public void BeforeSendReply(ref System.ServiceModel.Channels.Message reply, object correlationState)
        {
        }

        #endregion

        #region IClientMessageInspector Members

        public void AfterReceiveReply(ref System.ServiceModel.Channels.Message reply, object correlationState)
        {

        }

        public object BeforeSendRequest(ref System.ServiceModel.Channels.Message request, System.ServiceModel.IClientChannel channel)
        {
            //Copiamos objeto request para poder modificarlo
            Message newMessage = null;
            MessageBuffer buffer = request.CreateBufferedCopy(Int32.MaxValue);
            request = buffer.CreateMessage();

            //obtenemos Xml del request
            XmlDocument oDoc = new XmlDocument();
            using (XmlWriter writer = oDoc.CreateNavigator().AppendChild())
            {
                request.WriteMessage(writer);
                writer.Close();
            }

            //Manipulamos XML mensaje
            //oDoc.Nodes.Add(...) o oDoc.Nodes[0].Attributes...

            //Damos el "cambiazo" de request original por el modificado
            XmlNodeReader reader = new XmlNodeReader(oDoc);
            newMessage = Message.CreateMessage(reader, int.MaxValue, request.Version);
            request = newMessage;

            return null;
        }

        #endregion
    }
}
En el ejemplo hemos implementado el método BeforeSendRequest que nos permite controlar el mensaje de salida en cliente. Si queremos manipular también la respuesta tendríamos que implementar AfterReceiveReply.

En segundo lugar hemos de crear una clase AreaTICMessageInspector, es importante implementar la interface IEndPointBehavior.

namespace AreaTIC
{
    [AttributeUsage(AttributeTargets.Class)]
    public class AreaTICMessageInspectorBehavior : Attribute, IEndpointBehavior
    {
        public AreaTICMessageInspectorBehavior() : base() 
        { 

        }

        #region IEndpointBehavior Members

        public void AddBindingParameters(ServiceEndpoint endpoint, System.ServiceModel.Channels.BindingParameterCollection bindingParameters)
        {
        }

        public void ApplyClientBehavior(ServiceEndpoint endpoint, System.ServiceModel.Dispatcher.ClientRuntime clientRuntime)
        {
            IClientMessageInspector inspector = null;
            inspector = new AreaTICMessageInspector();
            clientRuntime.MessageInspectors.Add(inspector);
        }

        public void ApplyDispatchBehavior(ServiceEndpoint endpoint, System.ServiceModel.Dispatcher.EndpointDispatcher endpointDispatcher)
        {
            //no es necesaria su implementación en cliente.
        }

        public void Validate(ServiceEndpoint endpoint)
        {
            //no es necesaria su implementación en cliente.
        }

        #endregion
    }
}
Por último hemos de añadir en tiempo de ejecución el EndPointBehavior personalizado al EndPoint que usa el cliente para comunicar:

      client.Endpoint.Behaviors.Add(new AreaTICMessageInspectorBehavior());
Espero que os sea útil este artículo, dentro de areaTIC puedes encontrar otros artículos interesantes, no dudes en consultar nuestro archivo.


sábado, 15 de septiembre de 2012

Capturar y analizar código HTTP con Fiddler

Hay varias herramientas como Fiddler, WebSphere, Cain (...) que nos permiten interceptar el tráfico entre aplicaciones cliente y servidor por protocolo http. Disponer de esta información puede ser útil en varios contextos. Por ejemplo, estamos desarrollando un servicio web que ha de ser totalmente interoperable con otras plataformas cliente y alguno de ellos está teniendo problemas de comunicación soap con nuestro servicio. Nos interesa comparar el mensaje en un cliente que funciona y en otro que no funciona para analizar que parte del mensaje hace que nuestro servicio lo rechace.

En este artículo veremos como configurar Fiddler en nuestra máquina cliente con el propósito de obtener toda la información que intercambia el navegador con el servidor web por puerto http y https (ssl).

Vamos a la página de descarga Fiddler, descargamos e instalamos. En el ejemplo usamos la versión v2.4.1. Una vez instalado, no haría falta configurar nada para empezar a usarlo. Al ejecutar Fiddler se nos abrirá una pantalla como esta.


Cada vez que desde un navegador hagamos una petición a una URL por puerto http /https quedará registrada como una nueva fila en el apartado Web Sessions que está situado en la parte izquierda de la pantalla.

Una vez empezamos a tener entradas, nos situamos en la fila que nos interesa y en la parte derecha seleccionamos la pestaña Inspectors. El apartado Insepectors se divide en dos partes (request y response) que nos permiten analizar las cabeceras y contenido del mensaje de petición cliente y su respectiva respuesta del servidor.

Es importante saber que Fiddler por defecto no desencripta el tráfico ssl por tanto si necesitamos capturar por puerto https tendremos que habilitar la opción. Nos situamos en el menú Tools/Fiddler Options. En la pestaña HTTPS marcamos las casillas que se muestran en la imagen.


Si es la primera vez que configuramos esta opción en la sesión de Windows, nos preguntará a cerca de si queremos almacenar el certificado de Fiddler en el CA de confianza de Windows. En otras palabras estamos permitiendo a Fiddler que suplante la identidad de los servidores donde están ubicadas URL que visitamos. Ya es eso lo que necesitamos en este caso por tanto respondemos "Sí" a esta y a la siguiente pregunta.


Por último en el escenario del ejemplo podría darse el caso que nuestro servicio sólo acepte peticiones autentificadas con certificado cliente. En este caso es necesario disponer del certificado cliente con claves privadas correctamente instalado en el almacén correspondiente. Si disponemos del certificado se trataría copiar la parte pública .cer en la ruta %USERPROFILE%\My Documents\Fiddler2\ClientCertificate.cer. De este modo Fiddler usará la parte pública de nuestro certificado cliente como puntero para acceder a las claves privadas que están almacenadas en Windows y podrá firmar la petición como cliente. Dentro de areaTIC puedes encontrar otros artículos interesantes, no dudes en consultar nuestro archivo.


viernes, 7 de septiembre de 2012

Metaetiqueta keywords en Blogger

La metaetiqueta keywords que sirve para indicar las palabras clave de una página no es usada para el posicionamiento en Google, si no habéis leído el artículo Metaetiqueta description en Blogger os lo recomiendo antes que sigáis adelante con éste.

Bien, si lo habéis leído "parece" (porque el famoso algoritmo de búsqueda de Google es secreto) que metaetiqueta keywords no es usada para el posicionamiento pero sí puede que sea usada por otros buscadores. Por tanto, os indicaré en unos breves pasos cómo podéis configurar una metaetiqueta keywords diferente para cada entrada de Blogger. Los pasos serían los siguientes, es muy sencillo:
  1. Entramos en Blogger, vamos al apartado Plantilla y pulsamos sobre el botón "Edición de HTML".


  2. Buscamos en el HTML en la plantilla el código:

    <title><data:blog.pageTitle/></title>
    

  3. Justo encima del código anterior añadimos el código siguiente para cada entrada de Blogger en la que queramos añadir la metaetiqueta keywords:

    <b:if cond='"http://url_entrada.html" == data:blog.url'>
      <meta content='metaetiqueta, keywords, blogger' name='keywords'/>
    </b:if>
    
    Donde:
    • "http://url_entrada.html" es la URL de la entrada de Blogger, algo del estilo "http://www.areatic.net/2012/08/metaetiqueta-keywords-en-blogger.html"
    • "metaetiqueta, keywords, blogger" son las palabras claves que queramos introducir, hasta N.
    Tras los cambios guardamos la plantilla.

  4. Por último comprobamos que ha funcionado correctamente. Tras publicar la entrada, abrimos en el navegador la entrada correspondiente y visualizamos el código fuente de la página, podemos ver cómo aparece la metaetiqueta keywords.


Espero que os sea útil este artículo, dentro de areaTIC puedes encontrar otros artículos interesantes, consulta nuestro archivo.


LECTURAS RELACIONADAS RECOMENDADAS POR AREATIC.NET