¿Cómo insertar el nuevo plugin Pagina Social de Facebook en mi blog de Blogger?


¿Agregar Pagina Social plugin de Facebook en mi página web? ¿Página Social plugin de Facebook instalar en mi blog? ¿Cómo agregar mi Fanpage de Fecebook Social plugin? La caja de seguidores de Facebook desaparecerá el 23 de junio del 2015, Facebook lo anuncio en su página, en vez de la caja de seguidores de Facebook podrán optar por una caja completa social de su Fanpage página de Facebook con seguidores y post. Ahora los que tienen el código de la caja de seguidores de Facebook ya no les funcionara a partir de la fecha anunciada. En vez de la caja de seguidores de Facebook podrán insertar un nuevo código en el cual se mostrara la Fanpage de su página de Facebook, también podrán mostrar una lista de seguidores de su página de Facebook, además los post que hayan compartido en su página de Facebook, todo depende que es lo que buscan insertar en su página web, blog, Blogger, Wordpress, Joomla, etc.

¿Cómo insertar el nuevo plugin Pagina Social de Facebook en mi blog de Blogger?

El nuevo plugin Social de Facebook Pagina plugin lo podrán insertar donde ustedes quieran, puede ser dentro de un post “articulo”, en un widget, debajo de cada post, al inicio de cada post, en la página principal, etc.

¿Podre promover cualquier página de Facebook con este plugin página?

El Plugin página le permite fácilmente incrustar y promover cualquier página de Facebook en su sitio web. Al igual que en Facebook, los usuarios pueden recibir y compartir la página sin tener que salir de su sitio.

La inserción del código es muy fácil de instalarla, basta con copiar un simple código y listo.

Pueden ver su demostración en la siguiente página de demos a continuación

DEMO

¡Te gusto verdad!

Vamos a trabajar

1 Ir a Blogger

¿Cómo insertar el Plugin página de mi Fanpage de Facebook en un widget?

¿Cómo insertar el Plugin página de mi Fanpage de Facebook en un widget?

1 Da un clic en “Plantilla

Plantillas Blogger

2 Un clic en “Editar HTML

Plantillas Blogger

Ahora se te abrirá el editor HTML de tu plantilla, se mostrara igual como la imagen que esta a continuación

¿Cómo insertar el nuevo plugin Pagina Social de Facebook en mi blog de Blogger?

En este punto deberás presionar la tecla “Control” de tu teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de tu editor, debes esperar unos segundos hasta que se muestre, 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 te mostrara tal y cual deberá aparecerte el buscador en tu editor HTML de tu plantilla y así puedas colocar el código en el buscador al momento que yo diga busca este código.

¿Cómo insertar el nuevo plugin Pagina Social de Facebook en mi blog de Blogger?

Busca este código

<body>

Si no encuentran ese código pueden buscar este otro código

<body expr:class=

Ingresa el siguiente código justo abajo del código que encontraste

<div id='fb-root'/>
<script>
//<![CDATA[
(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/es_ES/sdk.js#xfbml=1&version=v2.3";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]>
</script>


page plugin Facebook

3 Ahora da un clic en “Guardar plantilla” y sigue las siguientes instrucciones:

- Tenemos que insertar un código en un widget

1 Un clic en “Diseño


2 Abre “Añadir un gadget


3 Busca el widget que dice “HTML/Javascript” ábrelo


4 Ingresa las siguientes líneas de código en su interior

<div class="fb-page" data-href="https://www.facebook.com/ayudadeblogger" data-width="298" data-height="248" data-hide-cover="false" data-show-facepile="true" data-show-posts="false"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/ayudadeblogger"><a href="https://www.facebook.com/ayudadeblogger">Ayuda de Blogger</a></blockquote></div></div>


Realiza estos cambios:

Cambia las tres URLs que están marcadas de color azul https://www.facebook.com/ayudadeblogger por el nombre de tu Fanpage de Facebook

Cambia el título que está marcado de color rojo Ayuda de Blogger por el nombre de tu Fanpage de Facebook

Ahora da un clic en “Guardar” y ubica tu widget social donde tú quieras que se muestre

¿Cómo insertar el Plugin página de mi Fanpage de Facebook en una entrada “Post” “Articulo”?

¿Cómo insertar el Plugin página de mi Fanpage de Facebook en una entrada “Post” “Articulo”?

1 Da un clic en “Plantilla

¿Cómo insertar el nuevo plugin Pagina Social de Facebook en mi blog de Blogger?

2 Un clic en “Editar HTML

Plantillas Blogger

Ahora se te abrirá el editor HTML de tu plantilla, se mostrara igual como la imagen que esta a continuación

Plantillas Blogger

En este punto deberás presionar la tecla “Control” de tu teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de tu editor, debes esperar unos segundos hasta que se muestre, 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 te mostrara tal y cual deberá aparecerte el buscador en tu editor HTML de tu plantilla y así puedas colocar el código en el buscador al momento que yo diga busca este código.

¿Cómo insertar el nuevo plugin Pagina Social de Facebook en mi blog de Blogger?

Busca este código

<body>

Si no encuentran ese código pueden buscar este otro código

<body expr:class=

Ingresa el siguiente código justo abajo del código que encontraste

<div id='fb-root'/>
<script>
//<![CDATA[
(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/es_ES/sdk.js#xfbml=1&version=v2.3";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]>
</script>


page plugin Facebook

3 Ahora da un clic en “Guardar plantilla” y sigue las siguientes instrucciones:

- Tenemos que insertar un código en una Entrada

1 Un clic en una entrada


2 Activa la casilla en modo “HTML


3 Inserta el siguiente código justo al final del código de tu artículo

<div class="fb-page" data-href="https://www.facebook.com/ayudadeblogger" data-width="298" data-height="248" data-hide-cover="false" data-show-facepile="true" data-show-posts="false"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/ayudadeblogger"><a href="https://www.facebook.com/ayudadeblogger">Ayuda de Blogger</a></blockquote></div></div>


Realiza estos cambios:

Cambia las tres URLs que están marcadas de color azul https://www.facebook.com/ayudadeblogger por el nombre de tu Fanpage de Facebook

Cambia el título que está marcado de color rojo Ayuda de Blogger por el nombre de tu Fanpage de Facebook

4 Ahora da un clic en “Actualizar” en la parte superior y listo mira tú artículo


¿Cómo insertar el Plugin página de mi Fanpage de Facebook en un widget incluido seguidores y post que publique en mi página de Fecebook?

¿Cómo insertar el Plugin página de mi Fanpage de Facebook en un widget incluido seguidores y post que publique en mi página de Fecebook?

1 Da un clic en “Plantilla

¿Cómo insertar el nuevo plugin Pagina Social de Facebook en mi blog de Blogger?

2 Un clic en “Editar HTML

Plantillas Blogger

Ahora se te abrirá el editor HTML de tu plantilla, se mostrara igual como la imagen que esta a continuación

¿Cómo insertar el nuevo plugin Pagina Social de Facebook en mi blog de Blogger?

En este punto deberás presionar la tecla “Control” de tu teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de tu editor, debes esperar unos segundos hasta que se muestre, 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 te mostrara tal y cual deberá aparecerte el buscador en tu editor HTML de tu plantilla y así puedas colocar el código en el buscador al momento que yo diga busca este código.

¿Cómo insertar el nuevo plugin Pagina Social de Facebook en mi blog de Blogger?


Busca este código

<body>

Si no encuentran ese código pueden buscar este otro código

<body expr:class=

Ingresa el siguiente código justo abajo del código que encontraste

<div id='fb-root'/>
<script>
//<![CDATA[
(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/es_ES/sdk.js#xfbml=1&version=v2.3";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]>
</script>


page plugin Facebook

3 Ahora da un clic en “Guardar plantilla” y sigue las siguientes instrucciones:

- Tenemos que insertar un código en un widget

1 Un clic en “Diseño


2 Abre “Añadir un gadget


3 Busca el widget que dice “HTML/Javascript” ábrelo


4 Ingresa las siguientes líneas de código en su interior

<div class="fb-page" data-href="https://www.facebook.com/ayudadeblogger" data-width="298" data-height="248" data-hide-cover="false" data-show-facepile="true" data-show-posts="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/ayudadeblogger"><a href="https://www.facebook.com/ayudadeblogger">Ayuda de Blogger</a></blockquote></div></div>


Realiza estos cambios:

Cambia las tres URLs que están marcadas de color azul https://www.facebook.com/ayudadeblogger por el nombre de tu Fanpage de Facebook

Cambia el título que está marcado de color rojo Ayuda de Blogger por el nombre de tu Fanpage de Facebook
Ahora da un clic en “Guardar” y ubica tu widget social donde tú quieras que se muestre

¿Cómo insertar el Plugin página de mi Fanpage de Facebook en una Entrada “Post” “Articulo” incluido seguidores y post que publique en mi página de Fecebook?

¿Cómo insertar el Plugin página de mi Fanpage de Facebook en una Entrada “Post” “Articulo” incluido seguidores y post que publique en mi página de Fecebook?

1 Da un clic en “Plantilla

¿Cómo insertar el nuevo plugin Pagina Social de Facebook en mi blog de Blogger?

2 Un clic en “Editar HTML

¿Cómo insertar el nuevo plugin Pagina Social de Facebook en mi blog de Blogger?

Ahora se te abrirá el editor HTML de tu plantilla, se mostrara igual como la imagen que esta a continuación

¿Cómo insertar el nuevo plugin Pagina Social de Facebook en mi blog de Blogger?

En este punto deberás presionar la tecla “Control” de tu teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de tu editor, debes esperar unos segundos hasta que se muestre, 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 te mostrara tal y cual deberá aparecerte el buscador en tu editor HTML de tu plantilla y así puedas colocar el código en el buscador al momento que yo diga busca este código.

¿Cómo insertar el nuevo plugin Pagina Social de Facebook en mi blog de Blogger?

Busca este código

<body>

Si no encuentran ese código pueden buscar este otro código

<body expr:class=

Ingresa el siguiente código justo abajo del código que encontraste

<div id='fb-root'/>
<script>
//<![CDATA[
(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/es_ES/sdk.js#xfbml=1&version=v2.3";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]>
</script>


page plugin Facebook

3 Ahora da un clic en “Guardar plantilla” y sigue las siguientes instrucciones:

- Tenemos que insertar un código en una Entrada

1 Un clic en una entrada


2 Activa la casilla en modo “HTML


3 Inserta el siguiente código justo al final del código de tu artículo

<div class="fb-page" data-href="https://www.facebook.com/ayudadeblogger" data-width="298" data-height="248" data-hide-cover="false" data-show-facepile="true" data-show-posts="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/ayudadeblogger"><a href="https://www.facebook.com/ayudadeblogger">Ayuda de Blogger</a></blockquote></div></div>


Realiza estos cambios:

Cambia las dos URLs que están marcadas de color azul https://www.facebook.com/ayudadeblogger por el nombre de tu Fanpage de Facebook

Cambia el título que está marcado de color rojo Ayuda de Blogger por el nombre de tu Fanpage de Facebook

4 Ahora da un clic en “Actualizar” en la parte superior y listo mira tú artículo


¿Cómo puedo ajustar el tamaño, anchura y altura?

Podrás ajustar su tamaño, tanto su achura y altura en el siguiente lugar

Width  “Anchura”
Height “Altura”

Cambia su anchura donde dice:

width="298"

Cambia su altura donde dice: 

height="248"

¡Fácil verdad!

¿Necesitas ayuda?

Cualquier pregunta no duden en hacérmelo saber

Recuerda suscribirte:

Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
¿Te ha resultado útil este artículo, recomiendanos?
Si



Share:

Luis Chávez

Soy el fundador del sitio web Ayudadeblogger.com - Considerado un Pro Blogger profesional, Consultor SEO y desarrollador Web adicto, ejecuto una serie de sitios web desde mi Oficina Quito-Ecuador.

Related post

Comentarios

21 comentarios:

  1. Hola Luis, quería saber como o con que programa podría crearme una plantilla para blogger sin tanto complique... Gracias

    ResponderEliminar
  2. Una pregunta, en mi caso asi aparece:
    body expr:class='"loading" + data:blog.mobileClass'>
    sin embargo lo pego el codigo debajo de eso y al guardar me aparece esto:

    Error al analizar XML, línea 1289, columna 64: The reference to entity "version" must end with the ';' delimiter.

    ResponderEliminar
    Respuestas
    1. hola, esto te puede ayudar
      http://gtutoz.blogspot.pe/2015/09/integrar-page-plugin-de-facebook-blogger.html

      Eliminar
  3. Hola tengo un problema cuando añado widget arriba a la derecha en mi blog y no acaba de configurarse

    ResponderEliminar
  4. perdona mi pagina es: www.zona311basket.com

    ResponderEliminar
  5. hola buenas, yo tenia una duda y es como hacer que los comentarios de google plus me los contabilice en el home de la pagina o un widget con los comentarios recientes de google plus, gran pagina la tuya me encanta.

    ResponderEliminar
    Respuestas
    1. Hola Genoma, es muy buena su pregunta, le sugiero que se suscriba para que cuando publique un tutorial sobre su pregunta lo pueda realizar, saludos.

      Eliminar
  6. Holaa buenas tardes hice todos los pasos para que se vea el plugin de fan page y pude guardarlo pero no aparece la cajita en mi face intente de varias fortmas y nada por favor me puede ayudar, hae una semana si se veai

    ResponderEliminar
  7. Muchas gracias, lo explicas todo muy bien y es muy útil.
    Saludos,
    Anne.

    ResponderEliminar
  8. Hola!! lo he hecho ya mil veces así y con el programa facebook developer y nada me deja hacer todo pero en mi blog no sale nada :(
    ¿Porque puede ser eso?
    Muchas gracias por el trabajo que hace,mi blog es www.27forever.es por si me lo podrias solucionar viendolo.
    Saludos

    ResponderEliminar
    Respuestas
    1. Hola Rocio, mi primera pregunta es ¿en que parte de su blog de Blogger necesita insertar este truco de Blogger?

      Puede comunicarse directamente enviándome un correo electrónico a la siguiente dirección: ayudadeblogger@gmail.com

      Hágame saber lo solicitado

      Saludos.

      Eliminar
  9. Muchísimas gracias por tu gran trabajo. Me ha funcionado.

    ResponderEliminar
  10. Woooow, muchisimas gracias, lo había probado en otros tutoriales y con el tuyo ha sido con el único que me ha salido a la primera, con foto incluida de mi página de facebook. Muy bien explicado.

    ResponderEliminar
    Respuestas
    1. Hola Miriam, gracias por escribir, es un gusto saber que le sirvió de mucha ayuda este tutorial,

      Saludos.

      Eliminar
  11. Saludos, en mi platilla en edición html no aparecen los códigos body

    ResponderEliminar