Wednesday, August 18, 2010

Facebook, Twitter and Buzz button












Add this HTML code in your website and customize the options ie: Your Site Name (http://www.supertec.com) and Image path (http://www.supertec.com/example.gif)






<div class="excerpt_subheader_right">
<ul>
<li id="fb-like" class="snap_nopreview fb-like-button">
<iframe src="http://www.facebook.com/plugins/like.php?href=YOUR+WEB+SITE+LINK&amp;layout=button_count&amp;show_faces=false&amp;width=80;&amp;action=like&amp;font&amp;colorscheme=light&amp;height=25" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:25px;" allowTransparency="true"></iframe>
</li>
<li class="google-buzz-button"> <a title="Post on Google Buzz" class="google-buzz-button" href="http://www.google.com/buzz/post" data-button-style="small-count" data-url="YOUR+WEB+SITE+LINK" data-imageurl="YOUR+WEB+SITE+IMAGE"></a>
<script type="text/javascript" src="http://www.google.com/buzz/api/button.js"></script>
</li>
<li style="padding-right: 0pt; margin-top: -1px;">
<script type="text/javascript">
tweetmeme_url = 'YOUR+WEB+SITE+LINK';
tweetmeme_style = 'compact';
tweetmeme_source = 'SuperTec';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
</li></ul>
</div>

Copy this CSS and paste in same file where you add HTML code

<style>
.excerpt_subheader_right ul li
{
display:inline;
float:left;
padding-right:10px;
}
li.fb-like-button
{
margin-top:-2px;
padding-right:0;
}
li.google-buzz-button
{
margin-top:-2px;
}
.post_subheader_right, .excerpt_subheader_right
{
float:right;
padding:0 0 0 10px;
position:absolute;
}
li, ul
{
list-style:none outside none;
margin:0;
padding:0;
</style>

Live Example http://www.supertec.com/social

No comments:

Post a Comment