[TIP] Simple Social Share Buttons

[volunteer]

I have seen many pages using third party services like "sharethis" of "shareholic"

Is very simple and looks nice but it uses javascript and makes our websites more slow

Better to use plain html share buttons Here an example of what I use in my item.php

Code: [Select]

<!-- SHARE BUTTONS -->
<!-- Email -->
<a href="mailto:?Subject=EDIT THIS PART&Body=EDIT THIS PART <?php echo osc_item_url() ; ?>" target="_blank"><img src="/oc-content/themes/repurpose/images/email.png" alt="Share by email" title="Share by email" /></a>
<!-- Facebook -->
<a href="http://www.facebook.com/sharer.php?u=<?php echo osc_item_url() ; ?>" target="_blank"><img src="/oc-content/themes/repurpose/images/facebook.png" alt="Share on Facebook" title="Share on Facebook" /></a>
<!-- Twitter -->
<a href="http://twitter.com/share?url=<?php echo osc_item_url() ; ?> <?php echo osc_item_title(); ?>" target="_blank"><img src="/oc-content/themes/repurpose/images/twitter.png" alt="Share on Twitter" title="Share on Twitter" /></a>
<!-- Google+ -->
<a href="https://plus.google.com/share?url=<?php echo osc_item_url() ; ?>" target="_blank"><img src="/oc-content/themes/repurpose/images/google.png" alt="Share on Google+" title="Share on Google+" /></a>
<!-- SHARE BUTTONS -->
PNG buttons attached

------------------------------------------------------------------------
UPDATE:

If you want to add a simple visual effect to the buttons you can use OPACITY in you CSS file by adding

Code: [Select]

#share-btn img{
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
#share-btn:hover img{
opacity:0.5;
filter:alpha(opacity=50); /* For IE8 and earlier */
}

and apply the ID to the image like this id="share-btn"

Code: [Select]

<a href="http://www.facebook.com/sharer.php?u=http://yousite.com" target="_blank" id="share-btn">

now when you put the mouse over the buttons the opacity will go down by 50%

[frosticek]

@volunteer
What about Social Share Plugin? It do the same

[volunteer]

social share plugin for fb and twitter works with javascript ? I think so.. anyway I don't like the buttons

Code: [Select]

        // twitter
        $content .= '<li class="twitter"><a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></li>' ;
        // facebook
        $content .= '<li class="facebook"><div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="" send="false" layout="button_count" show_faces="false" font=""></fb:like></li>' ;
        // google plus
        $content .= '<li class="google-plus"><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="medium"></g:plusone></li>' ;
        // pinterest
        $content .= '<li class="pinterest"><script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script><a href="#" class="pin-it-button" count-layout="horizontal"><img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" /></a></li>' ;
        $content .= '</ul>'

[frosticek]

@volunteer
Hah, everyone prefer own work

[volunteer]

I am just trying to avoid javascript because I am already running quite a few in the site

[frosticek]

@volunteer
Well, overloading site with javascript is not good, but osclass has very reduced javascript comparing to other popular scripts...

[naneri]

These social bookmarks are really awesome!!!

[volunteer]

little update with visual effects

[frosticek]

@volunteer
Packing it into plugin with ability to select own icons and urls would be great

[volunteer]

Unfortunately my knowledge of PHP is zero 

[frosticek]

@volunteer
 

[Malefol7]

This trick allows you to insert images of the buttons to your liking, the 'only thing that is missing is the counter. I'll post the link to see how it has been modified by me: Extraprezzo.it

[volunteer]

This trick allows you to insert images of the buttons to your liking, the 'only thing that is missing is the counter. I'll post the link to see how it has been modified by me: annunci gratuiti

I don't understand what you are saying  
javascript has counters, the idea of this button is to keep it as simple as possible, basic html

[ventado]

Nice tut. 

[Zacdaniel]

How would I integrated this into my site

Please take a look at my site
I have the plug in running
www.neckbreakerz.com/classifieds

Thanks