Tutorial: Social Content Locker simple y sencillo

  • Autor Autor remyhn
  • Fecha de inicio Fecha de inicio

remyhn

Beta
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Saludos.

Se que muchos diran ya en esta seccion hay 2 Social Content Locker muy bonitos y funcionales, para que otro mas?

Bueno, como dice el titulo este codigo de Social Content Locker es simple y sencillo, ustedes lo pueden personalizar a su gusto ya que no trae CSS y lo mejor de todo no trae molestos enlaces ocultos que se ponen cada vez que haces usos de ellos en tus post.

Sin mas cosas que explicar aquí les va el código.
Insertar CODE, HTML o PHP:
<div id="paybox">
	<div id="paytittle">
                    [COLOR="#FF8C00"] Haz un Tweet, Like o +1 para poder descargar[/COLOR]
	</div>
	<div id="fb-root">
	</div>
	<script type="text/javascript">
	 
			function habilitar() {		
				var url = "[COLOR="#0000FF"]miweb.com/descargas/archivo.mp3[/COLOR]";  
				url = "<a href='" + url + "'>[COLOR="#FF8C00"]Click here to download the file.[/COLOR]</a> ";
				document.getElementById("restricted").innerHTML = url;
			}
	 
			window.fbAsyncInit = function() {
				FB.init({ status : true, cookie : true, xfbml  : true });
				FB.Event.subscribe('edge.create', function(response) { habilitar(); });
			};
	 
			(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/en_US/all.js";
				fjs.parentNode.insertBefore(js, fjs);
			}(document, 'script', 'facebook-jssdk'));
	 
			window.twttr = (function (d,s,id) {
				var t, js, fjs = d.getElementsByTagName(s)[0];
				if (d.getElementById(id)) return; js=d.createElement(s); js.id=id;
				js.src="//platform.twitter.com/widgets.js"; 
				fjs.parentNode.insertBefore(js, fjs);
				return window.twttr || (t = { _e: [], ready: function(f){ t._e.push(f) } });
			}(document, "script", "twitter-wjs"));
	 
			twttr.ready(function (twttr) {
				twttr.events.bind('tweet', function(event) {
					habilitar();
			  });
			});
	 
			(function() {
				var po = document.createElement('script'); 
				po.type = 'text/javascript'; po.async = true;
				po.src = 'https://apis.google.com/js/plusone.js';
				var s = document.getElementsByTagName('script')[0]; 
				s.parentNode.insertBefore(po, s);
			})();
		</script>
	 
	<br />

	<div id="restricted">
		<a class="twitter-share-button" data-lang="en" data-text="[COLOR="#0000FF"]hola mundo, esto es una prueba.[/COLOR]" data-via="habilitar" href="[COLOR="#0000FF"]miweb.com[/COLOR]"></a>
		  
		<g:plusone callback="habilitar" href="[COLOR="#0000FF"]https://plus.google.com/b/000000000000/[/COLOR]" size="medium"></g:plusone>
		  
		<fb:like href="[COLOR="#0000FF"]https://www.facebook.com/mipaginaenfacebook[/COLOR]" layout="button_count" send="false" show_faces="false" width="220"></fb:like>
	 
	</div>
</div>

Modo de uso:
En colo azul esta lo que debes cambiar obligatoriamente con tus datos de tu pagina de facebook, en la parte de google+ puedes poner la url de tu perfil de google o la url de tu sitio web
El texto en color naranja es opcional si lo deseas cambiar.

Escribes la entrada normalmente y antes de finalizar te pasas a la sección de html y pegas el código anterior ya modificado al final del post.


Resultado:


Después solo haces uso de CSS para personalizarlo.

Espero que les sirva.

Si gustan probarlo o verlo, aqui esta el demo
 
Muchas gracias por compartir conocimiento bro :encouragement:
 
Gran aporte me funciono perfectamente :encouragement:
 
A favoritos, buen aporte. :encouragement:
 
Muchas gracias 😛7:
 
Se ve bien, va a favoritos 🙂

EDITO:
[MENTION=14812]remyhn[/MENTION] me surgió una duda al ver el código; Bueno, te comento. En el botón de facebook, la persona al darle like le está dando "like" a la página da facebook de la web o le da un "like" simplemente al mismo post, si es lo primero, ¿cómo funcionaría si la persona ya le tiene dada un "like" a la página desde antes? bueno eso es, no sé si entenderá muy bien :ambivalence: pero bueno, espero respuestas y muy bueno el tuto 🙂
 
Última edición:

El caso es el primero.
se le da like a la FBpage de tu web.
una vez q un usuario le da like tien acceso a tdos los enlaces encriptados que halla en tu web.
 
El caso es el primero.
se le da like a la FBpage de tu web.
una vez q un usuario le da like tien acceso a tdos los enlaces encriptados que halla en tu web.
[MENTION=14812]remyhn[/MENTION] Gracias ya me quedo claro. Antes de implementarlo lo probare. 🙂

Edito:

Se me olvido pregguntar si puedo agregar mas de un enlace. y si es asi como podria hacerlo.
 
Última edición:
De lujo la aportación. Muchas gracias.
 
[MENTION=14812]remyhn[/MENTION]
Gracias bro. Una duda, ¿No se podría agregar un compartir? eso me interesa más que un like 😀.
 
[MENTION=14812]remyhn[/MENTION] me uno a la petición... ¿Hay alguna manera de que en vez de darle LIKE a la Fanpage se tenga que COMPARTIR el post en Facebook?
 
[MENTION=14812]remyhn[/MENTION] me uno a la petición... ¿Hay alguna manera de que en vez de darle LIKE a la Fanpage se tenga que COMPARTIR el post en Facebook?

[MENTION=14812]remyhn[/MENTION] Me uno también 😛7:
 
Hola amigo, buen aporte, pero cuando ya le di like, y vuelvo a actualizar la publicacion, me sigue pidiendo que de like en algunas de las redes sociales, pero si ya le di a todos ya me uni a todo... GRACIAS.. me podrias ayudar en eso...

- - - Actualizado - - -

Hola amigo, buen aporte, pero cuando ya le di like, y vuelvo a actualizar la publicacion, me sigue pidiendo que de like en algunas de las redes sociales, pero si ya le di a todos ya me uni a todo... GRACIAS.. me podrias ayudar en eso...
 
Me uno a la duda, espero su respuesta, gracias.
 
Ya lo agregue a favoritos y lo voy a poner a funcionar en un blog que tendra mucho trafico social. Gracias :encouragement:
 
Por ahi tengo uno que trae para compartir solo que en algunos casos da errores. Pero ya que se me quemo la lap lo subire la otra semana

Enviado desde la pc de Obama!