Widget Estético de Redes Sociales para Blogger

  • Autor Autor garlock
  • Fecha de inicio Fecha de inicio
a mi me no me muestra el boton de FB, agrego la url de mi fanpage, pero se muestra en blanco.
 
Grax por el aporte... pero mi Sidebar es muy peque!!! 250 x250 modificarlo me da pereza!!
 
bueno, eso es lo que tuve que hacer.
es el mejor sistema para crear suscripciones, es completo lo uso en todos mis blogs,
excelente aporte.
agrega la url de tu blog, no de tu fanpage, es para generar me gusta a la direccion del blog
 
Muy bueno ya lo implemente. Gracias
 
Gracias buscaba estoo
 
Lo estoy implementando en otro blog y me sale algo descuadrado, a ustedes les ha pasado esto?
 
Buena aporte, muchas gracias es lo que buscaba!!!!!
 
¡Gran aporte garlock! ¿me ayudarías a modificar el código para eliminar pinterest, colocar otro RSS feed y alinear ciertos errores que tengo?

Gracias de antemano, espero tu respuesta para pasarte los detalles y no hacer tan larga esta publicación :encouragement:
 
¡Gran aporte garlock! ¿me ayudarías a modificar el código para eliminar pinterest, colocar otro RSS feed y alinear ciertos errores que tengo?

Gracias de antemano, espero tu respuesta para pasarte los detalles y no hacer tan larga esta publicación :encouragement:

no habia visto tu comentario, ya solucionaste eso? o quieres que te ayude con el codigo aun
 
Última edición:
Insertar CODE, HTML o PHP:
<!-- Styles -->
<style type="text/css">
#share-box-0 {
	width:300px;
	overflow:hidden;
}
#share-box-0 .gplusone {
	background-color:#f5fcfe;
	border:1px solid #d8e6eb;
	border-top:1px solid #FFF;
	font-size:.87em;
	color:#000;
	line-height:24px;
	padding:9px 0 0 11px;
}

#share-box-0 .gplusone span {
	display:inline-block;
	vertical-align:middle;
	height:20px;
	margin-top:-17px;
}

#share-box-0 .fb-like-box {
	border:1px solid #dcdcdc;
	padding:5px 11px;
}
#share-box-0 .twitter-follow {
	background-color:#eef9fd;
	border:1px solid #c7dbe2;
	border-top:0;
}

#share-box-0 .twitter-follow iframe {
	margin:9px 11px;
}
#other-social-bar {
    background-color: #D8E6EB;
    border: 1px solid #B6D0DA;
    box-shadow: 0 1px 1px #FFFFFF inset;
    font-family: "Arial","Helvetica",sans-serif;
    font-weight: bold;
    overflow: hidden;
    padding: 0;
}
#other-social-bar ul {
    list-style: none outside none;
    padding-left: 4px;
}
#other-social-bar .other-follow {
    color: #1E598E;
    float: left;
    height: 16px;
    overflow: hidden;
    padding: 10px 10px 7px;
    width: 270px;
}
#other-social-bar .other-follow ul {
    list-style: none outside none;
    padding-left: 4px;
}
#other-social-bar .other-follow li {
    border: 0 none;
    display: inline;
    font-size: 12px;
    font-weight: bold;
    text-shadow: 1px 1px white;
}
#other-social-bar .other-follow li a {
    color: #1E598E;
    display: inline;
    font-size: 12px;
    font-weight: bold;
    text-shadow: 1px 1px white;
}
#other-social-bar .other-follow li.my-rss {
    background: url(http://4.bp.blogspot.com/-3ZR8uAHB8QY/T-MLyuLqG4I/AAAAAAAAFxw/Zxk86OIXwJM/s000/rss-16x16.png) no-repeat scroll 0 0 transparent;
    line-height: 1;
    margin-bottom: 0;
    padding: 0 3px 1px 20px;
    width: 60px;
}
#other-social-bar .other-follow li.my-gplus {
	background: url(http://2.bp.blogspot.com/-oV5JSdsA2Sw/T-MLyxNI7PI/AAAAAAAAFx4/rVvTQjUpjCE/s000/gplus-16x16.png) no-repeat transparent;
	line-height: 1;
	width: 60px;
	padding: 0px 3px 1px 20px;
	margin-bottom:0px;
}
#email-news-subscribe .email-box {
	padding: 10px 10px; 
	font-family: "Arial","Helvetica",sans-serif;
	border-top: 0;
	border-right: 1px solid #C7DBE2;
	border-left: 1px solid #C7DBE2;
	border-image: initial;
}
#email-news-subscribe .email-box input.email {
	background:#FFFFFF;
	border: 1px solid #dedede;
	color: #999;
	padding: 7px 10px 8px 10px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	-o-border-radius: 3px;
	-ms-border-radius: 3px;
	-khtml-border-radius: 3px;
	border-radius: 3px;
	border-image: initial;
	font-family: "Arial","Helvetica",sans-serif;
}	
#email-news-subscribe .email-box input.email:focus {
	color:#333
}	
#email-news-subscribe .email-box input.subscribe {
	background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%);
	background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#FFCA00),color-stop(1,#FF9B00));
	background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%);
	-pie-background: linear-gradient(270deg,#ffca00,#ff9b00);
	font-family: "Arial","Helvetica",sans-serif;
	border-radius:3px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border:1px solid #cc7c00;
	color:white;
	text-shadow:#d08d00 1px 1px 0;
	padding:7px 14px;
	margin-left:3px;
	font-weight:bold;
	font-size:12px;
	cursor:pointer;
	border-image: initial;
}
#email-news-subscribe .email-box input.subscribe:hover {
	background: #ff9b00;
	background-image:-moz-linear-gradient(top,#ffda4d,#ff9b00);
	background-image:-webkit-gradient(linear,left top,left bottom,from(#ffda4d),to(#ff9b00));
	filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#ebebeb);
	outline:0;-moz-box-shadow:0 0 3px #999;
	-webkit-box-shadow:0 0 3px #999;
	box-shadow:0 0 3px #999
	background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ffda4d),color-stop(1,#ff9b00));
	background:-moz-linear-gradient(center top,#ffda4d 0,#ff9b00 100%);
	-pie-background:linear-gradient(270deg,#ffda4d,#ff9b00);
	border-radius:3px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border:1px solid #cc7c00;
	color:#FFFFFF;
	text-shadow:#d08d00 1px 1px 0
}
</style>


  <div id="share-box-0">  
  
    <div class="fb-like-box">
      <iframe src="http://www.facebook.com/plugins/like.php?href=[COLOR="#FF0000"]URL DE TU BLOG[/COLOR]&amp;layout=standard&amp;show_faces=false&amp;width=350&amp;action=like&amp;colorscheme=light" scrolling="no" frameborder="0" allowtransparency="true" style="border:none; overflow:hidden; width:250px; height:40px"></iframe></div>
    <div class="gplusone">
      <div class="g-plusone po-stub" data-size="medium" data-count="true" data-callback="fire_multitrack" data-href="[COLOR="#FF0000"]URL DE TU BLOG[/COLOR]"></div> <span>Recomendar en Google</span>
    </div>
   <div class="twitter-follow">
      <a href="http://twitter.com/[COLOR="#FF0000"]NOMBREDEUSUARIO[/COLOR]" class="twitter-follow-button">Follow @NOMBREDEUSUARIO</a>
    </div>
	<div style="background: #E3EDF4;" id="email-news-subscribe">
	     <div class="email-box">
		    <form style="border:1px solid #ccc;padding:3px;text-align:center;" action="http://uri.lv/e/mailverify" method="post"
target="popupwindow" onsubmit="window.open('http://uri.lv/e/mailverify?feed_id=vidabytes', 'popupwindow',
'scrollbars=yes,width=550,height=300');return true"><p>Ingresa tu e-mail:</p><p>
<input type="text" style="width:150px" name="email"/></p><input type="hidden" value="vidabytes" name="feed_id"/><input
type="hidden" name="loc" value="fr_FR"/><input type="submit" value="Suscribir" /><p>Servicio por <a href="http://uri.lv"
target="_blank">URI.LV</a></p></form>
	    </div>
	</div>
<div style="background: #D8E6EB;" id="other-social-bar">
	<ul class="other-follow">
		<li class="my-rss">
			<a target="_blank" href="[COLOR="#FF0000"]URL DE TU RSS (PUEDE SER FEEDBURNER)[/COLOR]" title="RSS" rel="nofollow">RSS Feed</a>
		</li>
		<li class="my-gplus">
			<a target="_blank" href="[COLOR="#FF0000"]URL DE TU PERFIL DE GOOGLE+[/COLOR]" title="Google Plus" rel="nofollow">Google Plus</a>
		</li>
			</ul>
</div>
  </div>

<!-- Scripts -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">{lang: 'en'}</script>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

<div class='clear'></div>


Muy amable garlock, muchas gracias. Verás, quisiera eliminar la opción de Pinterest y en vez de la suscripción de FeedBurner (manteniendo el diseño de tu captura) colocar mi otro sistema de feeds, su código de suscripción es este:

<form style="border:1px solid #ccc;padding:3px;text-align:center;" action="http://uri.lv/e/mailverify" method="post"
target="popupwindow" onsubmit="window.open('http://uri.lv/e/mailverify?feed_id=vidabytes', 'popupwindow',
'scrollbars=yes,width=550,height=300');return true"><p>Ingresa tu e-mail:</p><p>
<input type="text" style="width:150px" name="email"/></p><input type="hidden" value="vidabytes" name="feed_id"/><input
type="hidden" name="loc" value="fr_FR"/><input type="submit" value="Suscribir" /><p>Servicio por <a rel="nofollow" href="http://uri.lv"
target="_blank">URI.LV</a></p></form>

Desde ya mil gracias!!!
 
Muchas gracias, un detalle más por favor, el botón de twitter me ha quedado desalineado y no centrado como se ve en esta captura:

Ver el archivo adjunto 14406

Cómo puedo centrarlo :encouragement:

Insertar CODE, HTML o PHP:
<!-- Styles -->
<style type="text/css">
#share-box-0 {
	width:300px;
	overflow:hidden;
}
#share-box-0 .gplusone {
	background-color:#f5fcfe;
	border:1px solid #d8e6eb;
	border-top:1px solid #FFF;
	font-size:.87em;
	color:#000;
	line-height:24px;
	padding:9px 0 0 11px;
}

#share-box-0 .gplusone span {
	display:inline-block;
	vertical-align:middle;
	height:20px;
	margin-top:-17px;
}

#share-box-0 .fb-like-box {
	border:1px solid #dcdcdc;
	padding:5px 11px;
}
#share-box-0 .twitter-follow {
	background-color:#eef9fd;
	border:1px solid #c7dbe2;
	border-top:0;
}

#share-box-0 .twitter-follow iframe {
	margin:9px 11px;
}
#other-social-bar {
    background-color: #D8E6EB;
    border: 1px solid #B6D0DA;
    box-shadow: 0 1px 1px #FFFFFF inset;
    font-family: "Arial","Helvetica",sans-serif;
    font-weight: bold;
    overflow: hidden;
    padding: 0;
}
#other-social-bar ul {
    list-style: none outside none;
    padding-left: 4px;
}
#other-social-bar .other-follow {
    color: #1E598E;
    float: left;
    height: 16px;
    overflow: hidden;
    padding: 10px 10px 7px;
    width: 270px;
}
#other-social-bar .other-follow ul {
    list-style: none outside none;
    padding-left: 4px;
}
#other-social-bar .other-follow li {
    border: 0 none;
    display: inline;
    font-size: 12px;
    font-weight: bold;
    text-shadow: 1px 1px white;
}
#other-social-bar .other-follow li a {
    color: #1E598E;
    display: inline;
    font-size: 12px;
    font-weight: bold;
    text-shadow: 1px 1px white;
}
#other-social-bar .other-follow li.my-rss {
    background: url(http://4.bp.blogspot.com/-3ZR8uAHB8QY/T-MLyuLqG4I/AAAAAAAAFxw/Zxk86OIXwJM/s000/rss-16x16.png) no-repeat scroll 0 0 transparent;
    line-height: 1;
    margin-bottom: 0;
    padding: 0 3px 1px 20px;
    width: 60px;
}
#other-social-bar .other-follow li.my-gplus {
	background: url(http://2.bp.blogspot.com/-oV5JSdsA2Sw/T-MLyxNI7PI/AAAAAAAAFx4/rVvTQjUpjCE/s000/gplus-16x16.png) no-repeat transparent;
	line-height: 1;
	width: 60px;
	padding: 0px 3px 1px 20px;
	margin-bottom:0px;
}
#email-news-subscribe .email-box {
	padding: 10px 10px; 
	font-family: "Arial","Helvetica",sans-serif;
	border-top: 0;
	border-right: 1px solid #C7DBE2;
	border-left: 1px solid #C7DBE2;
	border-image: initial;
}
#email-news-subscribe .email-box input.email {
	background:#FFFFFF;
	border: 1px solid #dedede;
	color: #999;
	padding: 7px 10px 8px 10px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	-o-border-radius: 3px;
	-ms-border-radius: 3px;
	-khtml-border-radius: 3px;
	border-radius: 3px;
	border-image: initial;
	font-family: "Arial","Helvetica",sans-serif;
}	
#email-news-subscribe .email-box input.email:focus {
	color:#333
}	
#email-news-subscribe .email-box input.subscribe {
	background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%);
	background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#FFCA00),color-stop(1,#FF9B00));
	background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%);
	-pie-background: linear-gradient(270deg,#ffca00,#ff9b00);
	font-family: "Arial","Helvetica",sans-serif;
	border-radius:3px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border:1px solid #cc7c00;
	color:white;
	text-shadow:#d08d00 1px 1px 0;
	padding:7px 14px;
	margin-left:3px;
	font-weight:bold;
	font-size:12px;
	cursor:pointer;
	border-image: initial;
}
#email-news-subscribe .email-box input.subscribe:hover {
	background: #ff9b00;
	background-image:-moz-linear-gradient(top,#ffda4d,#ff9b00);
	background-image:-webkit-gradient(linear,left top,left bottom,from(#ffda4d),to(#ff9b00));
	filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#ebebeb);
	outline:0;-moz-box-shadow:0 0 3px #999;
	-webkit-box-shadow:0 0 3px #999;
	box-shadow:0 0 3px #999
	background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ffda4d),color-stop(1,#ff9b00));
	background:-moz-linear-gradient(center top,#ffda4d 0,#ff9b00 100%);
	-pie-background:linear-gradient(270deg,#ffda4d,#ff9b00);
	border-radius:3px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border:1px solid #cc7c00;
	color:#FFFFFF;
	text-shadow:#d08d00 1px 1px 0
}
</style>


  <div id="share-box-0">  
  
    <div class="fb-like-box">
      <iframe src="http://www.facebook.com/plugins/like.php?href=[COLOR="#FF0000"]URL DE TU BLOG[/COLOR]&layout=standard&show_faces=false&width=350&action=like&colorscheme=light" scrolling="no" frameborder="0" allowtransparency="true" style="border:none; overflow:hidden; width:250px; height:40px"></iframe></div>
    <div class="gplusone">
      <div class="g-plusone po-stub" data-size="medium" data-count="true" data-callback="fire_multitrack" data-href="[COLOR="#FF0000"]URL DE TU BLOG[/COLOR]"></div> <span>Recomendar en Google</span>
    </div>
   <div class="twitter-follow">
      <a rel="nofollow" href="http://twitter.com/[COLOR="#FF0000"]NOMBREDEUSUARIO[/COLOR]" class="twitter-follow-button">Follow @NOMBREDEUSUARIO</a>
    </div>
	<div style="background: #E3EDF4;" id="email-news-subscribe">
	     <div class="email-box">
		    <form style="border:1px solid #ccc;padding:3px;text-align:center;" action="http://uri.lv/e/mailverify" method="post"
target="popupwindow" onsubmit="window.open('http://uri.lv/e/mailverify?feed_id=vidabytes', 'popupwindow',
'scrollbars=yes,width=550,height=300');return true"><p>Ingresa tu e-mail:</p><p>
<input type="text" style="width:150px" name="email"/></p><input type="hidden" value="vidabytes" name="feed_id"/><input
type="hidden" name="loc" value="fr_FR"/><input type="submit" value="Suscribir" /><p>Servicio por <a rel="nofollow" href="http://uri.lv"
target="_blank">URI.LV</a></p></form>
	    </div>
	</div>
<div style="background: #D8E6EB;" id="other-social-bar">
	<ul class="other-follow">
		<li class="my-rss">
			<a target="_blank" href="[COLOR="#FF0000"]URL DE TU RSS (PUEDE SER FEEDBURNER)[/COLOR]" title="RSS" rel="nofollow">RSS Feed</a>
		</li>
		<li class="my-gplus">
			<a target="_blank" href="[COLOR="#FF0000"]URL DE TU PERFIL DE GOOGLE+[/COLOR]" title="Google Plus" rel="nofollow">Google Plus</a>
		</li>
			</ul>
</div>
  </div>

<!-- Scripts -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">{lang: 'en'}</script>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

<div class='clear'></div>
 
He intentado nuevamente y persiste el problema, en el código lo único que hice fue reemplazar "http://twitter.com/NOMBREDEUSUARIO" por "http://twitter.com/camachomarcelo"
y esto @NOMBREDEUSUARIO por @camachomarcelo

Por cierto, si dejo el ancho predefinido de width:300px; el botón de Twitter se ve centrado, pero el widget es muy ancho para mi sidebar, reduciéndolo a 280 queda bien pero es ahí donde el botón se desalineada hacia la izquierda... ¿estoy haciendo algo mal?

NO deberia quedar asi, intenta ponerlo de nuevo, a lo mejor algo quedo mal, si sigue asi avisame para corregir el codigo y mover el boton
 
He intentado nuevamente y persiste el problema, en el código lo único que hice fue reemplazar "http://twitter.com/NOMBREDEUSUARIO" por "http://twitter.com/camachomarcelo"
y esto @NOMBREDEUSUARIO por @camachomarcelo

Por cierto, si dejo el ancho predefinido de width:300px; el botón de Twitter se ve centrado, pero el widget es muy ancho para mi sidebar, reduciéndolo a 280 queda bien pero es ahí donde el botón se desalineada hacia la izquierda... ¿estoy haciendo algo mal?

habra que mover el margin en el css, intenta poniendol un margin de pocos pixeles
 
Gracias, todo bien! tengo la duda de saber por qué para el botón de Facebook va la URL del blog y no de la fanpage :distant:

habra que mover el margin en el css, intenta poniendol un margin de pocos pixeles
 
Exelente gracias :encouragement:
 
Gracias, todo bien! tengo la duda de saber por qué para el botón de Facebook va la URL del blog y no de la fanpage :distant:

es para lograr actividad social para tu blog, y a efectos de posicionamiento sirve mucho, aunque si lo que quieres es fans para tu fanpage, solo le pones tu url de fanpage y listo 😀
 
Atrás
Arriba