New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Client-side API

RadSocialShare provides the ability to dynamically change the strings you want to share (url and title) by using javascript. This gives the ability to use only one RadSocialShare instance to share different urls based on your custom logic. To do so, you should simply call its client method set_stringsToShare(url, title). Both the parameters are optional and if not provided - the old value is used. Once you call this method, the changes are automatically applied and counters of third party standard buttons are updated.

The same method is available in the arguments object of the OnSocialButtonClicking event which allows changing the strings for a separate custom button.

Change the item in the rotator and see that new url and title to share are dynamically set to the RadSocialShare instance and changes are immediately reflected in the buttons' counters.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
  • styles.css
<%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.SocialShare.ClientSideAPI.DefaultCS" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" type="text/css" />
    <script src="scripts.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container size-wide">
        <script type="text/javascript">
            //<![CDATA[
            function previewWindow() {
                return $find("<%=previewWindow.ClientID %>");
            }

            function getSocialShare() {
                return $find("<%=RadSocialShare1.ClientID %>");
            }
        //]]>
        </script>
        <div style="float: left; padding-left: 30px">
            <telerik:RadRotator RenderMode="Lightweight" runat="server" ID="itemsRotator" ItemWidth="286" Width="346"
                Height="149" RotatorType="Buttons" CssClass="rotatorCSS" OnClientItemShown="OnClientItemShown"
                WrapFrames="false" Skin="Silk">
                <Items>
                    <telerik:RadRotatorItem>
                        <ItemTemplate>
                            <asp:Image ID="Image1" runat="server" ImageUrl="~/SocialShare/Examples/ClientSideAPI/images/Kendo_UI.png"
                                AlternateText="Kendo UI"></asp:Image>
                            <asp:HiddenField ID="hidden1" runat="server" Value="https://www.kendoui.com/web.aspx"></asp:HiddenField>
                        </ItemTemplate>
                    </telerik:RadRotatorItem>
                    <telerik:RadRotatorItem>
                        <ItemTemplate>
                            <asp:Image ID="Image2" runat="server" ImageUrl="~/SocialShare/Examples/ClientSideAPI/images/Sitefinity_CMS.png"
                                AlternateText="Sitefinity CMS"></asp:Image>
                            <asp:HiddenField ID="hidden2" runat="server" Value="https://www.sitefinity.com/"></asp:HiddenField>
                        </ItemTemplate>
                    </telerik:RadRotatorItem>
                    <telerik:RadRotatorItem>
                        <ItemTemplate>
                            <asp:Image ID="Image3" runat="server" ImageUrl="~/SocialShare/Examples/ClientSideAPI/images/Test_Studio.png"
                                AlternateText="Test Studio"></asp:Image>
                            <asp:HiddenField ID="hidden3" runat="server" Value="https://www.telerik.com/automated-testing-tools.aspx"></asp:HiddenField>
                        </ItemTemplate>
                    </telerik:RadRotatorItem>
                    <telerik:RadRotatorItem>
                        <ItemTemplate>
                            <asp:Image ID="Image4" runat="server" ImageUrl="~/SocialShare/Examples/ClientSideAPI/images/TeamPulse.png"
                                AlternateText="TeamPulse"></asp:Image>
                            <asp:HiddenField ID="hidden4" runat="server" Value="https://www.telerik.com/agile-project-management-tools.aspx"></asp:HiddenField>
                        </ItemTemplate>
                    </telerik:RadRotatorItem>
                </Items>
            </telerik:RadRotator>
            <br />
            <br />
            <telerik:RadSocialShare RenderMode="Lightweight" Skin="Silk" ID="RadSocialShare1" runat="server" Width="300" UrlToShare="https://www.kendoui.com/web.aspx"
                TitleToShare="Check this out: Kendo UI">
                <MainButtons>
                    <telerik:RadSocialButton SocialNetType="ShareOnFacebook"></telerik:RadSocialButton>
                    <telerik:RadSocialButton SocialNetType="ShareOnTwitter"></telerik:RadSocialButton>
                    <telerik:RadSocialButton SocialNetType="ShareOnPinterest" UrlToShare="https://demos.telerik.com/aspnet-ajax/SocialShare/Examples/ClientSideAPI/images/Kendo_UI.png"
                        TitleToShare="Check this out: Kendo UI"></telerik:RadSocialButton>
                    <telerik:RadSocialButton SocialNetType="ShareOnYammer"></telerik:RadSocialButton>
                    <telerik:RadSocialButton SocialNetType="Blogger"></telerik:RadSocialButton>
                    <telerik:RadSocialButton SocialNetType="Delicious"></telerik:RadSocialButton>
                    <telerik:RadSocialButton SocialNetType="Digg"></telerik:RadSocialButton>
                    <telerik:RadSocialButton SocialNetType="GoogleBookmarks"></telerik:RadSocialButton>
                    <telerik:RadSocialButton SocialNetType="ShareOnGooglePlus"></telerik:RadSocialButton>
                    <telerik:RadSocialButton SocialNetType="LinkedIn"></telerik:RadSocialButton>
                    <telerik:RadSocialButton SocialNetType="MySpace"></telerik:RadSocialButton>
                    <telerik:RadSocialButton SocialNetType="Reddit"></telerik:RadSocialButton>
                    <telerik:RadSocialButton SocialNetType="StumbleUpon"></telerik:RadSocialButton>
                    <telerik:RadSocialButton SocialNetType="Tumblr"></telerik:RadSocialButton>
                    <telerik:RadSocialButton SocialNetType="MailTo"></telerik:RadSocialButton>
                    <telerik:RadTwitterButton CounterMode="Horizontal"></telerik:RadTwitterButton>
                    <telerik:RadLinkedInButton CounterMode="Horizontal" ShowZeroCount="true"></telerik:RadLinkedInButton>
                    <telerik:RadGoogleButton AnnotationType="Bubble" ButtonSize="Medium"></telerik:RadGoogleButton>
                    <telerik:RadFacebookButton ButtonType="FacebookLike" ButtonLayout="ButtonCount"></telerik:RadFacebookButton>
                    <telerik:RadFacebookButton ButtonType="FacebookSend"></telerik:RadFacebookButton>
                </MainButtons>
            </telerik:RadSocialShare>
        </div>
        <div style="clear: both">
        </div>
        <telerik:RadWindow RenderMode="Lightweight" Skin="Silk" ID="previewWindow" runat="server" Title="Preview: Kendo UI" VisibleOnPageLoad="true"
            VisibleStatusbar="false" EnableShadow="true" Left="450" Behaviors="Maximize, Move"
            Top="0" ShowContentDuringLoad="false" NavigateUrl="https://www.telerik.com/kendo-ui">
        </telerik:RadWindow>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance