ANEXO 3
Instructivo de uso para Redes Sociales Institucionales de la UNAM
ANEXO 3 | Manual de configuraciones tĂŠcnicas
Objetivo Incorporar algunos elementos de apoyo tĂŠcnico para incluir aplicaciones proporcionadas por las principales redes sociales: Facebook, Twitter y YouTube en el sitio web institucional correspondiente.
Contenido
2
1. Configuraciones en Twitter a. Feed de Twitter en un sitio web específico Al crear el sitio web institucional e integrar una estrategia de redes sociales, frecuentemente se pone a consideración sólo agregar los botones que hagan referencia a las cuentas de redes sociales como se muestra.
Sin embargo hay ocasiones en que se desea agregar feeds1 para mostrar la información sobre lo que se está publicando en las redes sociales institucionales.
Para lo anterior Twitter, tiene la funcionalidad de generar este tipo de ventanas o widgets que contienen el feed de lo que se va publicando en las cuentas de redes sociales institucionales.
1 Feed. Es una fuente de información suelen aparecer en blogs y sitios de noticias, están escritos en un lenguaje llamado XML. Fueron creados para leer en un sólo sitio web información de otros sitios web, es decir transportar contenido.
3
Para generar un widget se comienza por elegir: “Settings” y posteriormente “widgets”
En caso de haber creado algún widget con anterioridad, se desplegará su contenido tal como se muestra, esto permite reutilizarlos o editarlos en caso de ser necesario.
4
Para crear un widget nuevo, se debe activar el botón “Create new”, se desplegarán las siguientes opciones: a) Widget de timeline2 de usuario b) Widget de favoritos c) Widget para listas3 d) Widget de búsqueda Para crear el widget de timeline, se comienza por agregar la cuenta de usuario, definir la altura del widget, elegir los colores y crearlo. A continuación se muestra un ejemplo:
2 Timeline: se refiere al conjunto de tweets o actualizaciones que se dan sucesivamente en la plataforma de Twitter; puede estar conformado por las publicaciones de una sola cuenta, de las cuentas seguidas, o de las cuentas inscritas en una lista. 3 Listas de Twitter. Las listas son un filtro que permite ver los tuits de usuarios previamente seleccionados por parte del administrador o responsable de redes sociales.
5
1.-Elegir el usuario
2.-Elegir el tama単o en pixeles 3.-Configurar los colores del tema y del link
4.-Crear el Widget
6
El widget de Favoritos permite generar un espacio donde se muestran únicamente los tweets elegidos por la cuenta como favoritos. Para generar el widget para listas, se debe elegir de la sección “List” el título de la lista –generada previamente- se seleccionan las opciones deseadas y se da clic en “create widget”.
7
1.-Elegir la lista
2.-Elegir el tama単o en pixeles 3.-Configurar los colores del tema y del link
4.-Crear el Widget
8
9
En caso de llevar el seguimiento de un evento, o generar una estrategia de difusión a partir de un hashtag4 específico, se puede crear e incrustar un widget de búsqueda que lleve seguimiento del desarrollo de la conversación alrededor del hashtag; para crearlo, se debe elegir el término de búsqueda, elegir las configuraciones y seleccionar “create widget”. En el ejemplo se utiliza #OrgulloUNAM como término de búsqueda.
1.-Elegir el hashtag o búsqueda
2.-Elegir el tamaño en pixeles 3.-Configurar los colores del tema y del link
4.-Crear el Widget
4 Hashtag. Se refiere a una palabra que va precedida del símbolo # y se utilizan para diferenciar, destacar y agrupar una palabra o tópico especifico.
10
11
Posterior a dar clic en “Create Widget” aparecerá una pantalla como la siguiente donde se mostrará el código listo para que se inserte en el sitio web institucional.
5.-Copiar y pegar el código que aparece en el HTML del sitio web donde se desea incrustar.
b. Inserción de botones Para insertar botones en el sitio web institucional, Twitter ofrece un sitio donde se pueden seleccionar entre distintos formatos. 1. Se entra a la siguiente dirección electrónica: https://twitter.com/about/resources/buttons se desplegará la siguiente pantalla.
12
En esta interfaz se desglosan los pasos a seguir para cada botรณn con diversas opciones de configuraciรณn. Las siguientes capturas de pantalla ejemplifican el procedimiento para cada uno. โ ข
Botรณn Compartir enlace
13
Contador
Copiar y pegar este c贸digo en el sitio web.
Twitter determina a las personas que son de inter茅s para ti, basado en tus visitas recientes a un sitio web.
14
15
•
Botón Seguir
Botón grande.
Copiar y pegar este código en el sitio web.
•
Botón Etiquetar
16
En caso de poner texto, se abrirá una ventana con lo escrito aquí relacionado con #Digitalización. Listo para twittear o agregar lo que sea necesario (en menos de 140 caracteres).
Botón pequeño
Copiar y pegar este código en el sitio web.
17
โ ข
Botรณn Mencionar
18
En caso de poner texto, se abrirá una ventana con lo escrito aquí para @Toda_la_UNAM listo para twittear o agregar lo que se necesite, limitado por el espacio.
Copiar y pegar este código en el sitio web.
19
1. Configuraciones en Facebook
a. Insertar publicaciones de Facebook en un sitio/blog Facebook ofrece un código para insertar en el sitio web las publicaciones que se van generando en este sitio de redes sociales. A través del “código EMBED”, se pueden insertar publicaciones de esta red social en una página web, siempre que el post se encuentre en modalidad pública. Estas publicaciones también se despliegan adecuadamente aún y si contienen material de tipo imagen o video. Para generar el código se deben seguir los siguientes pasos: 1. Se debe verificar que la publicación, se encuentra en una página de fans de Facebook y que su modalidad de privacidad es del tipo “Pública”.
2. Dentro de la publicación se debe seleccionar el ícono de “flecha” y dar clic sobre la opción “Insertar publicación”.
3. La aplicación de Facebook desplegará en código en lenguaje HTML y lo dejará listo para insertarlo en el sitio web institucional.
20
b. Plug-in social de Facebook en una página web o blog Una buena práctica es estar constantemente actualizado sobre los últimos complementos y aplicaciones que proporciona Facebook. Para ello la plataforma ofrece la sección “Social Plugins”, disponible en: https://developers.facebook.com/docs/plugins/
En la plataforma se encuentra una sección sobre “Buenas prácticas” y el procedimiento para insertar botones de la plataforma. A continuación se coloca el proceso general de los botones más utilizados “Like Button” y el “Follow Button”. •
Like Button
21
Establecer las medidas del widget en pixeles.
Insertar la URL de la publicaciรณn
Elegir el color y el estilo.
Crear el cรณdigo.
Ofrece la opciรณn de elegir el tipo de acciรณn del botรณn a crear.
22
La plataforma muestra el código listo para ser insertado en diferentes formatos. Según la construcción del sitio web institucional, el webmaster elegirá la mejor opción para incluirlo como se muestra:
•
Botón “Follow” o “seguir”
Establecer las medidas del widget en pixeles.
Insertar la URL del perfil a seguir
Elegir el color y el estilo.
Crear el código.
23
De igual manera la plataforma despliega el c贸digo listo para ser insertado.
24
2. Configuraciones en YouTube a. Insertar video en una página web o blog En ocasiones algunos sitios web institucionales desean insertar vídeos generados en YouTube para ello se puede copiar el “código EMBED”5, éste se puede generar de la siguiente forma: 1. Subir el video 2. Dar clic y seleccionar “Compartir” y la sección “Insertar vínculo”. 3. Seleccionar el tamaño (alto y ancho) del video, deseado. 4. Se desplegará el código en formato HTML, éste podrá incluirse en el sitio web institucional.
Aquí se establece el tamaño del video en pixeles.
5 El código EMBED es denominado al código proporcionado por los numerosos servicios Web 2.0 para poder insertar en nuestro sitio web, wiki o blog numerosos elementos multimedia.
25
b. Insertar el botón de YouTube en una página web Para insertar el botón de YouTube en el sitio web institucional, se debe realizar lo siguiente: 2. Ir a la página: https://developers.google.com/youtube/youtube_subscribe_button 3. Deslizarse hacia abajo hasta encontrar la opción “Configure a button” y seguir los pasos que se muestran en la figura siguiente:
Insertar el nombre del canal. En este caso “UNAM”
Layout full es para que aparezca con el logo. Theme con fondo o sin fondo.
Copiar y pegar este código en el sitio web.
26
Para cualquier duda o requerimiento de orientaci贸n, favor de contactarnos en el correo electr贸nico coordinacionweb@unam.mx
27