Agregar botones de redes sociales a mi web

  • Autor Autor Darwin Fernandez
  • Fecha de inicio Fecha de inicio
D

Darwin Fernandez

Hola amigos de ForoBeta pues navegando por una web es esta :

Películas Sub Español, Latino, Español, Subtitulada.

Encontre estos botones :

2ufu7g1.png


No se si alguien tendrá el plugin o Script para poder agregarlo si alguien me echa una mano please
 
Copiar es fácil, escribir HTML y CSS también, pero copiar no está padre.

HTML: 
<style>
.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;
}
</style>

<div class="compartir" id="sharefb">
<div style="padding: 30px 50px 0 70px;">
<iframe scrolling="no" style="border:none; overflow:hidden; width:72px; height:63px" src="http://www.facebook.com/plugins/like.php?href=http://facebook.com/SeriesBang&amp;layout=box_count&amp;show_faces=false&amp;width=72&amp;height=63&amp;action=like&amp;font=tahoma&amp;colorscheme=light" allowtransparency="true" frameborder="0"></iframe>
 
<div id="___plusone_1" style="text-indent: 0px; margin: 0px; padding: 0px; background: none repeat scroll 0% 0% transparent; border-style: none; float: none; line-height: normal; font-size: 1px; vertical-align: baseline; display: inline-block; width: 50px; height: 60px;"><iframe title="+1" data-gapiattached="true" src="https://apis.google.com/u/0/se/0/_/+1/fastbutton?usegapi=1&amp;size=tall&amp;origin=http%3A%2F%2Fwww.ver-flv.com&amp;url=http%3A%2F%2Fwww.seriesbang.net%2F&amp;gsrc=3p&amp;jsh=m%3B%2F_%2Fscs%2Fapps-static%2F_%2Fjs%2Fk%3Doz.gapi.es.cd0_TnYqGrU.O%2Fm%3D__features__%2Fam%3DAQ%2Frt%3Dj%2Fd%3D1%2Ft%3Dzcms%2Frs%3DAGLTcCM4WC95v5zjhYq2rJ-7YEc6S-mdHw#_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe%2C_renderstart%2Concircled%2Cdrefresh%2Cerefresh&amp;id=I1_1416285908966&amp;parent=http%3A%2F%2Fwww.ver-flv.com&amp;pfname=&amp;rpctoken=37833887" name="I1_1416285908966" id="I1_1416285908966" vspace="0" tabindex="0" style="position: static; top: 0px; width: 50px; margin: 0px; border-style: none; left: 0px; visibility: visible; height: 60px;" scrolling="no" marginwidth="0" marginheight="0" hspace="0" frameborder="0" width="100%"></iframe></div>
<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&amp;count=vertical&amp;id=twitter-widget-0&amp;lang=es&amp;original_referer=http%3A%2F%2Fwww.ver-flv.com%2F&amp;size=m&amp;text=La%20Mejor%20Web%20de%20Series&amp;url=http%3A%2F%2Fseriesbang.net%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>
 
Es fácil, esta en las api de Google, Facebook y Twitter esos botones, luego tu les das el estilo qué quieras! puedes ponerle un al div un position:fixed, bottom:0; float: right, y un z-index: 99 con eso lograras ese mismo efecto.

Saludos!
 
WeRunTheNite dijo:
Copiar es fácil, escribir HTML y CSS también, pero copiar no está padre.

HTML: 
<style>
.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;
}
</style>

<div class="compartir" id="sharefb">
<div style="padding: 30px 50px 0 70px;">
<iframe scrolling="no" style="border:none; overflow:hidden; width:72px; height:63px" src="http://www.facebook.com/plugins/like.php?href=http://facebook.com/SeriesBang&layout=box_count&show_faces=false&width=72&height=63&action=like&font=tahoma&colorscheme=light" allowtransparency="true" frameborder="0"></iframe>
 
<div id="___plusone_1" style="text-indent: 0px; margin: 0px; padding: 0px; background: none repeat scroll 0% 0% transparent; border-style: none; float: none; line-height: normal; font-size: 1px; vertical-align: baseline; display: inline-block; width: 50px; height: 60px;"><iframe title="+1" data-gapiattached="true" src="https://apis.google.com/u/0/se/0/_/+1/fastbutton?usegapi=1&size=tall&origin=http%3A%2F%2Fwww.ver-flv.com&url=http%3A%2F%2Fwww.seriesbang.net%2F&gsrc=3p&jsh=m%3B%2F_%2Fscs%2Fapps-static%2F_%2Fjs%2Fk%3Doz.gapi.es.cd0_TnYqGrU.O%2Fm%3D__features__%2Fam%3DAQ%2Frt%3Dj%2Fd%3D1%2Ft%3Dzcms%2Frs%3DAGLTcCM4WC95v5zjhYq2rJ-7YEc6S-mdHw#_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe%2C_renderstart%2Concircled%2Cdrefresh%2Cerefresh&id=I1_1416285908966&parent=http%3A%2F%2Fwww.ver-flv.com&pfname=&rpctoken=37833887" name="I1_1416285908966" id="I1_1416285908966" vspace="0" tabindex="0" style="position: static; top: 0px; width: 50px; margin: 0px; border-style: none; left: 0px; visibility: visible; height: 60px;" scrolling="no" marginwidth="0" marginheight="0" hspace="0" frameborder="0" width="100%"></iframe></div>
<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.ver-flv.com%2F&size=m&text=La%20Mejor%20Web%20de%20Series&url=http%3A%2F%2Fseriesbang.net%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>
Hacer clic para expandir...



Guao eres un master 🙂 muchas gracias por la ayuda me sirvio gracias 🙂🙂



------------- EDITO --------------------


Me podrías ayudar con lo de google plus por favor no se no me funciona doy click y se marca pero no aparece la ventana para compartir me podrias decir por favor que reemplazo ? por que he puesto el nombre y todo pero no me funciona .

Gracias de antemano

- - - Actualizado - - -

Alguien por favor ? solo me falla eso del google plus 🙁
 
Última edición:
[MENTION=74519]Corp GamerSLatino[/MENTION], pásame tu URL para probar.
 
SnakeNet dijo:
Yo verifique y si que anda perfectamente las 3 opciones algo hiciste mal.
Hacer clic para expandir...

Que raro porque si te das cuenta en la web que esta en el post que he puesto , al momento de dar click en el botón de google plus se habré una ventana para compartir en cambio cuando yo lo intento agregar el código me sale todo pero el de google plus no me aparece la ventana de compartir o me podrías decir que cambiaste en la parte del google plus ?
 
Corp GamerSLatino dijo:
Que raro porque si te das cuenta en la web que esta en el post que he puesto , al momento de dar click en el botón de google plus se habré una ventana para compartir en cambio cuando yo lo intento agregar el código me sale todo pero el de google plus no me aparece la ventana de compartir o me podrías decir que cambiaste en la parte del google plus ?
Hacer clic para expandir...

Quizás algo te interfiere mira te dejo el código en ejecución y verás que no interfiere nada.

http://jsfiddle.net/nhwh8fqb/1/embedded/result/
 
Última edición:
SnakeNet dijo:
Quizás algo te interfiere mira te dejo el código en ejecución y verás que no interfiere nada.

http://jsfiddle.net/nhwh8fqb/1/embedded/result/
Hacer clic para expandir...

Al parecer alli tampoco funciona mira el cuadro que se desprender de compartir tome una foto :

2iu6eiw.png


Como podras ver despues que le das click en el boton me gusta lo dejas alli el puntero y se te desprendera el cuadro para compartir como se muestra en la imagen , eso es lo que no me aparece :'(
 
Corp GamerSLatino dijo:
Al parecer alli tampoco funciona mira el cuadro que se desprender de compartir tome una foto :
Como podras ver despues que le das click en el boton me gusta lo dejas alli el puntero y se te desprendera el cuadro para compartir como se muestra en la imagen , eso es lo que no me aparece :'(
Hacer clic para expandir...

Este es:

http://jsfiddle.net/6h5s2cd7/embedded/result/

Lo que pasa es que cada plataforma tiene su script y copiaron uno de alguien y que ya esta traducido es mejor sacar cada script de su sitio.
 
Hay que estar conectado o registrado para responder aquí.

Temas similares

Mindfreakx
  • Cerrado
Se solicita Botones para redes sociales
Respuestas
0
Visitas
71
Mindfreakx
Mindfreakx
ImperioHosting
  • Cerrado
Se solicita agregar botones a producto en woocomerce
Respuestas
2
Visitas
276
wpalencia
wpalencia
Grasnero
  • Cerrado
Me ofrezco Metodo para agregar botones de descarga a cualquier wordpress y un buscador (opcional)
Respuestas
1
Visitas
306
CaballeroDigital
C
J
Agregar botones de radio con precios en productos variables
Respuestas
1
Visitas
191
BotBeta
BotBeta
M
Agregar botones siguiente y atras dentro de una entrada
Respuestas
3
Visitas
399
angel062427
angel062427
Atrás
Arriba