SocialShare

Overview
Functionality
Appearance/Styling
- Custom Icons
Accessibility and Internationalization
Client-Side API
- Client-side API
- Client-side events
Server-Side API
- Server-Side API
Application Scenarios
- PopUp Share Bar

Rate this demo

Thank you for your post!

SocialShare - Custom Icons

This RadSocialShare instance uses a sprite for the images and the width, height, background image and position are all set through the RadSocialButton CssClass property.

This RadSocialShare instance uses separate icons and every button has its CustomIconWidth, CustomIconHeight and CustomIconUrl properties configured. The buttons in this case can have different size set.

This RadSocialShare instance uses separate icons and the width and height for all buttons is set through CSS. The icon for every button is set through the CustomIconUrl property.

Setting custom icons for RadSocialShare

The RadSocialShare allows easy customization of the built-in, styled RadSocialButtons (the standard buttons as Like, Send, GooglePlusOne, etc have their own appearance generated through the corresponding third party scripts).

This demo shows different approaches on how to use custom styling through properties, sprite, separate images, CSS, etc, depending on the exact scenario, goal and preferences.

C# VB

Show code in new window Demo isolation steps

<%@ Page Language="C#"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
    <title>ASP.NET SocialShare Demo - Custom Icons</title>
     <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
     <link href="Images/sshCircleCustomIcons.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadFormDecorator ID="QsfFromDecorator" runat="server" DecoratedControls="All" EnableRoundedCorners="false" />
     <div>
          <div class="textWrapper">
               This <strong>RadSocialShare</strong> instance uses a sprite for the images and the
               width, height, background image and position are all set through the <strong>RadSocialButton
                    CssClass</strong> property.
          </div>
          <telerik:RadSocialShare ID="RadSocialShare3" runat="server">
               <MainButtons>
                    <telerik:RadSocialButton SocialNetType="ShareOnFacebook" CssClass="sshCustomCircleFB">
                    </telerik:RadSocialButton>
                    <telerik:RadSocialButton SocialNetType="ShareOnTwitter" CssClass="sshCustomCircleTwitter">
                    </telerik:RadSocialButton>
                    <telerik:RadSocialButton SocialNetType="LinkedIn" CssClass="sshCustomCircleLinkdedIn">
                    </telerik:RadSocialButton>
                    <telerik:RadSocialButton SocialNetType="Blogger" CssClass="sshCustomCircleBlogger">
                    </telerik:RadSocialButton>
                    <telerik:RadSocialButton SocialNetType="StumbleUpon" CssClass="sshCustomCircleStumble">
                    </telerik:RadSocialButton>
                    <telerik:RadSocialButton SocialNetType="MySpace" CssClass="sshCustomCircleMySpace">
                    </telerik:RadSocialButton>
               </MainButtons>
          </telerik:RadSocialShare>
          <div class="textWrapper">
               This <strong>RadSocialShare</strong> instance uses separate icons and every button
               has its <strong>CustomIconWidth</strong>, <strong>CustomIconHeight</strong> and
               <strong>CustomIconUrl</strong> properties configured. The buttons in this case can
               have different size set.
          </div>
          <telerik:RadSocialShare ID="RadSocialShare1" runat="server" CssClass="TransWrapper">
               <MainButtons>
                    <telerik:RadSocialButton SocialNetType="ShareOnFacebook" CustomIconWidth="32" CustomIconHeight="32"
                         CustomIconUrl="Images/Trans/FaceBook.png"></telerik:RadSocialButton>
                    <telerik:RadSocialButton SocialNetType="ShareOnTwitter" CustomIconWidth="32" CustomIconHeight="32"
                         CustomIconUrl="Images/Trans/Twitter.png"></telerik:RadSocialButton>
                    <telerik:RadSocialButton SocialNetType="LinkedIn" CustomIconWidth="32" CustomIconHeight="32"
                         CustomIconUrl="Images/Trans/LinkedIn.png"></telerik:RadSocialButton>
                    <telerik:RadSocialButton SocialNetType="Blogger" CustomIconWidth="32" CustomIconHeight="32"
                         CustomIconUrl="Images/Trans/Blogger.png"></telerik:RadSocialButton>
                    <telerik:RadSocialButton SocialNetType="StumbleUpon" CustomIconWidth="32" CustomIconHeight="32"
                         CustomIconUrl="Images/Trans/Stumble.png"></telerik:RadSocialButton>
                    <telerik:RadSocialButton SocialNetType="MySpace" CustomIconWidth="32" CustomIconHeight="32"
                         CustomIconUrl="Images/Trans/MySpace.png"></telerik:RadSocialButton>
               </MainButtons>
          </telerik:RadSocialShare>
          <div class="textWrapper">
               This <strong>RadSocialShare</strong> instance uses separate icons and the width
               and height for all buttons is set through CSS. The icon for every button is set
               through the <strong>CustomIconUrl</strong> property.</div>
          <telerik:RadSocialShare ID="RadSocialShare2" runat="server" CssClass="WoodWrapper">
               <MainButtons>
                    <telerik:RadSocialButton SocialNetType="ShareOnFacebook" CustomIconUrl="Images/Wood/FaceBook.png">
                    </telerik:RadSocialButton>
                    <telerik:RadSocialButton SocialNetType="ShareOnTwitter" CustomIconUrl="Images/Wood/Twitter.png">
                    </telerik:RadSocialButton>
                    <telerik:RadSocialButton SocialNetType="LinkedIn" CustomIconUrl="Images/Wood/LinkedIn.png">
                    </telerik:RadSocialButton>
                    <telerik:RadSocialButton SocialNetType="Blogger" CustomIconUrl="Images/Wood/Blogger.png">
                    </telerik:RadSocialButton>
                    <telerik:RadSocialButton SocialNetType="StumbleUpon" CustomIconUrl="Images/Wood/Stumble.png">
                    </telerik:RadSocialButton>
                    <telerik:RadSocialButton SocialNetType="MySpace" CustomIconUrl="Images/Wood/MySpace.png">
                    </telerik:RadSocialButton>
               </MainButtons>
          </telerik:RadSocialShare>
          <br />
     </div>
    </form>
</body>
</html>

Controls

SharePoint Web Parts

Support Resources

Integration Examples

SocialShare

Rate this demo

SocialShare - Custom Icons

try now Download a free 30-day trial with unlimited technical support.

Get Started Easily Explore our help resources to get up to speed with the RadControls faster.

See Pricing Check out the offers. Purchase an individual suite or treat yourself to one of our bundles.