add

Agregar FanBox de Twitter y Facebook en mi página web


¿Cómo puedo insertar un código simple que contenga mi FanBox de Twitter y Facebook? De una forma fácil puedes agregar una FanBox de Twitter y Facebook en su página web o blog, este truco sirve para insertarlo en cualquier blog o página web. La implementación del código es tan simple, solo tienes que copiar y pegarlo, además de realizar unos 4 cambios y nada más.

Agregar FanBox de Twitter y Facebook en mi página web

Pueden ver su demostración y funcionamiento en la siguiente página web, el widget FanBox está ubicado en el sidebar casi al final

DEMO

1 Ir a Blogger

2 Un clic en “Diseño

Agregar FanBox de Twitter y Facebook en mi página web

3 Da un clic en “Añadir un gadget

Agregar FanBox de Twitter y Facebook en mi página web

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

Agregar FanBox de Twitter y Facebook en mi página web

5 Inserta las siguientes líneas de código en su interior

<style type="text/css">
    #bstf-box { background-color:#04BDFA; border-bottom:1px solid #ccc; height: 270px; position:relative; margin-bottom:10px; width:292px; }
    #bstf-box:before,#bstf-box:after{ background:#f7f7f7; border:1px solid #aaa; border-top:none; bottom:-3px; content:""; height:1px; left:2px; position:absolute; right:2px; }
    #bstf-box:after { bottom:-5px; box-shadow:0 0 2px #aaa; left:4px; right:4px; }
    /*www.ayudadeblogger.com*/
    .twitterpage { height: 34px; overflow: hidden; }
    </style>
    <div id="bstf-box">
    <object type="application/x-shockwave-flash" data="http://www.twpics.com/BUTTON6/twitbutton.swf" width="290" height="80"><param name="movie" value="http://www.twpics.com/BUTTON6/twitbutton.swf" /><param name="allowscriptaccess" value="always" /><param name="menu" value="false" /><param name="wmode" value="transparent" /><param name="flashvars" value="username=increibleviaje" /><embed src="http://www.twpics.com/BUTTON6/twitbutton.swf" type="application/x-shockwave-flash" allowscriptaccess="always" width="180" height="80" menu="false" wmode="transparent" flashvars="username=increibleviaje"></embed></object>
    <div class="twitterpage"><iframe allowtransparency="true" frameborder="0
    " scrolling="no" src="//platform.twitter.com/widgets/follow_button.html?screen_name=increibleviaje" style="background: #f6f6f6; border-color: #CCCCCC; border-style: solid; border-width: 0 1px; height: 20px; padding: 7px; width: 276px;"></iframe></div>
    <div class="fb-page" data-href="https://www.facebook.com/increibleviaje" 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/increibleviaje"><a href="https://www.facebook.com/increibleviaje">Increible viaje</a></blockquote></div></div>
    </div>

6 Realiza estos cambios

He marcado de dos diferentes colores en los lugares que tendras que realizar sus diferentes cambios

Borra los tres textos que están marcados de color azul increibleviaje y remplázalos por el nombre de su página de Twitter

Por ultimo elimina las tres direcciones URLs que están marcadas de color azul https://www.facebook.com/increibleviaje y remplázalo por la dirección URL de su página de Facebook, además borre las palabras que dicen Increíble viaje por el nombre de tu FanPage

Agregar FanBox de Twitter y Facebook en mi página web

Eso es todo, luego le das un clic en “Guardar” ubica tu widget FanBox de Twitter y Facebook donde mejor te parezca

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

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.

Plantillas 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>

 


3 Ahora da un clic en “Guardar plantilla

¡Fácil verdad!

¿Necesitas ayuda?

Cualquier pregunta no duden en hacérmelo saber
emailEnviar por correo

3 comentarios:

  1. AMIGO COMO HAGO PARA PONER LOS NUEVOS CODIGOS DE FACEBOOK YA QUE LOS ANTERIORES YA NO TRABAJAN

    ResponderEliminar
  2. Hola, twitter sí me funciona, pero fb no. ¿Me puedes ayudar?

    ResponderEliminar
  3. Hola, te recuerdo que la caja de seguidores de Facebook a partir del 23 de junio de este año quedara totalmente obsoleta, es por eso que he creado un nuevo artículo en el cual explico claramente cómo realizar un nuevo truco con el nuevo plugin social que ofrece la plataforma de Facebook para sus Fanpage. Sigue las instrucciones del siguiente tutorial: http://www.ayudadeblogger.com/2015/05/como-insertar-el-nuevo-plugin-pagina-social-de-facebook-en-mi-blog-de-blogger.html

    Al igual este tutorial voy a actualizarlo en estos días para que puedan tener este truco de Facebook y Twitter en sus páginas web con el nuevo plugin social de Facebook.

    Saludos.

    ResponderEliminar

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 (33) 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 (11) 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