Fredes Web: noviembre 2014

Fuente: http://www.9lessons.info/2009/07/load-data-while-scroll-with-jquery-php.html

This tutorial about my favorite place Dzone like data loading while page scrolling down with jQuery and PHP. We have lots of data but can not display all. This script helps you to display little data and make faster your website. Take a look at live demo and scroll down.

Load Data while Scrolling Page Down with jQuery and PHP

Download Script

Live Demo

Database Table

CREATE TABLE messages(
mes_id INT PRIMARY KEY AUTO_INCREMENT,
msg TEXT);

Browser Capability : Safari, Firefox, IE, Chrome

load_data.php
When we are scrolling down a webpage, the script($(window).scroll) finds that you are at the bottom and calls the last_msg_funtion(). Take a look at $.post("") eg: $.post("load_data.php?action=get&last_msg_id=35")

<?php
include('config.php');
$last_msg_id=$_GET['last_msg_id'];
$action=$_GET['action'];

if($action <> "get")
{
?>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
function last_msg_funtion()
{
var ID=$(".message_box:last").attr("id");
$('div#last_msg_loader').html('<img src="bigLoader.gif">');
$.post("load_data.php?action=get&last_msg_id="+ID,

function(data){
if (data != "") {
$(".message_box:last").after(data);
}
$('div#last_msg_loader').empty();
});
};

$(window).scroll(function(){
if ($(window).scrollTop() == $(document).height() - $(window).height()){
last_msg_funtion();
}
});
});
</script>

</head>

<body>

<?php
include('load_first.php'); //Include load_first.php
?>

<div id="last_msg_loader"></div>

</body>

</html>

<?php
}

else
{
include('load_second.php'); //include load_second.php
}
?>

load_first.php
Contains PHP code to load 20 rows form the message table.

<?php
$sql=mysql_query("SELECT * FROM messages ORDER BY mes_id DESC LIMIT 20");
while($row=mysql_fetch_array($sql))
{
$msgID= $row['mes_id'];
$msg= $row['msg'];
?>
<div id="<?php echo $msgID; ?>" class="message_box" >
<?php echo $msg; ?>

</div>

<?php
}
?>

load_second.php
Contains PHP code to load 5 rows less than last_msg_id form the message table.

<?php
$last_msg_id=$_GET['last_msg_id'];
$sql=mysql_query("SELECT * FROM messages WHERE mes_id < '$last_msg_id' ORDER BY mes_id DESC LIMIT 5");
$last_msg_id="";
while($row=mysql_fetch_array($sql))
{
$msgID= $row['mes_id'];
$msg= $row['msg'];
?>
<div id="<?php echo $msgID; ?>" class="message_box" >
<?php echo $msg;
?>

</div>

<?php
}
?>

CSS

body

{
font-family:'Georgia',Times New Roman, Times, serif;
font-size:18px;
}

.message_box

{
height:60px;
width:600px;
border:dashed 1px #48B1D9;
padding:5px ;
}

#last_msg_loader

{
text-align: right;
width: 920px;
margin: -125px auto 0 auto;
}

.number

{
float:right;
background-color:#48B1D9;
color:#000;
font-weight:bold;
}

Fuente: http://www.desarrolloweb.com/articulos/boton-compartir-facebook.html

Veremos varias maneras de crear un botón de compartir un enlace en Facebook o enviar un artículo a Facebook.

En este artículo vamos a mostrar varias maneras de crear el típico botón de compartir un enlace en tu cuenta Facebook, con el que los visitantes de tu página web pueden enviar tus contenidos a sus perfiles dentro de esta red social y así promocionar tus contenidos.
Existen varias maneras de conseguir esto y la más sencilla sería utilizar los scripts que Facebook ofrece para crear estos botones casi de manera instantánea. Sin embargo, algunos desarrolladores preferirán personalizar estos botones, por medio de imágenes o iconos propios y provocar comportamientos distintos al habitual al pulsar el botón para enviar a Facebook.
Básicamente, para enviar un contenido a Facebook tenemos que generar un enlace a una dirección del sitio de Facebook, enviando la URL que queremos compartir. Esa URL tendrá esta forma simplificada:
http://www.facebook.com/sharer.php?u=http://www.desarrolloweb.com/manuales
Si accedemos a esa URL con nuestro navegador veremos la página de Facebook para compartir ese enlace y publicarlo en el muro de nuestro usuario. Si tu navegador guarda la sesión de Facebook (es decir, si solicitaste a Facebook que recordase tu usuario cuando accedes a la red social) aparecerá directamente la página para compartir. En caso contrario verás una página para introducir tus datos de acceso (login) de tu usuario.
Facebook se encarga solito de recuperar el título del artículo o página a compartir, así como las imágenes asociadas, etc. Por lo que, en principio no hace falta indicar nada más para que esto funcione.
Una vez ya conocemos este comportamiento básico, veamos algunas maneras sencillas que podemos implementar en nuestro sitio web.

1.- Utilizar un botón/script de Facebook

Facebook tiene una cosa que le llaman el "Share Button", que crea este botón por su propia cuenta al insertar un enlace y un script en tu página web. Esta manera de actuar es interesante, pues estos botones son bastante "inteligentes" y proveen de un contador de personas que enviaron tu enlace a la red social, aparte de la propia funcionalidad de compartir. Además, el servicio se puede configurar para que muestre distintos tipos de botones, que podemos elegir en función del aspecto que tenga nuestra página. Es quizás la manera más adecuada de colocar el botón, pero tiene el inconveniente de no permitir personalizar la imagen o botón que se va a utilizar (o por lo menos en el momento de escribir este artículo no existe esta opción). Por ello, si queremos utilizar un botón con aspecto personalizado, tendremos que buscar otra solución.
Todas las instrucciones para conseguir implementar este botón en tu web están en la Wiki de desarrolladores de Facebook, en la página que trata sobre Facebook Share.
El código HTML para insertar un botón de los que provee Facebook tendrá esta forma:
<a name="fb_share"></a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
Además, podemos seleccionar el tipo de botón a utilizar entre varias posibilidades, con el atributo "type" en el enlace.
<a name="fb_share" type="box_count" share_url="YOUR_URL"></a>
<a name="fb_share" type="button_count" share_url="YOUR_URL"></a>
<a name="fb_share" type="button" share_url="YOUR_URL"></a>
<a name="fb_share" type="icon_link" share_url="YOUR_URL">Share</a>
<a name="fb_share" type="icon" share_url="YOUR_URL"></a>
El atributo del enlace "share_url" es opcional y sirve para indicar la URL que queremos que se comparta. Pero si no indicamos nada en ese atributo se enviará a Facebook la URL de la página donde se ha colocado el botón.
Además, si queremos que dentro del botón esté escrito un mensaje personalizado, podemos poner texto en el enlace, algo así como:
<a name="fb_share" type="button_count">Compartir en FB</a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>

2.- Enlace simple de enviar a Facebook

Otra variante que podemos implementar, si es que deseamos personalizar el botón de enviar a Facebook es crear un enlace normal, dirigido a la URL para compartir en Facebook. <a target="_blank" href="http://www.facebook.com/sharer.php?u=http://www.desarrolloweb.com/">Compartir FB</a>
En este caso se crearía un enlace y en el texto aparecería "Compartir FB", y claro, si queremos utilizar nuestro propio icono en vez de ese texto, dentro pondríamos la imagen que deseamos.
<a target="_blank" href="http://www.facebook.com/sharer.php?u=http://www.desarrolloweb.com/articulos/1.php"><img src="mi_imagen.gif" border=0 width=100 height=30 /></a>

3.- Enlace que se abra en un popop

Este código se podría alterar un poco para que este enlace se abra en una ventana secundaria o popup. Para ello tenemos que utilizar un poco de Javascript por nuestra cuenta. <a href="javascript: void(0);" onclick="window.open('http://www.facebook.com/sharer.php?u=http://www.guiarte.com/','ventanacompartir', 'toolbar=0, status=0, width=650, height=450');">Compartir con popup</a>

Consideraciones adicionales al crear el botón para compartir en Facebook

Comento un par de detalles que son importantes y que podremos experimentar a la hora de hacer estos enlaces para compartir contenidos en Facebook. Indicar también el título del recurso:
Una cosa que he visto hacer en varios sitios es el envío de una cadena como titular de lo que se va a compartir. En el enlace para enviar un contenido a Facebook podemos indicar, además de la URL a compartir, el título que queremos se asigne a esta entrada dentro del muro de nuestro usuario. Esto lo señalamos enviando un parámetro adicional al crear la URL para enviar un enlace.
http://www.facebook.com/sharer.php?u=http://www.desarrolloweb.com/&t=sitio%20interesante%20para%20desarrolladores
Ahora bien, según parece, Facebook recibe el título, pero luego al interpretar la página enviada lo cambia por el título real que tenga, con lo que parece que este contenido no sirve de mucho. Quizás sirva para algo en el caso que la página no tenga título o Facebook no lo pueda interpretar.
Convertir los datos a formato URL:
La otra cosa que quería comentar es la posibilidad de enviar los datos en la URL codificados en formato de URL. Este detalle en principio no es necesario en la mayoría de los casos, puesto que los navegadores ya hacen ese trabajo de manera transparente para los usuarios, pero sí sería recomendable.
Por ejemplo, este enlace tiene la URL a compartir codificada en el formato que, en principio, sería el adecuado:
http://www.facebook.com/sharer.php?u=http%3A%2F%2Fwww.desarrolloweb.com%2Fmanuales
Ya digo que, si esto nos suena a chino, podemos olvidarnos de ello y en la gran mayoría de los casos, (al menos en todos los navegadores actuales) no habrá problemas.
Si queremos convertir una cadena a formato URL podemos utilizar un lenguaje de programación como PHP, con la función urlencode():
<a target="_blank" href="http://www.facebook.com/sharer.php?u=<?php echo urlencode('http://www.desarrolloweb.com/manuales')?>">Compartir esto</a>
O incluso Javascript:
<script>
document.write('<a target="_blank" href="http://www.facebook.com/sharer.php?u=' + encodeURIComponent('http://www.desarrolloweb.com/php') + '">Compartir en Facebook</a>');
</script>

Referencia: El botón me gusta de Facebook es otra buena solución para añadir a tu artículo un toque social basado en las herramientas de Facebook. Si has encontrado algún problema con ese botón consulta el artículo Problema y solución sobre el Me Gusta de Facebook.

Si además estas interesado en crearte un botón similar para Twitter te recomiendo que te leas el artículo "Botón de compartir en Twitter".

Fredes Web

miércoles, 26 de noviembre de 2014

Ux2012 - Patrones de Interfaz

Ux2012 - Patrones de Interfaz

jueves, 13 de noviembre de 2014

Load Data while Scrolling Page Down with jQuery and PHP

miércoles, 12 de noviembre de 2014

Botón de compartir en Facebook

1.- Utilizar un botón/script de Facebook

2.- Enlace simple de enviar a Facebook

3.- Enlace que se abra en un popop

Consideraciones adicionales al crear el botón para compartir en Facebook

martes, 11 de noviembre de 2014

Free Ecomerce Templates

Free Ecomerce Templates