Trucos Para unir Blogger con facebook

APP VIRAL VIDEO FACEBOOK PARA BLOGGER

2013-04-09T02:32:00.004-07:00

Hola para los que esperaban la app facebook viral para blogger bueno ya esta aquí

PARA CONTACTAR CON EL CREADOR https://www.facebook.com/AxxeLiitoo

LO QUE HACE ES PUBLICAR LA ENTRADA QUE VISTE EN EL MURO DE FACEBOOK

PARA VER UN EJEMPLE DE COMO FUNCIONA

VER EJEMPLO AQUI

Paginación o páginas numeradas en Blogger

2011-11-15T14:10:00.001-08:00

Blogger solo muestra un enlace a la página siguiente y anterior, con la páginacion es posible mostrar un cantidad más grande de páginas para navegar indicadas con números y al mismo tiempos el siguiente y anterior su funcionamiento es un script y style muy simple y fácil de colocar el blogger.

Comencemos:

Primero ingresamos a blogger / Plantillas / Edicion HTML y precionando Ctrl + f buscamos ]]></b:skin> y antes del codigo pegamos lo siguiente:

Segundo buscamos el </body> y arriba de el pegamos el siguiente script:

Tercero Guardamos y a disfrutar de nuestra paginan en nuestro blogger. para verlo en funcionamiento clic aqui. También les dejo una imagen de como queda :D.

como hacer que cualquier usuario publique una entrada en blogger

2011-09-15T09:15:00.000-07:00

Hola a todos tiempos que ya no publicaba, hoy aprenderemos como hacer que cualquier usuario pueda publicar en nuestro blogger.

Empecemos aclarando que Blogger sólo tiene una modalidad para agregar autores y es yendo a Configuración | Permisos. Ahí damos click en Añadir autores y agregamos la dirección de correo de la persona a la que queremos invitar para que publique en el blog. Esta opción permite agregar hasta 100 personas como autores del blog.

¿Pero y si no queremos estar agregando autores uno por uno al blog? Es decir, ¿qué pasa si quiero que absolutamente cualquier persona -sin importar si tiene cuenta en Google o no- pueda publicar en el blog?

Para eso vamos a tener que recurrir a una web externa que acepte PHP yo les aconsejo 000webhost.com para poder alojar nuestro accion del formulario de envio ya que blgger no acepta php.

Habiendo creado nuestra cuenta en 000webhost.com u otro servidor que mas les guste ahi crearemos lo siguiente:
-enviar.php
dentro copiamos el código azul que les dejo a continuación modificando **.

**tienen que modificar los datos de envió de correo:

$destino= "xxxxxx.yyyyy@blogger.com"; = esto se crea en el blogger/configuración/moviles y Correo
$remitente = "xxxx@hotmail.com"; = Una cuenta de hotmail, gmail u otro que te guste

<link rel='stylesheet' href='estilos.css'>
<?php
if(empty($_POST['titulo'])) {
?>
<form class="contacto" action="<?=$_SERVER['PHP_SELF']?>" method="post" >
<label>SI ESTAS AQUÍ ES POR QUE SEGURO NO LLENASTE EL CAMPO :D ASÍ QUE VUELVELO A INTENTAR</label>

Titulo:<input type="text" name="titulo" />
<textarea name="mensaje" rows="3" cols="50"></textarea><input type="submit" value="PUBLICAR
YA

"/>
</form>

<?php

}else{
$mensaje.= $_POST['titulo'];
$mensaje.= $_POST['mensaje'];
$destino= "xxxxxx.yyyyyy@blogger.com";
$remitente = "xxxxx@hotmail.com";
$asunto = "".$_POST['titulo'];
mail($destino,$asunto,$mensaje,"FROM: $remitente");

?>
<p><strong>Yeahh tu chiste fue recibida.</strong></p> En un par de segundos se posteara no te olvides de publicarlo en tu muro <a href="http://frasesfeis.blogspot.com" target="_parent">clic aquí para ver</a>

<?php
}
?>

ahora creamos este otro archivo y lo guardamos como estilos.css

*{
font-family: sans-serif;
font-size: 12px;
color: #798e94;
}
body{
width: 400px;
margin: auto;
background-color: #E2ECEE;
}
.contacto{
border: 1px solid #CED5D7;
border-radius: 6px;
padding: 45px 45px 20px;
margin-top: 50px;
background-color: white;
box-shadow: 0px 5px 10px #B5C1C5, 0 0 0 10px #EEF5F7 inset;
}
.contacto label{
display: block;
font-weight: bold;
}
.contacto div{
margin-bottom: 15px;
}
.contacto input[type='text'], .contacto textarea{
padding: 7px 6px;
width: 294px;
border: 1px solid #CED5D7;
resize: none;
box-shadow:0 0 0 3px #EEF5F7;
margin: 5px 0;
}
.contacto input[type='text']:focus, .contacto textarea:focus{
outline: none;
box-shadow:0 0 0 3px #dde9ec;
}
.contacto input[type='submit']{
border: 1px solid #CED5D7;
box-shadow:0 0 0 3px #EEF5F7;
padding: 8px 16px;
border-radius: 20px;
font-weight: bold;
text-shadow: 1px 1px 0px white;
background: #e4f1f6;
background: -moz-linear-gradient(top, #e4f1f6 0%, #cfe6ef 100%);
background: -webkit-linear-gradient(top, #e4f1f6 0%,#cfe6ef 100%);
}
.contacto input[type='submit']:hover{
background: #edfcff;
background: -moz-linear-gradient(top, #edfcff 0%, #cfe6ef 100%);
background: -webkit-linear-gradient(top, #edfcff 0%,#cfe6ef 100%);
}
.contacto input[type='submit']:active{
background: #cfe6ef;
background: -moz-linear-gradient(top, #cfe6ef 0%, #edfcff 100%);
background: -webkit-linear-gradient(top, #cfe6ef 0%,#edfcff 100%);
}

Allí terminamos con lo que es la acción enviar ahora pasamos al blogger nos vamos a configuración / plantillas / editar html y buscamos el campo que mejor les parezca para nuestro formulario, y para los que no están muy familiarizamos con eso insertamos un widget html. y para cualquiera de los dos casos pegamos lo siguiente, a por cierto aquí tenemos que pegar la url de la action que hicimos en php.

<form action='http://tuweb.tuwebphp.com/enviar.php' class='contacto' method='post'>
<label>CREA Y PUBLICA TU<br/><br/> FRASE DESDE AQUI:<br/><br/></label>
Titulo del chiste: <input name='titulo' type='text'/> <br/>
<textarea cols='50' name='mensaje' placeholder='Dale escribe y publica el chiste que pensando' rows='3'/>
<input type='submit' value=' PUBLICAR '/>
</form>

ahora si nos vamos si o si a configuración / plantillas / editar html. buscamos </head> arriba de el pegamos lo siguiente

*{

color: #798e94

}
.contacto label{
display: block;
font-weight: bold;
font-size: 24px;
}
.contacto input[type='text'], .contacto textarea{
border: 1px solid #CED5D7;
resize: none;
box-shadow:0 0 0 3px #EEF5F7;

}
.contacto input[type='text']:focus, .contacto textarea:focus{
outline: none;
box-shadow:0 0 0 3px #dde9ec;
}
.contacto input[type='submit']{
border: 1px solid #CED5D7;
box-shadow:0 0 0 0px #EEF5F7;
font-weight: bold;
text-shadow: 1px 1px 0px white;
padding: 30px 0px 0px 0px;
background: #e4f1f6;
background: -moz-linear-gradient(top, #e4f1f6 0%, #cfe6ef 100%);
background: -webkit-linear-gradient(top, #e4f1f6 0%,#cfe6ef 100%);
width: 100px;
}
.contacto input[type='submit']:hover{
background: #edfcff;
background: -moz-linear-gradient(top, #edfcff 0%, #cfe6ef 100%);
background: -webkit-linear-gradient(top, #edfcff 0%,#cfe6ef 100%);
}
.contacto input[type='submit']:active{
background: #cfe6ef;
background: -moz-linear-gradient(top, #cfe6ef 0%, #edfcff 100%);
background: -webkit-linear-gradient(top, #cfe6ef 0%,#edfcff 100%);
}

fin eso es todo pueden verlo en acción aquí http://frasesfeis.blogspot.com/ ah no se olviden de dejar una frase :D y publicarlo en su facebook una manera de agradecer :D que se cuiden hasta otro post. Disculpen que no aya estado tan detallado como para un aprendiz.

POSDATA : SI NO LES PUBLICA AL TOQUE TIENEN QUE ESPERAR NO SE ATORMENTEN MUCHO LOS AVISO POR EXPERIENCIA PUEDE QUE SEA POR QUE BLOGGER ESTA CONFIGURANDO O CREANDO EL NUEVO CORREO QUE CREAMOS PARA PODER PUBLICAR

agregar contador de visitas en cada entrada o articulo blogger

2011-08-22T03:24:00.000-07:00

Acá les traigo un buen contador de visitas para nuestro articulo o entrada de nuestro blogger.

Primer paso: marcamos la casilla Expandir plantillas de artilugios y buscamos </head> encima pegamos:

Segundo paso: buscamos <div class='post-footer-line post-footer-line-3'> y de bajo pegamos el siguiente código:

Cave resaltar que las estadísticas solo aparesera en las entradas mas no en la pagina principal, aca les dejo mi otra pagina donde el contador esta en funcionamiento http://videolocazo.blogspot.com/

Agregar meta para facebook a nuestro blog sin error linter

2011-06-23T13:59:00.000-07:00

Actualizado 18 de agosto del 2011

Esto es primordial a la hora de que los robots de facebook (linter) recogen datos de nuestro blog, como muchos tienen problemas para esto a la hora de comprobar sus url en este post les enseñare como se coloca de manera fácil todos los metas! Aquí pueden comprobar en que estado están los metas de tu blog http://developers.facebook.com/tools/lint/ Nos vamos a blogger > Diseño > Edición HTML : Bueno comenzásemos buscando <html ....>(por lo general esta por la tercera o cuarta linea del código en blogger) y y lo reemplazamos por este código <html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:fb='http://www.facebook.com/2008/fbml' xmlns:og='http://ogp.me/ns#'> Ahora de nuevo Ctrl+F y buscamos </head>arriba de el pegamos lo siguiente (lo que esta de verde se cambia)

<b:if cond='data:blog.pageType == "item"'>

</b:if>

<b:if cond='data:blog.pageType == "archive"'>

</b:if>

<b:if cond='data:blog.pageType == "index"'>

</b:if>

y lo guardas.

Para la meta de descripción es un poco mas amplio pero también es importante y mucho a a la hora que publiques tu url como enlace en facebook acá te dejo la url de mi otro post donde te explico paso a paso

http://blogyface.blogspot.com/2011/06/como-poner-descripcion-de-enlaces.html * Si a la hora de comprobar con el linter te sale error de id de aplicación es por que te falta configurar tu aplicación facebook en sitio web.

Como en la imagen

Comentar es agradecer

Como cambiar el icono blogger

2011-06-20T14:29:00.000-07:00

Primero

Nos dirigimos a panel de control > Diseño > Edición HTML

Segundo

Buscamos </head> y arriba de el pegamos el siguiente codigo:

*pixeles de la imagen 16*16

Para convertir imágenes normales en iconos(ico) pueden hacerlo en la siguiente pagina http://favicon.htmlkit.com/favicon/

Cuentas Premuim megaupload, megavideo, fileserve, rapidshare. 27 junio 2011

2011-06-19T16:05:00.000-07:00

Hoy llego con una importante noticia,no solo para mi si no para muchos que buscan siempre descargar como premium, creanme no se arrepentiran de haber seguido estos pasos.

Primero
Nos inscribimos en http://www.debridns.com para crear nuestra cuenta, como toda cuenta una vez inscrito nos vamos al correo y activamos nuestra cuenta.

Segundo
Configuramos el DNS de nuestra PC.

1.Ir a Panel de control (Inicio / Panel de control)
2.Ir a la red y de Internet
3.Ir al Centro de redes y recursos compartidos
4.Haga clic en Cambiar configuración del adaptador (a la izquierda)
5. Haga clic derecho sobre la conexión activa y vaya a Propiedades
6.Haga doble clic en Protocolo de Internet versión 4 (TCP/IPv4)
7.Compruebe Usar las siguientes direcciones de servidor DNS e introduzca el DNS siguientes:

Preffered servidor DNS: 85.17.255.198
Servidor DNS alternativo: 46.19.33.120

8.Puede hacer clic en Aceptar y cierre todas las
9.Sólo tienes que reiniciar el navegador

Aqui con Imágenes :

Una vez terminado tienes que mantener abierta la la pagina en la que nos inscribimos.

No malogra la coneccion a Internet. Probado con internet win7, chrome.

Aca les mando un pantallazo de como queda en megaupload

Como poner descripción de enlaces blogger en facebook

2011-06-11T16:43:00.000-07:00

Bueno regreso con un nueva entrada acerca de como unir el facebook y el blogger, muchos tenemos el inconveniente que cuando publicamos los link de nuestro blog en el facebook en la descripción siempre nos sale lo mismo para todas las entradas, en muchas paginas que vi comentaban q les salia error por eso me atreví a crear esta entrada por que yo tengo en funcionamiento este método y me va muy bien espero poder ayudarlos aquí les muestro un ejemplo de como aparecían antes los enlaces de mi blog en facebook.
imagen(clic para agrandar)
Lo que tenemos que hacer para que nos muestre un Titulo y una parte de nuestro contenido en los enlaces de facebook se muestren automáticamente, tienen que seguir los siguientes pasos (no duden todo lo que publico esta comprobado por mi).
Importante: hagan su copia de seguridad antes de comenzar tal vez se equivocan en uno de los pasos.

Primero.
Entramos a blogger > diseño > edición html > activamos la casilla expandir plantillas de artilugios.

Presionamos ctrl+F y buscamos <head> debajo de el insertamos el siguiente código.

<b:include data='blog' name='all-head-content'/>
<b:if cond='data:blog.pageName == ""'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/> | <data:blog.title/></title>
</b:if>

Segundo

Presionamos control+f y buscamos <data:post.body/> y arriba de el pegamos

<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.snippet'>
<meta expr:content='data:post.snippet' name='description'/>
</b:if>
</b:if>

y guardamos.

Tercero

Volvemos a Buscar <data:post.body/> y le agregamos <p></p> de manera que quede así:

<p> <data:post.body/> </p>

y lo guardamos.
Aquí les dejo una imagen de como queda

Para ver los cambios publiquen un enlace que no publicaste recientemente.

Crear pestaña iframe en facebook con app

2011-06-10T21:35:00.000-07:00

Facebook va dejar el código fbml por html atreves de los iframe mejor dicho, las pestañas iframe van a ser una forma más fácil de insertar código html en nuestras páginas Facebook.

Comencemos creando una aplicación facebook

Primero:

Creamos un index.html en un hosting que a ti te convenga (Yo uso miarroba http://hosting.miarroba.com/) y si van a usar un hosting gratuito de preferencia que sea sin publicidad.

En el nombre de tu página te recomiendo no poner nombres ofensivos o racistas ya que Facebook lo reconoce y no t dejara publicar.

Segundo:

El código que tendrá tu index.html será este, después lo modificas pero sin cambiar el width.(plantilla pestaña)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<style>

.container {

width:495px;

height:600px;

display:block;

background:red no-repeat left top;

font-family:Arial, Helvetica, sans-serif;

font-size:12px;

color:#000000;

}

.mensaje {

text-align:center;

font-size:30px;

font-weight:bold;

padding-top:10px;

}

#mensaje1 {

text-align:center;

font-size:15px;

font-weight:bold;

padding-top:0px;

}

.url {

color:#B36B00;

font-size:25px;

text-align:center;

padding-top:20px;

}

</style>

</head>

<body>

<div class="mensaje">BIENVENIDOS</div>

<div class="mensaje">DALE UN ME GUSTA Y VISITA NUESTRO BLOG</div>

<div class="url"><a href="http://elpuenteaxel.blogspot.com/" target="_blank">http://elpuenteaxel.blogspot.com/</a></div>

<div class="url">facebook.com/Elpuenteaxel</div>

</div>

</body>

</html>

Pueden ver un ejemplo de cómo queda AQUI

Tercero:

Como tercer paso crearemos un aplicación facebook, para eso nos dirigimos a la página de desarrolladores https://www.facebook.com/developers/ y hacemos clic en crear aplicación.

Llena los datos y acepta las condiciones de facebook.

Tal como se muestra en la siguiente imagen (clic para agrandar)

Luego copias la captcha y aceptas.

Cuarto:

Ahora configuraremos la aplicación: En acerca de:

Tal como se muestra en la siguiente imagen (clic para agrandar)

En Sitio Web:

En site URL solo pones la url de la página que creamos para hospedar nuestra pestaña de la página de Facebook

(Ejemplo: http://teloenvio.webcindario.com/)

Tal como se muestra en la siguiente imagen (clic para agrandar)

Integración con Facebook:

En canvas URL: ponemos nuevamente la url sin el index.html (Ejemplo: http://teloenvio.webcindario.com/ )

Tamaño Iframe: Autoajustar

En url de pestaña: Solo ponemos en nombre con que guardamos que en este ejemplo es index.html (Ejemplo: index.html)

Facebook lo va reconocer automáticamente una vez guardado.

Tal como se muestra en la siguiente imagen (clic para agrandar)

Ahora Guardamos y terminamos con la aplicación.

Quinto :

Ahora nos dirigimos a Regresar a mis Apps.

Seleccionamos nuestra aplicación y hacemos clic en pagina de perfil de la aplicación.

Tal como se muestra en la siguiente imagen (clic para agrandar)

Una vez en el perfil nos vamos a agregar a mi página.

Tal como se muestra en la siguiente imagen (clic para agrandar)

Y terminamos el resultado es esto.

Tal como se muestra en la siguiente imagen (clic para agrandar)

Esta es una de mis otras paginas

Para Solucionar el problema del scrollbars en la pestaña de iframe de facebook facebook.

Buscamos del código que les di anteriormente <body> y lo reemplazamos por :

<apex:page>

window.fbAsyncInit = function() {

FB.Canvas.setAutoResize();

};

(function() {

var e = document.createElement('script'); e.async = true;

e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';

document.getElementById('fb-root').appendChild(e);

}());

</script>

Ahora buscamos </body> y de bajo de esto pegamos :

</apex:page>

Y el problema quedo solucionado.

Crear una pagina en Facebook

2011-06-10T16:02:00.000-07:00

Primero:

Ingresamos a http://www.facebook.com/pages/create.php una vez dentro escogemos el tipo de página que deseas crear puede ser Lugar o negocio local, Empresa, organización o institución, Marca o producto, Artista, grupo de música o personaje público, etc. Y llenamos los datos que nos pide.

Tal como se muestra en la siguiente imagen (clic para agrandar)

Segundo:

Ya creada nuestra página nos vamos a editar y agregamos más información sobre nuestra página.

Tal como se muestra en la siguiente imagen (clic para agrandar)

http://www.facebook.com/pages/blogyface/151814111557384

Para URL corta debes tener primero mas de 25 seguidores y quede asi.

http://www.facebook.com/nombre_de_tu_empresa_o_blog

¿Por qué es bueno crear una página facebook a nuestro negocio o web?

1 - Facilidad de vinculación: Desde tu página de fans enlazas directamente tu website.

2 – Los Fans se aprueban solos: La gente puede a ser seguidora de tu página en Facebook sin tener que ser aprobada primero.

3 – Ilimitada cantidad de fans: Puedes tener una cantidad ilimitada de aficionados.

4 - Comunidad: Debido a que los fans pueden hacer comentarios sobre tus posts, se crea un sentido de comunidad en donde pueden compartir sus pensamientos y opiniones.

5 – Lista de correo instantánea: Puedes instantáneamente enviar una actualización a todos los fans.

6 – Divulgación diaria: La gente se conecta y revisa Facebook todos los días.

7 - Relevancia y Control: Te permite mantener las comunicaciones de negocios en tu página de fans y las actualizaciones personales en tu página personal.

8 - Mayor exposición: Las páginas de fans son públicas.

9 – Marketing Viral: Aun si tus fans no toman la iniciativa de recomendar tu página entre su red de amigos y conocidos, en los perfiles personales de todos tus fans se va a ver tu página.

10 – Toma precauciones para que no te cierren la cuenta: Los Términos y Condiciones de uso de Facebook explican que cualquier uso comercial de una cuenta personal es motivo para su desactivación.

Poner Boton me gusta de facebook en blogger

2011-06-10T14:11:00.000-07:00

Les voy a enseñar de manera rápida y eficaz como se inserta el botón de facebook en todos sus entradas. Empecemos

Primero
Nos vamos al blogger > luego clic en diseño > edición HTML > y activamos la casilla EXPANDIR ARTILUGIOS
Como se muestra en la siguiente imagen(clic para agrandar)

Segundo

presionamos Ctrl + F para que se habilite el buscador (el cual va a aparecer en la parte de arriba del navegador) ahí pegamos <div class='post-footer-line post-footer-line-1'> ó <p class='post-footer-line post-footer-line-1'> (varía por el tipo de plantilla)
tal como se muestra en la siguiente imagen (clic para agrandar)

Tercero
Debajo del resultado de la búsqueda que les salga pegan el siguiente código:

<div id="fb-root"></div><script src="http://connect.facebook.net/es_ES/all.js#xfbml=1"></script><fb:like expr:href="data:post.url" send="false" layout="box_count" width="450" show_faces="false" font=""></fb:like>

Y guardamos. Si desean modificar el código de tipo de me gusta :

layout - hay tres opciones.

standard - muestra el texto social a la derecha del botón y "el perfil amigos fotos a continuación. La anchura mínima: 225 píxeles. ancho por defecto: 450 píxeles. Altura: 35 píxeles (sin fotos) o de 80 píxeles (con fotos).
button_count - muestra el número total de le gusta a la derecha del botón. Ancho mínimo: 90 píxeles.ancho por defecto: 90 píxeles. Altura: 20 píxeles.
box_count - muestra el número total de los gustos sobre el botón. Ancho mínimo: 55 píxeles. ancho por defecto: 55 píxeles. Altura: 65 píxeles.

show_faces - muestra la foto de tus amigos a los que les gusto, solo se utiliza en standard . True (si mostrar) False(no mostrar).

send - además boton enviar True (si mostrar) False(no mostrar).

VEA UN EJEMPLO AQUI