Almost everyone is on some sort of social network nowadays. It’s not just limited to tech-savvy individuals anymore. Even my grandmother, who has a difficult time finding the computer's ON button at times, has figured out how to sync up with me via social networks. With this amount of popularity, of course you want to allow your users to be able to share pages from your ASP.NET AJAX application with networks such as Facebook, Twitter, and Google+. Thankfully, our new ASP.NET AJAX control, RadSocialShare, makes this sharing a breeze. I know you’re eager to have one of those Like buttons (thumbs up and all) on your page, so let’s take a look at how you can implement the control in your application today!

The First Step

While we’ve already posted a general overview of the RadSocialShare control right here, I wanted to dive a bit into the markup and explain some things regarding this new ASP.NET AJAX control.

To get things started, you can find RadSocialShare in your toolbox under the Telerik AJAX Miscellaneous Components group. There are two ways you can approach building up your RadSocialShare control, either via our awesome configuration manager (completely codeless) or by manually writing the markup (intellisense helps here though!). I’ll go the route of the configuration manager and then later explain some of the generated code. So once we’ve dragged the control on to our form we can access the wizard by just selecting Configuration Manager from the smart tag menu:

Which grants us the following (minus the boxes and arrows, of course ;))

The area surrounded by the red box determines if this is a “main” or “compact” button. The main buttons receive separate icons on the initial toolbar that is rendered by RadSocialShare, while the compact buttons are all bundled together under a single icon . More on the compact button in a bit and for now let’s focus on the main buttons, which are highlighted in the blue box.

From left to right we have “Add a social button” (general purpose button), “Add a Facebook button” (specific Facebook button), “Add a Twitter button” (specific Twitter button), “Add a Google +1 button” (specific Google+ button), “Add a compact button” (allows for usage of the compact buttons list), and “Remove” (self-explanatory). In cases where we have a specific type of button (Facebook, Twitter, Google+) I recommend using those buttons. Otherwise the general purpose “Add a social button” allows you to create a button for any of the social networks that we have built into the control.

If we go ahead and add a social button we can see that in the properties window to the right we have a lot of items that we can define, but the most important is the SocialNetType property. This defines which social network we want to link to. Clicking within this property gives us a dropdown that allows us to select which network we want:

Here we could, for example, select Reddit. You might have noticed that the ToolTip property automatically changes depending on your choice. Additionally you can define the TitleToShare and UrlToShare properties. These can be set on a button-by-button basis, for the entire control, or not set at all. If these properties are not set then the URL and title of the page where the RadSocialShare control resides in will be shared. If these are set on the control itself (not for the individual buttons) the URL and title will be the same across all buttons. Finally, if a button has these defined then these will take precedence (even when the main control’s properties have been set).

Now we could also use one of the specific social network buttons. If we select Facebook for example, we are given a more limited set of properties to work with. SocialNetType has also been replaced by the ButtonType property and we have FacebookShare, FacebookLike, FacebookSend, and FacebookRecommend. Each of these have unique look and feel, but are pretty self-explanatory. The other buttons, Twitter and Google+, have an even smaller set of properties, but TitleToShare and UrlToShare are still there.

Let’s talk about the Compact buttons option from the red box in the image above. In this view we only have the ability to add or remove buttons. The buttons that we add here are the same as the general buttons, so we just have to define the SocialNetType property. Now an important thing to note is that once you have added buttons here you have to add a CompactButton to your Main buttons collection, otherwise the list of compact buttons does not appear to the end user.

Now when the user clicks on the compact button icon () a RadWindow appears with the full list of compact buttons that we created.

This list could theoretically be large, since there are a lot of networks available and you could have different options (URL, Title etc.) for the same social network. Luckily the textbox above the list of sharing options acts as a filter which narrows down the list of options as you type.

Where’s the Code?

How does all of this look in the code view? Well, here is some quick sample code which shows some markup that covers the scenarios we discussed above:

As we can see, we have the CompactButtons collection with a list of RadSocialButtons each with a SocialNetType defined. If you’re worried about the spelling of these properties you do not need to worry, intellisense lists all of the available options for us!

We also have a MainButtons collection which can contain RadSocialButtons as well as the specific button types that we have. I only used RadFacebookButton here, but RadTwitterButton and RadGoogleButton also exist. Finally, we added the RadCompactButton to allow for the RadWindow popup with all of our CompactButtons.

Share Away

So there we have it, a quick look at Telerik’s ASP.NET AJAX control – RadSocialShare. I know you’re all extremely excited to implement this all in your ASP.NET AJAX applications right away, but before you go I want to give you some useful links to help you along the way :)

• RadSocialShare Demos
• RadSocialShare Documentation
• RadSocialShare Forums

That should just about do it! Do you have any comments or suggestions regarding this new ASP.NET AJAX control? Feel free to share them in the comment section below!