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&layout=button_count&show_faces=false&width=80;&action=like&font&colorscheme=light&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
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment