Hi guys, has anyone had any success with this tutorial?

 

It's exactly what I'm looking for but I've copied and pasted the first tutorial and can't get it to work so wondering if it's bogus?

Which tutorial?

Sorry, how silly, this one: http://www.paulund.co.uk/create-your-own-share-buttons-with-sharrre

You have had a struggle with social buttons, haven't you?

A question - do you really need them to show count?

 

If not, please feel free to use and modify the buttons below as you see fit. I have made them using some sharing links generator, they are only basic buttons, but do the job imo. No count, though, I don't really think that is of a great importance Bonus - responsive.

 

Demo here: http://teodora-dev.com/social.html

 

What you need to do is:

1. HTML - just change the your url and the text to share. Put the code in your HTML file, where you want the buttons to appear.

<div class="social">
<!--Facebook-->
<a class="facebook" target="_blank" href="http://www.facebook.com/sharer/sharer.php?s=100&p[url]=http://formworkinlondon.co.uk/&p[images][0]=&p[title]=Share%20on%20Facebook&p[summary]=THE TEXT TO SHARE">Facebook</a>
<!--Twitter-->
<a class="twitter" target="_blank" href="http://twitter.com/home?status=Visit%20http://formworkinlondon.co.uk/">Twitter</a>
<!--Google Plus-->
<a class="google-plus" target="_blank" href="https://plus.google.com/share?url=http://formworkinlondon.co.uk/">Google+</a>
</div>

2. CSS - put the code in your CSS file

 

/*Facebook*/
.facebook {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #3d94f6), color-stop(1, #1e62d0) );
    background:-moz-linear-gradient( center top, #3d94f6 5%, #1e62d0 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3d94f6', endColorstr='#1e62d0');
    background-color:#3d94f6;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
    border:1px solid #337fed;
    display:inline-block;
    color:#ffffff;
    font-family:arial;
    font-size:14px;
    font-weight:bold;
    padding:6px 24px;
    text-decoration:none;
    text-shadow:1px 1px 0px #1570cd;
}.facebook:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #1e62d0), color-stop(1, #3d94f6) );
    background:-moz-linear-gradient( center top, #1e62d0 5%, #3d94f6 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e62d0', endColorstr='#3d94f6');
    background-color:#1e62d0;
}.facebook:active {
    position:relative;
    top:1px;
}
/*Twitter*/
.twitter{
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5) );
    background:-moz-linear-gradient( center top, #79bbff 5%, #378de5 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5');
    background-color:#79bbff;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px;
    border:1px solid #84bbf3;
    display:inline-block;
    color:#ffffff;
    font-family:arial;
    font-size:14px;
    font-weight:bold;
    padding:6px 24px;
    text-decoration:none;
    text-shadow:1px 1px 0px #528ecc;
}.twitter:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff) );
    background:-moz-linear-gradient( center top, #378de5 5%, #79bbff 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5', endColorstr='#79bbff');
    background-color:#378de5;
}.twitter:active {
    position:relative;
    top:1px;
}
/*Google Plus*/
.google-plus {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fa665a), color-stop(1, #d34639) );
    background:-moz-linear-gradient( center top, #fa665a 5%, #d34639 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fa665a', endColorstr='#d34639');
    background-color:#fa665a;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
    border:1px solid #d83526;
    display:inline-block;
    color:#ffffff;
    font-family:arial;
    font-size:14px;
    font-weight:bold;
    padding:6px 24px;
    text-decoration:none;
    text-shadow:1px 1px 0px #98231a;
}.google-plus:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #d34639), color-stop(1, #fa665a) );
    background:-moz-linear-gradient( center top, #d34639 5%, #fa665a 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d34639', endColorstr='#fa665a');
    background-color:#d34639;
}.google-plus:active {
    position:relative;
    top:1px;
}
@media only screen and (max-width : 480px) {
    .social a{
        display:block;
        width:60px;
        margin-bottom:10px;
    }
} 

Hope that helps a bit

Edited July 20, 201313 yr by teodora

Hhmmm... is there anyway to multiply the likes on Teodora's post? Excellent solution - forget all that ShareThis! and Sharrre nonsense

Thank you, 4li4s I think Share This and similar tools output a lot a lot of code, and just prefer simpler solution.

Hope it will help Precise formwork (and anyone else for that matter).

Thank you, 4li4s I think Share This and similar tools output a lot a lot of code, and just prefer simpler solution.

Hope it will help Precise formwork (and anyone else for that matter).

 

It will certainly be my preferred choice over all those other plugins/tools - thanks for sharing!

Thanks Teodora, I can't tell you how much grief I've had with the buttons. I got so hung up on the facebook like button. I prioritised that over any of the others and I know it's a lot of grief with the Iframe and if you are able to place an image over the iframe you can't actually change the height of the like button (can width).

 

Thanks Teodora, very very kind of you and much appreciated, thanks 4's.

 

Agree with too much code on ShareThis and Addthis. The bigger problem for me is that they're not very customizable being placed into an Iframe; yes you can change the buttons images but they don't flow properly and nicely in a page due to the iframe they are palced in (I think).

No worries, hope you can use these

They are fully customizable, you can change the css as you wish, define height, width, anything you like

Awesome.

 

Just one lil fix, you forgot to close the target="" on the G+ one.

<!--Google Plus-->
<a class="google-plus" target="_blank href="https://plus.google.com/share?url=http://formworkinlondon.co.uk/">Google+</a>

 

 

 

 

 

Thanks Jack, fixed now

 

Awesome.

 

Just one lil fix, you forgot to close the target="" on the G+ one.

<!--Google Plus-->
<a class="google-plus" target="_blank href="https://plus.google.com/share?url=http://formworkinlondon.co.uk/">Google+</a>

 

Are you sure? When I do your suggestion I no longer get a thumb when hovering over the link, but when I paste as Theodora's I then get a thumb hovering.

I have fixed mine, he has just copy pasted the mistake to show me what was wrong

 

Edit: Are you getting on with the buttons OK?

Edited July 20, 201313 yr by teodora

Ah I see, me being a fool again lol. Good thanks, I'm trying to add a linked in one but at the moment I am having trouble getting the image in the containing div class http://preciseformwork.co.uk/buttons.php

The class tag seems to be where I want it but the image is outside of it.

For some reason I have to stick with the inline style to the image or the css doesn't format it but I've tried applying the format to the child of the anchor and image but so far it has me scratching my head lol.

 

My plan later is to put a javascript button that says share and when you click on it will then display the share buttons. Also a similar follow button that will do the same.

Edited July 20, 201313 yr by Precise Formwork

 

My plan later is to put a javascript button that says share and when you click on it will then display the share buttons. Also a similar follow button that will do the same.

 

That will be interesting, I might put together something later on

OK, I have made a little something. Demo: http://teodora-dev.com/social.html

 

How to use:

 

1. HTML - make sure to change the URLs to yours

 

<div id="social_buttons">


<p><span id="triggershare">Share</span> <span id="triggerfollow">Follow</span></p>

<!--SHARE-->
<div id="share" style="display:none;">
<!--Facebook-->
<a class="facebook" target="_blank" href="http://www.facebook.com/sharer/sharer.php?s=100&p[url]=http://formworkinlondon.co.uk/&p[images][0]=&p[title]=Share%20on%20Facebook&p[summary]=The%20text%20to%20share">Facebook</a>
<!--Twitter-->
<a class="twitter" target="_blank" href="http://twitter.com/home?status=Visit%20http://formworkinlondon.co.uk/">Twitter</a>
<!--Google Plus-->
<a class="google-plus" target="_blank" href="https://plus.google.com/share?url=http://formworkinlondon.co.uk/">Google+</a>
<!--LinkedIn-->
<a class="linkedin" target="_blank" href="http://www.linkedin.com/shareArticle?mini=true&url=http://preciseformwork.co.uk&title=Your Page Title&summary=Your page content description&source=My Website Name">LinkedIn</a>


</div>

<!--FOLLOW-->
<div id="follow" style="display:none;">
<!--facebook-->
<a class="facebook" target="_blank" href="http://www.facebook.com" title="Find us on Facebook">Facebook</a>
<a class="twitter" target="_blank" href="http://www.twitter.com" title="Follow us on Twitter">Twitter</a>
<a class="google-plus" target="_blank" href="http://www.google.com" title="Follow us on Google Plus">Google Plus</a>
<a class="linkedin" target="_blank" href="http://www.linkedin.com" title="Find us on Linkedin">LinkedIn</a>

</div>

</div><!--/social_buttons-->

 

2.CSS - edit as you wish

 

#social_buttons{
    position:relative;
}
#triggershare, #triggerfollow{
    cursor:pointer;
    display:inline-block;
    margin:5px 10px 5px 0;
    padding:5px 7px;
    background:#ebebeb;
    color:#898989;
    font-size:13px;
    font-weight:bold;
    border-radius:5px;
    -moz-border-radius:5px;
    -o-border-radius:5px;
    -webkit-border-radius:5px;
    -ms-border-radius:5px;
}
#share, #follow{
    position:absolute;
    z-index:9999;
    top:50px;
    left:0;
    padding:10px;
    background:#ebebeb;
    border-radius:5px;
    -moz-border-radius:5px;
    -o-border-radius:5px;
    -webkit-border-radius:5px;
    -ms-border-radius:5px; 
}
#share:before{
    content:'';
    position:absolute;
    top:-5px;
    left:20px;
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #ebebeb;
}
#follow:before{
    content:'';
    position:absolute;
    top:-5px;
    left:80px;
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #ebebeb;
}


#share a{
    display:inline-block;
    padding:7px 13px 7px 30px;
    margin:5px 10px;
    border-radius:5px;
    font-size:13px;
    background-repeat:no-repeat;
    background-position:4px 3px;
    text-decoration:none;
    -moz-border-radius:5px;
    -o-border-radius:5px;
    -webkit-border-radius:5px;
    -ms-border-radius:5px;
    color:#fff;
}
#follow a{
    display:inline-block;
    width:30px;
    height:30px;
    margin:0 5px;
    border-radius:15px;
    -moz-border-radius:15px;
    -o-border-radius:15px;
    -webkit-border-radius:15px;
    -ms-border-radius:15px;
    text-indent:-9999px;
    background-position:center center;
}


#share a:hover, #follow a:hover{
    opacity:0.7;
    -moz-opacity:0.7;
    -o-opacity:0.7;
    -webkit-opacity:0.7;
    -ms-opacity:0.7;
}


/*Facebook*/
.facebook {
    background:#48629b url(fb.png);
}


/*Twitter*/
.twitter{
    background:#23b0e6 url(tw.png) no-repeat 4px 2px;
}


/*Google Plus*/
.google-plus {
    background:#dc4b38 url(gplus.png);
}
/*Linkedin*/
.linkedin{
    background:#0e76a8 url(in.png);
}
.hide{
    display:none !important;
}




@media only screen and (max-width : 480px) {
    #share a{
        display:block;
        width:60px;
        margin-bottom:10px;
    }
} 

 

3. JS (put this code before the closing </head> tag). If you already have the jQuery library loaded, don't add the first line.

 

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript">
 jQuery(document).ready( function($) {
  $( "#triggershare" ).click(function() {
  $( "#share" ).toggle( "fade", 300 );
});
$( "#triggerfollow" ).click(function() {
  $( "#follow" ).toggle( "fade", 300 );
});
 $( "#triggershare" ).click(function() {
  $( "#follow" ).addClass("hide");
});
$( "#triggerfollow" ).click(function() {
  $( "#share" ).addClass("hide");
});
$( "#triggershare" ).click(function() {
  $( "#share" ).removeClass('hide');
});
$( "#triggerfollow" ).click(function() {
  $( "#follow" ).removeClass('hide');
});
});
</script>

 

 

Note: I am sure the js part could be done better lol If someone could show me a better way, will be much appreciated

 

Hope that helps.

 

 

 

 

 

 

 

Will edit later, watching Weeds aha

<script type="text/javascript">
 jQuery(document).ready( function($) {

function toggleTarget ( param, param_2 ) {
    $(param).toggle('fade', 300);
    $(param).removeClass('hide');
    $(param_2).addClass('hide');
}

$( "#triggershare" ).click(function() {
    toggleTarget('#share','#follow');
});

$( "#triggerfollow" ).click(function() {
    toggleTarget('#follow','#share');
});

});
</script>

Edited July 21, 201313 yr by Yakindo

It works great, thank you, Yakindo I will edit my post.

Wow massive thanks Teodora, looks great. Can't wait to get this up on my site.

 

There's loads of crappy tutorials out there on social buttons, I think if you were to put this out as a tutorial you'd get an insane amount of links.

 

Can't thank you enough Teodora, I've been stuck on these buttons for months but I'm gonna be so happy when I get them up on my site :).