Plugin de caixa flutuante para web

  • Autor Autor sebap04
  • Data de início Data de início
Tradução em andamento: em alguns minutos este tópico estará em português. Por enquanto, o conteúdo está no original em espanhol. Ver original
S

sebap04

Hola. Estoy tratando de averiguar sobre algún plugin que haga algo como esto:

Enlace eliminado

Es una caja flotante que aparece en toda la web.

Alguien sabe como se llama el plugin o conoce alguno similar?

Saludos
 
Foi útil? Participe da conversa

Com sua conta grátis você pode responder, mandar mensagem privada ao autor e comprar com Saldo retido: o pagamento é liberado quando você recebe o combinado.

Leva 30 segundos · você volta a este tópico ao terminar
No conozco plugin alguno, me parece más bien algo programado (es sencillo).
 
mmm no en realidad nunca he probado en el home, pero si buscas documentacion sobre el plugin de seguro encontraras la respuesta!
 
Este es el codigo que permite crear lo que hay en la pagina, solo quedaria ver como cambiar por los datos sociales de tu web

<div style="background-color: #fff;border: 5px solid rgba(180, 180, 180, .7); -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; display: scroll;position:fixed;bottom:0px;right:0px; padding: 10px;margin: 0 auto; text-align:center;"> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> <g😛lusone size="tall" href="http://imageral.com"></g😛lusone><div style="height: 7px;">&nbsp;</div> </ br><a href="http://twitter.com/share" class="twitter-share-button" data-url="http://imageral.com" data-count="vertical" data-lang="es">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> </br /><br/><iframe src="http://www.facebook.com/plugins/like.php?app_id=186708408052490&amp;href=http://imageral.com/&amp;send=false&amp;layout=box_count&amp;width=80&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=60" scrolling="no" frameborder="0" style="border:none; margin-top: 10px; overflow:hidden; width:80px; height:60px;" allowTransparency="true"></iframe></div>

Espero sirva para que vos puedas hacerlo en tu web
 
Última edição:
Tutorial Social Web

Esta como que muy desordenado el código, haré un tutorial sencillo.

Primero, necesito que agregues estas lineas a tu css:
Inserir CODE, HTML ou PHP:
#boxSocialWeb{display:scroll;position:fixed;bottom:60px;right:20px;border: 3px solid #A4A4A4;background:#ffffff;width:90px;height:240px; -moz-border-radius:8px;-webkit-border-radius:8px;border-radius:8px;}
#boxSocialWeb .itemSocialWeb {float:left;margin:1px;width:73px;heigth:100px;padding:6px;}
#boxSocialWeb .itemSocialWebGoogle {float:left;margin:1px 15px;width:73px;heigth:100px;padding:6px;}
#boxSocialWeb .itemSocialWebTwitter {float:left;margin:1px 4px;width:73px;heigth:100px;padding:6px;}

Luego de eso, agrega en el Footer, antes del </body>, éste codigo:

HTML:
<div id="boxSocialWeb">
	<div class="itemSocialWeb">
	<iframe src="http://www.facebook.com/plugins/like.php?href=TU URL AQUI&amp;send=false&amp;layout=box_count&amp;width=95&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=tahoma&amp;height=75" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:95px; height:75px;"></iframe>
	</div>
	<div class="itemSocialWebGoogle">
	<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
	<g:plusone size="tall" href="TU URL AQUI"></g:plusone>
	</div>
	<div class="itemSocialWebTwitter">
	<a href="http://twitter.com/share" class="twitter-share-button" data-url="TU URL AQUI" data-via="TU USUARIO TWITTER AQUI" data-text="TEXTO DE REFERENCIA AQUI" data-count="vertical" data-lang="es">Tweet</a>
	<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
	</div>
</div>

No olvides editar las parte que te puse como : "TU URL AQUI, TU USUARIO TWITTER AQUI... etc"
 
Esta como que muy desordenado el código, haré un tutorial sencillo.

Primero, necesito que agregues estas lineas a tu css:
Inserir CODE, HTML ou PHP:
#boxSocialWeb{display:scroll;position:fixed;bottom:60px;right:20px;border: 3px solid #A4A4A4;background:#ffffff;width:90px;height:240px; -moz-border-radius:8px;-webkit-border-radius:8px;border-radius:8px;}
#boxSocialWeb .itemSocialWeb {float:left;margin:1px;width:73px;heigth:100px;padding:6px;}
#boxSocialWeb .itemSocialWebGoogle {float:left;margin:1px 15px;width:73px;heigth:100px;padding:6px;}
#boxSocialWeb .itemSocialWebTwitter {float:left;margin:1px 4px;width:73px;heigth:100px;padding:6px;}

Luego de eso, agrega en el Footer, antes del </body>, éste codigo:

HTML:
<div id="boxSocialWeb">
	<div class="itemSocialWeb">
	<iframe src="http://www.facebook.com/plugins/like.php?href=TU URL AQUI&send=false&layout=box_count&width=95&show_faces=false&action=like&colorscheme=light&font=tahoma&height=75" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:95px; height:75px;"></iframe>
	</div>
	<div class="itemSocialWebGoogle">
	<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
	<g:plusone size="tall" href="TU URL AQUI"></g:plusone>
	</div>
	<div class="itemSocialWebTwitter">
	<a rel="nofollow" href="http://twitter.com/share" class="twitter-share-button" data-url="TU URL AQUI" data-via="TU USUARIO TWITTER AQUI" data-text="TEXTO DE REFERENCIA AQUI" data-count="vertical" data-lang="es">Tweet</a>
	<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
	</div>
</div>

No olvides editar las parte que te puse como : "TU URL AQUI, TU USUARIO TWITTER AQUI... etc"

Muchas gracias por este tutorial.

Lo probe pero sale en el footer y no como algo flotante en la parte de la web, hay que hacer scroll para verlo porque sale en el footer, habre hecho algo mal.

Saludos
 
Gracias! AHora lo probaré y te envio MP por la misma duda que el anterior usuario. Si podés pone acá como solucionarlo así todos saben.

Saludos
 
Voltar
Topo