SocialShare

Controls

All Controls

SocialShare

Rate this demo

Thank you for your post!
Submit a support ticket
If you have an active license or trial, you have access to dedicated support from Telerik’s developers. Response time is 24h for active licenses and 72h for trials, Mon-Fri.
Post in the forums
If you don’t have access to support or would like to help other people by sharing your problem, reach out to our active community in the forums.

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>