You must have seen these social networking Sharing buttons displayed on lot of web sites and blog sites. There are few web sites that offer this service. You register with them and then host their button on pages of your site. They do a very decent job of providing this service. I wanted to use it on my blog but wanted to customize it a little for my own needs. So I decided to implement a custom ASP.Net control that you can drop on your page and you will be done with it. It is a very simple implementation done in client side java script as well as server side control.
I am not keeping any of this implementation a secret. Source code for server control as well as client side javascript is all open to you. I am not obfuscating anything. So you are free to change any part of the implementation that fits your needs. I will give you step by step process to use this control on your pages.
- Download Binary assembly from ByteBlocks Social Web Controls
- Drop this assembly in Bin folder of your web application.
- Add a reference to the control assembly in your page as shown below.
<%@ Register TagPrefix="ByteBlocks" Namespace="ByteBlocks.SocialWeb" Assembly="ByteBlocks.SocialWeb" %>
- Declare mark up for the control on the page where you want to display the link button. Here is sample code snippet from the blog site.
<div class="bookmarks">
<ByteBlocks:ShareLink runat="server" ID="socialShareLink" />
</div>
- This control uses Container control from Yahoo User Interface (YUI). So you will need to include those javascript files along with java script that I implemented for this control. See the following declaration on master page of site.
<link rel="stylesheet" type="text/css"
href="http://yui.yahooapis.com/2.6.0/build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css"
href="http://yui.yahooapis.com/2.6.0/build/container/assets/skins/sam/container.css" />
<script type="text/javascript"
src="http://yui.yahooapis.com/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript"
src="http://yui.yahooapis.com/2.6.0/build/container/container-min.js"></script>
<script type="text/javascript"
src="http://www.byteblocks.com/SocialBlocks.js"></script>
<link rel="stylesheet"
href="http://www.byteblocks.com/SocialWebStyle.css" type="text/css" />
- You can see that I have provided style sheet for the control as well on the site (SocialWebStyle.css). So you don't have to worry about changing any settings unless you want to customize the view of panel that will display those links.
- Since YUI style sheet follow certain conventions, it is important that you add style sheet class name yui-skin-sam in your body tag. See the following snippet from this site.
<body class=" yui-skin-sam">
See it in action
You can see that all blog entries on this site display Share button. If you will hover on it, it opens a panel that display icons for 2 link sharing sites. And when you click on one of these icons, it takes you to that sharing site with URL and title.
Overriding values
The control exposes two properties, LinkUrl and LinkTitle that you can set. These values are used in links when sending request to link sharing sites. If you do not provide these values, then control will use document.location.href and document.title from java script and fill the values. But if you want to override these values, then you can set them up.
Overriding styles
The control uses following stylesheet implementation for rendering. You provide your own styles for these values.
.socialLinkTable{
}
.socialLinkTable span
{font-weight:bold;}
.socialLinkTable img
{
border:0px;
width:32px;
height:32px;
}
Adding more link sharing sites
I will keep updating the client side javascript implementation to include more link sharing sites. As long as you are linking to java script file from this site, you will get these updates automatically. But if you want to download the JS file locally, you can update it your self or get updated file from site.
How to use it for PHP, JSP or any other sites
ASP.Net control simple emits an image tag with onmouseover event defined. And this event handler simply calls the following javascript function.
ByteBlocks_ShowSocialPanel(this,'pageUrl','pageTitle');
So on you page you can add following img tag with appropriate values. You can leave out last two arguments to function if you want.
<img src="http://www.byteblocks.com/pics/share-link-button.gif" alt="" onmouseover="ByteBlocks_ShowSocialPanel(this,'[pageUrl]','[pageTitle]');" />
Downloads
Control Binaries (2.78 kb)
ASP.Net Control Source (3.33 kb)
Subscribe