S
SnakeNet
Xi
Programador
Hace un par de meses atrás un usuario buscaba la forma de crear justo este modelo para incorporarlo en su página web y actualmente otro usuario lo busca. Hoy se les facilitara los pasos a seguir para conseguirlo por eso me decante a hacer el tutorial y que siempre este a mano.
Lo primero que deben hacer es buscar donde meter el código podrás colocarlo donde quieras siempre y cuando sea después de <body> .
Insertar CODE, HTML o PHP:
<script src="https://apis.google.com/js/platform.js" async defer>
{lang: 'es'}
</script>
<div class="compartir" id="sharefb">
<div style="padding: 30px 50px 0 70px;">
<iframe style="width: 66px; height: 62px;" src="//www.facebook.com/plugins/share_button.php?href=https%3A%2F%2Ffacebook.com%2Fsnakenet.tv&layout=box_count" scrolling="no" frameborder="0" style="border:none; overflow:hidden;" allowTransparency="true"></iframe>
<g:plusone size="tall"></g:plusone>
<iframe style="width: 66px; height: 62px;" data-twttr-rendered="true" title="Twitter Tweet Button" class="twitter-share-button twitter-tweet-button twitter-share-button twitter-count-vertical" src="http://platform.twitter.com/widgets/tweet_button.d58098f8a7f0ff5a206e7f15442a6b30.es.html#_=1416285908924&count=vertical&id=twitter-widget-0&lang=es&original_referer=http%3A%2F%2Fwww.snakenet.tv%2F&size=m&text=Únete%20ha%20la%20network%20de%20Snakenet&url=http%3A%2F%2Fsnakenet.tv%2F" allowtransparency="true" scrolling="no" id="twitter-widget-0" frameborder="0"></iframe>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js "></script>
</div>
<div style="position: absolute;top: -14px;left: 108px;"><center><a href="javascript:void(0);" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','https://lh4.googleusercontent.com/-YSrkOzz2WDk/Tqrb7R_sA3I/AAAAAAAAGh4/XtXRhydWuqI/s65/gnula.png',1)"><img alt="" id="Image1" name="Image1" onmouseup="document.getElementById('sharefb').style.display='none'" src="https://lh5.googleusercontent.com/-xUsQnpdq_UQ/Tgupyhk_h3I/AAAAAAAAAmg/BlXTGIDI2pc/gnula.tv.png" border="0" height="13" width="65"> </a></center></div>
</div>
HTML:
facebook.com%2Fsnakenet.tvCambian snakenet.tv por vuestra página.
Después buscan:
HTML:
referer=http%3A%2F%2Fwww.snakenet.tv%2F&size=m&text=Únete%20ha%20la%20network%20de%20Snakenet&url=http%3A%2F%2Fsnakenet.tv%2F"Cambian referer: la ruta del enlace, después observan text= y deberán cambiarlo por el texto que quieran mostrar. %20 significa un espacio. Y después cambian la url de referencia.
Y ahora deberán aplicar el css:
Insertar CODE, HTML o PHP:
.compartir{
background:url("http://3.bp.blogspot.com/-d__cHejujRg/Ua3tyNKOwSI/AAAAAAAABF8/sO85nkyf_sQ/s1600/likebg.png") no-repeat;
bottom:1px;
float:right;
right:3px;
position:fixed;
height:115px;
width:330px;
margin-bottom:20px;DEMO: http://jsfiddle.net/8jx7aydt/embedded/result/
