Redes sociales (gadget) en botones.

Hoy les voy a compartir un gadget llamado Social media tabs en lo personal me gusta mucho, es muy versátil  ya que lo puedes acomodar casi en cualquier lugar de tu pagina web. Es un Gadget compacto y de sencilla instalación.

Por ahora viene con las siguientes redes sociales y sitios de compartimientos:

• Facebook
• Twitter
• Google+
• RSS
• Pinterest
• Youtube
• Vimeo
• Deliciuos
• Instagram
• Dribbble
• Digg
• StumbleUpon
• Deviantart
• Tumbrl

Y continuara...

Como yo se que tu quieres instalarlo en tu blog, te diré como lo harás, a continuación...

Ve a Blogger > Plantilla > Editar HTML, das un clic dentro de la plantilla, presionas CTRL + F, buscas </head>  y pegas justo antes este código:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>

<script src="https://dl.dropboxusercontent.com/u/168482905/social%20media%20tabs/jquery.social.media.tabs.1.6.1.min.js" type="text/javascript"></script>

<link href="https://dl.dropboxusercontent.com/u/168482905/social%20media%20tabs/dcsmt.css" media="all" rel="stylesheet" type="text/css"></link>

El que esta resaltado en verde es Jquery. Debes omitirlo si ya lo tienes en tu blog.

Después de haber guardado los cambios anteriores, ve a Diseño > Añadir un gadget > HTML/Javascript y pegas allí este código:

<div id="social-tabs">

</div>

<script type="text/javascript">         

        jQuery(document).ready(function(jQuery)

        {

            jQuery('#social-tabs').dcSocialTabs(

            {

    method: 'slide', location: 'left', align: 'top', position: 'fixed', offset: 70, height: 400, width: 320, start: 0, rotate: { delay: 8000,direction :'down' }, loadOpen:false, autoClose:true, imagePath: 'https://sites.google.com/site/terrenoblogger/imagenes/',

widgets: 'facebook,fblike,google,twitter,rss,pinterest',

facebookId: 'ID-PAGINA-FACEBOOK',

fblikeId: 'PAGINA-FACEBOOK',

googleId: 'GOOGLE-ID',

twitterId: 'USUARIO',

rssId: 'http://feeds.feedburner.com/USUARIO',

pinterestId: 'USUARIO',

youtubeId: 'USUARIO',

vimeoId: 'USUARIO',

deliciousId: 'USUARIO',

instagramId: '#USUARIO',

dribbbleId: 'USUARIO',

stumbleuponId: 'USUARIO',

tumblrId: 'USUARIO',

deviantartId: 'USUARIO',

twitter: {title:'Tweets Recientes',follow:'Sígueme en Twitter',thumb:true,retweets:false,replies:false,limit:10},

fbrec: {header:true},

fblike:{stream:false,header:true,limit:36},

facebook:{title:'Facebook',follow:'Síguenos en Facebook',text:'content',limit:10},

google: {title:'Google+',follow:'Agréganos a tu Círculos',limit:10,api_key: 'AIzaSyAVx2W-gR7eqIpATEgp2IMOWtxzDDDOqt0'},

pinterest: {title:'Pinterest',follow:'Encuentrame en Pinterest',limit:10},

rss: {title:'Suscribete a nuestro Feed',follow:'Subscribe',limit:10},

youtube: {title:'Suscribete',subscribe:true,limit:10},

instagram: {clientId:'',redirectUrl:'',accessToken:'',limit:10,title:'Instagram'},

vimeo: {title:'Vimeo',follow:'Subscribe',limit:10}, flickr: {title:'Flickr',limit:20},

stumbleupon: {title:'Stumbleupon',follow:'Follow',limit:10},

tumblr: {title:'Tumblr',follow:'Follow',limit:10},

delicious: {title:'Delicious',follow:'Follow on Delicious',limit:10},

digg: {title:'Latest Diggs',limit:10}, lastfm: {title:'Last.fm',limit:20},

dribbble: {title:'Dribbble',follow:'Follow on Dribbble',limit:10},

deviantart: {title:'deviantART',follow:'Follow',limit:10}

            });

        });

    </script>

Ahora, esto que harás sera importante.

En la linea resaltada en azul están escritas solo las redes sociales que se van a mostrar; si deseas mostrar mas redes sociales, solo debes escribir después de pinterest, una coma y luego el nombre de la otra red social y luego en el código resaltado en azul agregaras el nombre de usuario de dicha red social.

Solo puedes agregar las redes sociales que están resaltadas en azul.

Las redes sociales que por defecto estan activas, son las de color amarillo. Asi que debes reemplazar el usuario respectivo en cada una de ellas.

Para conocer el ID de tu Pagina en facebook, ve a: http://graph.facebook.com/NOMBRE-DE-PAGINA  y alli se te mostrara el ID de tu pagina.

Para saber el usuario de feedburner, te diriges a http://feedburner.google.com/. Elige tu feed y das un clic en "Edit Feed Details…" (Esta bajo el titulo de tu feed). Ahora en "Feed Address:" dentro un recuadro esta el Usuario de tu Feedburner

La linea resaltada en rojo al inicio del código indica en que lugar del blog se mostrara el Widget. Utiliza estos parametros para ajustar la posicion del los botones a tu gusto:

• left = iziquerda
• right = derecha
• top = arriba
• bottom = abajo

Este Gadget tiene otras opciones de personalización,  pero no quiero enredarte. Yo se que con esto lo tendrás funcionando correctamente.

Si necesitas ayuda deja el comentario, Hasta pronto.

TAMBIÉN TE PODRÍA INTERESAR ESTO:

• Caja de redes con estilo profesional.
• Redes  sociales con iconos flotantes.
• Redes sociales con estilo windows 8.
• Caja de redes sociales con estilo profesional 2.