¿Cómo añadir Facebook en HTML?

Inicio » ¿Cómo añadir Facebook en HTML?

Generador de código html de Facebook

El botón de compartir da a tus clientes la oportunidad de defender realmente tu empresa explicando por qué enlazan a tus publicaciones. Por supuesto, también es sencillo copiar y pegar tu enlace sin ningún comentario.

El botón Guardar permite a los seguidores guardar artículos o servicios en una lista privada y compartirla con sus amigos. Por ejemplo, si tu cliente ve una camisa que le gusta en tu tienda de ropa, puede guardarla y volver más tarde.

También es posible transferir manualmente el código de una publicación de vídeo. Lo único que tienes que hacer es elegir la opción “incrustar vídeo” en el menú de opciones del contenido. El vídeo tendrá que estar configurado como público para que aparezca en tu sitio web. A continuación, copia y pega ese código en la página web donde quieras que aparezca tu vídeo.

Por último, pero no menos importante, una forma fantástica de ampliar tu alcance social y mostrar el contenido desde una perspectiva omnicanal es utilizando publicaciones incrustadas. Al igual que los vídeos incrustados, estos fragmentos de código te permiten mostrar publicaciones específicas en tu sitio web.

Generador de botones html para redes sociales

Estos botones sirven para promover la presencia de su negocio en varias redes sociales y le ayudan a generar fans/seguidores para esas cuentas en particular. Al colocar estos botones en el sitio web de su empresa, puede ayudar a crear visibilidad para sus cuentas de redes sociales y ampliar fácilmente su alcance allí.

Estos enlaces y botones permiten a los visitantes de tu sitio web y a los espectadores de tus contenidos compartirlos fácilmente con sus contactos y redes sociales. Añadir estos botones a su contenido le permite ampliar el alcance de su contenido a nuevas audiencias y generar nuevos visitantes a su sitio web.

Este botón es ideal para animar a los visitantes a tuitear sobre determinados hashtags que estás promocionando, como en el caso de eventos o campañas de marketing específicas. Añade estos botones a las páginas de estas campañas o eventos para difundir y promover el evento y su hashtag. (Para obtener más información sobre el uso de los hashtags, consulta esta entrada del blog).

Por suerte, existe una magnífica herramienta gratuita que te ayudará a crear fácilmente enlaces “Tweet This” para tus contenidos. Sólo tienes que visitar http://clicktotweet.com, introducir el mensaje que quieres que rellene el tuit y hacer clic en “Generar nuevo enlace”, y luego copiar/pegar la URL generada en tu texto de anclaje (por ejemplo, “¡Tuitea esto!”):

Plugin de la página de Facebook

Copie y pegue el ejemplo de código en su sitio web. Ajusta el valor data-href a la URL de tu sitio web. A continuación, utiliza las metaetiquetas og:*** para ajustar la vista previa del enlace. og:url y data-href deben utilizar la misma URL.

true significa utilizar el mecanismo de carga lenta del navegador estableciendo el atributo iframe loading=”lazy”. El efecto es que el navegador no renderiza el plugin si no está cerca de la ventana gráfica y puede que nunca se vea. Puede ser uno de true o false (por defecto).

data-mobile_iframeSi se establece en true, el botón de compartir abrirá el diálogo de compartir en un iframe (en lugar de una ventana emergente) en la parte superior de su sitio web en móviles. Esta opción sólo está disponible para móviles, no para ordenadores de sobremesa. Para más información, consulte Mobile Web Share Dialog.falsesize

Botones de medios sociales html

Aquí tengo 7 imágenes de iconos de medios sociales y todos ellos tienen estados de rollover. Eso significa que podría haber 14 peticiones HTTP para imágenes sólo para estos pequeños botones. Las imágenes en sí mismas pueden ser pequeñas, pero son las peticiones separadas para obtener las imágenes las que pueden incrementar severamente la carga de la página.

Como puedes ver, un sprite es una gran imagen que puede ser desplazada para mostrar sólo partes de ella en determinados momentos. Aquí cada botón es de 32 píxeles por 32 píxeles. Están colocados uno al lado del otro para que no haya espacio entre ellos – esto hace que sea más fácil después cuando se hace el posicionamiento CSS.

Como puedes ver, se trata de una simple lista HTML para cada elemento de las redes sociales y cada elemento de la lista tiene su propio ID (esto es para el posicionamiento CSS). He quitado los enlaces y los títulos para que puedas ver lo que está pasando.

Entonces, ¿por qué los pongo en la cabecera cuando siempre han estado en la barra lateral? He aprendido, probando sitios web en los últimos años, que ser obvio funciona: es mucho más probable que se haga clic en un botón grande que en uno pequeño.

Ir arriba