Osclass forums
Support forums => Tips, tricks, and tutorials => Topic started by: volunteer on April 05, 2014, 11:02:55 pm
-
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
<!-- 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
#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"
<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%
-
@volunteer
What about Social Share Plugin? It do the same :)
-
social share plugin for fb and twitter works with javascript ? I think so.. anyway I don't like the buttons :P
// 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>'
-
@volunteer
Hah, everyone prefer own work :)
-
I am just trying to avoid javascript because I am already running quite a few in the site
-
@volunteer
Well, overloading site with javascript is not good, but osclass has very reduced javascript comparing to other popular scripts...
-
These social bookmarks are really awesome!!!
-
little update with visual effects
-
@volunteer
Packing it into plugin with ability to select own icons and urls would be great ;)
-
Unfortunately my knowledge of PHP is zero :-\
-
@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: Extraprezzo.it (http://www.extraprezzo.it)
-
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 (http://extraprezzo.it)
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
-
Nice tut. 8)
-
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 (http://www.neckbreakerz.com/classifieds)
Thanks
-
@Zacdaniel
Just place the code you see on top of page to your item.php ;)
-
It works works excellent while sharing the item on google+ and the others, but not on facebook. It displays a incorrect thumnail, such as the logo of the website, on facebook. How can I solve this problem? Need help.
-
I need your help. I use Simple Share Buttons on my website, buradanara.com. It works excellent on google+ and the others, except facebook. While sharing an item on facebook, it displays the logo of the website as thumbnail, but not the picture of the item. What should I do to overcome this problem?
-
@buradanara you need to tell facebook what info to grab from your site.
https://developers.facebook.com/docs/sharing/webmasters/