Tutorial: Ofreciendo contenido premium a cambio de me gusta en Facebook

  • Autor Autor bacanzito
  • Fecha de inicio Fecha de inicio
bacanzito

bacanzito

Eta
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Clic en me gusta de Facebook para descargar o ver contenido premium Wordpress!

Es común hoy día ofrecer contenido premium gratis (freemiun) o descargas a cambio de un me gusta. Enlace eliminado

Navegando la Web me encuentro con este completo script creado por “easyjquery”, que esta desarrollado en jQuery y el cual nos permite, ofrecer contenido en descarga o premium a cambio de “me gusta” en Facebook, un Tweet o un G+ de Google.


Su implementación es sencilla solo debes seguir estos pasos

1. Creas un archivo html y entre las etiquetas <head> … </head> pegas lo siguiente:

PHP:
<script language="Javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script language="Javascript" type="text/javascript" src="http://api.easyjquery.com/easyjquery.js"></script>
<!-- facebook like by easyjquery.com --->
<script language="Javascript" src="http://api.easyjquery.com/easyjquery.facebook.js"></script>
<link rel="stylesheet" type="text/css" href="http://api.easyjquery.com/facebook_like.css">
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script src="http://platform.twitter.com/widgets.js"></script>
<!-- end facebook like --->

En la primera línea del código hemos incluido la libraría jQuery, en la segunda línea el plugin “easyjquery.js” desarrollado por easyjquery, en las siguientes se incluyen los archivos necesarios para crear el botón ”me gusta” y dar estilo a la ventana emerjente, así como archivos para acceder a determinadas funcionalidades de facebook y twitter.

Después del salto los demás sencillos pasos, y el enlace para descargar el código de ejemplo.


2. A continuación pegamos el siguiente código, también entre las etiquetas <head> … </head>:

PHP:
<script language="Javascript">
    var fb_start_countdown = 120;
    var fb_lock_by_url = false;
    var fb_disable_one_time_by_countdown = false;
    var fb_login_app_id = '146085172138700';
    var my_facebook_page_id = '226219960818494';
    var my_facebook_page = "https://www.facebook.com/loquenecesita"; // use for like
    // http://graph.facebook.com/your_page_name to see the ID
</script>

En este fragmento de script configuramos la aplicación:

fb_start_countdown: Segundos que queremos que transcurran antes que la ventana emergente se cierre sola.
fb_login_app_id: ID de la aplicación creada en facebook. Para crear la aplicación debes ir a https://developers.facebook.com/apps y creas una aplicación nueva, allí asegúrate de incluir el dominio donde estará nuestro archivo HTML, con esto facebook autorizará los permisos.
Con “http://graph.facebook.com/el_nombre_de_tu_aplicacion” puedes obtener el ID de tu nueva aplicación.
my_facebook_page_id: Es el ID de la pagina a la que quieres que le hagan me gusta, lo obtienes en editar tus páginas de facebook.
my_facebook_page: La URL del la página que quieres que le den me gusta.

3. Pegas el siguiente código entre las etiquetas <body> … </body> de tu documento HTML:

PHP:
<div id="fb-root"></div>
<!-- start easy facebook login -->
<div id="easy_fbbg" style="opacity: 0.25; display: none;"></div>
<div id="easy_fblkpop" style="top: 130px; left:50%; display: none;">
    <!-- callback class, do not remove -->
    <noscript><a href="http://www.easyjquery.com" title="API Callback Facebook Like">EasyjQuery API Facebook and GEO API</a></noscript>
    <!-- end callback -->
    <div id="fb_fb_head"><div id="fb_my_close"></div>
        <h1>Premium Contents</h1>
    </div>
    <div id="easy_popupMessage">
        This is Premium Page. You need like, +1 to view content.
        <div style="text-align:center;">
            <a href="#" onclick="easyjquery_fb_login();" ><img src="http://i1229.photobucket.com/albums/ee470/khoaofgod/subscribe.gif" border=0 align=""></a>
            <div id="main_easyjquery_content">
                <table width=100% class="my_easy_fb_table">
                    <tr><td align=right >
                        <fb:like send="false" layout="button_count" width="60" show_faces="false"></fb:like>
                    </td>
                    <td align=center >
                        <a href="https://twitter.com/share" class="twitter-share-button" >Tweet</a>
                            <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
                    </td>
                    <td

Con esto hemos incluido la ventana emergente que impide el acceso directo al contenido premium o de descarga, así como su aspecto. Acá podemos personalizar el contenido a nuestra manera, así como también podremos remover divs que no necesitemos.

4. Por último pegamos el siguiente código antes de la etiqueta de cierre … </body>, con este cargamos la configuración en el sitio que queremos bloquear.

PHP:
<script language="Javascript">
    FB.init({
      appId  : fb_login_app_id,
      status : true,
      cookie : true,
      xfbml  : true
    });

    $(document).ready(function() {
        // If you only want to use cookie to check like page, use this function: easyjquery_check_locking();
        easyjquery_fb_checklike(my_facebook_page_id); // remove this if u use easyjquery_check_locking();
        // facebook call back
        easyjquery_facebook_like_callback();
        // tweeter call back, remove if no use
        easyjquery_tweeter_callback();
    });
</script>

Con esto ya podemos entregar contenido premium o descargas a cambio de un me gusta, un tweet o un G+.

Si estas en el área del marketing sin duda te será de mucha ayuda, ya que gracias a la viralidad puedes dar a conocer tus sitios a cero costo monetario, el script es gratuito y lo puedes compartir libremente.

Puedes descargar el código de ejemplo y modificarlo a tu gustos

demo : Enlace eliminado

fuente: Enlace eliminado
 
Tema aprobado, gran aporte [MENTION=34791]bacanzito[/MENTION] ya fue agregado al listado de tutoriales.
 
Gracias, estaba buscando esto:encouragement:
 
no lo pude implementar. pero gracias igual 😀
 
quizasme me sirva para futuro , gracias :encouragement:
 
Agregados a favoritos, vamos a ver si mañana lo pongo a funcionar! :encouragement:
 
gracias lo estaba buscando estos dias :encouragement:
 
Gracias, un aporte realmente útil.
 
Justo lo q buscaba, me lo llevo :encouragement:
 
gracias por este tutorial 🙂 intentare implementarlo en mi web :encouragement:
 
Gracias un aporte bastante útil...
 
Se ve muy bueno, voy a guardar este post y despue lo pruebo, gracias a este script y a la tematica de mi web, creo que voy a tener muy buenos reultados.Gracias por el tutorial y el aporte!!
 
Bueno no lo probe en unos dias con tiempo lo probare. Exelente aporte amigo gracias😛8:
 
Gracias por este tutorial compañero, se agradece!:encouragement:
 
Gracia men esto me selvira de mucho para umentar mis Fans en Facebook!
 
Recien lo encuentro y me cae preciso, gracias por la explicacion.
 
Alguien podría ayudarme por que no logro hacerlo funcionar o lo estoy haciendo mal. Todo ese codigo va dentro de un solo .html? o alguien lo tiene armado para comprenderlo mejor?, saludos.
 
Lo probare muchas gracias
 
Gracias por el tutorial.
 
Muy bueno compañero 😱nthego:
 
Atrás
Arriba