add

¿Cómo insertar videos de Facebook en mi blog de Blogger?


De una forma fácil y sencilla podrás insertar cualquier video de Facebook en su blog de Blogger, solo tendrá que seguir unos simples pasos y a compartir en sus blogs.

¿Cómo insertar videos de Facebook en mi blog de Blogger?

Pueden ver su demostración a continuación


¿Cómo insertar los códigos?

Lo que vamos hacer es copiar un código en el Editor HTML de nuestra plantilla, luego copiaremos otro código en el post que queramos compartir el video y por ultimo remplazaremos un ID único del video de Facebook.

Todos los videos que están insertados en Facebook tienen un ID único.

Empezamos:

1.- Ir a Blogger.com

2 Un clic en “Plantilla

¿Cómo insertar videos de Facebook en mi blog de Blogger?

3 Un clic en “Editar HTML

¿Cómo insertar videos de Facebook en mi blog de Blogger?

Ahora se le abrirá el Editor HTML de su plantilla

¿Cómo insertar videos de Facebook en mi blog de Blogger?

En este punto deberás presionar la tecla “Control” de su teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de su editor, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor, a continuación mire la imagen la cual le muestra como debe aparecerle el buscador en el editor HTML de su plantilla y así pueda colocar el código en el buscador al momento que yo diga busca este código.

 Blogger

4.- Busca el siguiente código

<body>

Inserte el siguiente script justo abajo del código que encontró

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&amp;version=v2.3";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

5.- Un clic en “Guardar plantilla

¿Cómo insertar videos de Facebook en mi blog de Blogger?

Para insertar un video de Facebook en un post “Entrada” siga las siguientes instrucciones

1.- Un clic en “Entradas

¿Cómo insertar videos de Facebook en mi blog de Blogger?

2.- Busque el post que quiera ingresar el video de Facebook, un clic en “Editar


3.- Active la casilla en modo “HTML”


4.- Ingrese las siguientes líneas de código donde usted vea conveniente

<div style="text-align: center;">
<div class="fb-video" data-href="https://www.facebook.com/facebook/videos/ID/" data-width="500">
<div class="fb-xfbml-parse-ignore">
<blockquote cite="https://www.facebook.com/facebook/videos/ID/">
<a href="https://www.facebook.com/facebook/videos/ID/"></a>
            </blockquote>
</div>
</div>
</div>

Realice estos tres cambios:

Elimine las letras que están marcadas de color Rojo las cuales dicen ID, y remplácelo por el número de identificación del video de Facebook.

Por ejemplo:

¿Cómo saber cuál es el ID número identificador del video de Facebook?

Todos los videos de Facebook tienen un solo ID, un número que lo identifica, puede ver la secuencia de las siguientes imágenes y así tenga una idea clara de cómo extraer ese número ID identificador

¿Cómo insertar videos de Facebook en mi blog de Blogger?
¿Cómo insertar videos de Facebook en mi blog de Blogger?
¿Cómo insertar videos de Facebook en mi blog de Blogger?
¿Cómo insertar videos de Facebook en mi blog de Blogger?

En la siguiente imagen se puede observar el ID número identificador del video

¿Cómo insertar videos de Facebook en mi blog de Blogger?

Copie todo el numero ID, y remplácelo donde dice ID en el código que le di anteriormente, le quedaría de la siguiente manera

<div style="text-align: center;">
<div class="fb-video" data-href="https://www.facebook.com/facebook/videos/1712503625665322/" data-width="500">
<div class="fb-xfbml-parse-ignore">
<blockquote cite="https://www.facebook.com/facebook/videos/1712503625665322/">
<a href="https://www.facebook.com/facebook/videos/1712503625665322/"></a>
            </blockquote>
</div>
</div>
</div>

Nota: puede cambiar el tamaño del video donde dice

width="500">

Cambie el número 500 por el que usted quiera

Eso es todo, ahora de un clic en “Actualizar


Mire su entrada con el video insertado de Facebook en ella

¿Cómo insertar un video de Facebook en un widget?

1.- Siga las instrucciones hasta el paso 5 de este tutorial

2.- Un clic en “Diseño

¿Cómo insertar videos de Facebook en mi blog de Blogger?

3.- Abrir “Añadir un gadget


4.- Busque el widget que dice “HTML/Javascript”, un clic y abrir

¿Cómo insertar videos de Facebook en mi blog de Blogger?

5.- Ingrese las siguientes líneas de código en su interior

<div style="text-align: center;">
<div class="fb-video" data-href="https://www.facebook.com/facebook/videos/ID/" data-width="300">
<div class="fb-xfbml-parse-ignore">
<blockquote cite="https://www.facebook.com/facebook/videos/ID/">
<a href="https://www.facebook.com/facebook/videos/ID/"></a>
            </blockquote>
</div>
</div>
</div>

Realice estos tres cambios:

Elimine las letras que están marcadas de color Rojo las cuales dicen ID, y remplácelo por el número de identificación del video de Facebook.

Por ejemplo:

¿Cómo saber cuál es el ID número identificador del video de Facebook?

Todos los videos de Facebook tienen un solo ID, un número que lo identifica, puede ver la secuencia de las siguientes imágenes y así tenga una idea clara de cómo extraer ese número ID identificador

¿Cómo insertar videos de Facebook en mi blog de Blogger?
¿Cómo insertar videos de Facebook en mi blog de Blogger?
¿Cómo insertar videos de Facebook en mi blog de Blogger?
¿Cómo insertar videos de Facebook en mi blog de Blogger?

En la siguiente imagen se puede observar el ID número identificador del video

¿Cómo insertar videos de Facebook en mi blog de Blogger?

Copie todo el numero ID, y remplácelo donde dice ID en el código que le di anteriormente, le quedaría de la siguiente manera

<div style="text-align: center;">
<div class="fb-video" data-href="https://www.facebook.com/facebook/videos/1712503625665322/" data-width="300">
<div class="fb-xfbml-parse-ignore">
<blockquote cite="https://www.facebook.com/facebook/videos/1712503625665322/">
<a href="https://www.facebook.com/facebook/videos/1712503625665322/"></a>
            </blockquote>
</div>
</div>
</div>

Nota: puede cambiar el tamaño del video donde dice

width="300">

Cambie el número 300 por el que usted quiera

Eso es todo, un clic en “Guardar” y ubique su nuevo widget donde usted guste

¡Fácil verdad!

¿Necesitas ayuda?

Cualquier pregunta no duden en escribir

0 comentarios:

Publicar un comentario en la entrada

Discusión

person_pin Luis Chávez

group_work Fundador

contact_phone +593 994589032

email ayudadeblogger@gmail.com

Entradas populares

Youtube.com/ayudadeblogger

Suscríbete

Etiquetas

Adsense dispositivos moviles (2) Alojamiento web (12) Aplicaciones moviles (15) Backlinks (1) Breaking News para Blogger (3) Como (32) Como crear una pagina web gratis (8) Comprar Dominios (2) Comprar un Dominio en Godaddy (2) Configurar dominio de Godaddy en Blogger (1) Consejos de Blogs (33) Consejos de Trafico (12) Correo Dominio (3) Crear un Sitemap (6) Crear una Aplicacion gratis (2) Diseno Responsive (5) Diseño Web (7) En vivo (1) Entradas Populares (18) Enviar Sitemap a Bing y Yahoo (1) Error al analizar XML (5) Facebook trucos (10) Firefox (9) Formulario de contactos (3) Ganar Dinero (22) Google (11) Google Adsense (10) Google Plus (5) Guia de SEO (2) Herramientas Blogger (4) Herramientas para Webmasters (6) Iconos Font Awesome (1) Info Tech (1) La ética de los blogs (2) Laptops (2) Manual Blogger (10) Material Design Blogger (2) Medios de Comunicacion Social (39) Menu desplegable (20) Menu Responsive para Blogger (6) Mobile-friendly (9) Movil (12) Noticias (3) Optimizado para moviles (4) Plantillas Blogger (42) Plantillas Landing page para Blogger (3) Popout (6) Posicionamiento SEO (22) Publicidad (2) SEO Mobile (12) SEO para Moviles (14) Sitemap (1) Sitios web optimizados para moviles (3) Slider Carrusel (7) Slideshow (35) Smartphone (12) Social Media Marketing (1) Tácticas de Marketing (4) Tecnologia (12) Temas de invitados (2) Top Hosting (3) Trucos Blogger (40) Trucos CSS y HTML (11) Web Hosting (14) Widget Acordeón (3) Widget Tab Multiple (1) Widgets para Blogger (69) Widgets Suscripciones (9) Widgets y Plugins (6)

Formulario de contacto

Nombre

Correo electrónico *

Mensaje *

Seguidores

Comentarios