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 - Client-side API

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.

RadSocialShare 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.

C# VB
Show code in new window Demo isolation steps
<%@ 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 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 runat="server">
    <title>ASP.NET SocialShare Demo - Client-side API</title>
     <link href="StyleSheet.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" />
     <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="RadioButtons">
     </telerik:RadFormDecorator>
     <script type="text/javascript">
        //<![CDATA[
          function OnClientItemShown(sender, args) {
               var oWnd = $find("<%=previewWindow.ClientID %>");
               if (!oWnd) return;
               var ssh = $find("<%=RadSocialShare1.ClientID %>");
               var item = args.get_item();
               var hiddenID = item.get_element().firstChild.id + "_hidden" + parseInt(item.get_index() + 1);
               var url = $get(hiddenID).value;
               var imgSrc = $get(item.get_element().firstChild.id + "_Image" + parseInt(item.get_index() + 1)).src;
               var title = imgSrc.substring(imgSrc.lastIndexOf("/") + 1).replace(".png", "").replace("_", " ");
               oWnd.setUrl(url);
               oWnd.set_title("Preview: " + title);
               ssh.set_stringsToShare(url, "Check this out: " + title);

               //Set Image to share for the Pinterest
               for (var i = 0; i < ssh.get_mainButtons().length; i++) {
                    if (ssh.get_mainButtons()[i][0] == "ShareOnPinterest") {
                         var relativeAddress = imgSrc.substring(0, imgSrc.lastIndexOf("/socialshare/examples"));
                         var absoluteAddress = imgSrc.replace(relativeAddress, "http://demos.telerik.com/aspnet-ajax");
                         ssh.get_mainButtons()[i][1] = encodeURIComponent(absoluteAddress);
                    }
               }
          }
        //]]>
     </script>
     <div style="float: left; padding-left: 30px">
          <telerik:RadRotator runat="server" ID="itemsRotator" ItemWidth="286" Width="342"
               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="http://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="http://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="http://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="http://www.telerik.com/agile-project-management-tools.aspx">
                              </asp:HiddenField>
                         </ItemTemplate>
                    </telerik:RadRotatorItem>
               </Items>
          </telerik:RadRotator>
          <br />
          <br />
          <telerik:RadSocialShare ID="RadSocialShare1" runat="server" Width="300" UrlToShare="http://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="http://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="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 ID="previewWindow" runat="server" Title="Preview: Kendo UI" VisibleOnPageLoad="true"
          VisibleStatusbar="false" EnableShadow="true" Left="450" Behaviors="Maximize, Move"
          Top="0" ShowContentDuringLoad="false" NavigateUrl="http://www.kendoui.com/web.aspx">
     </telerik:RadWindow>
    </form>
</body>
</html>
Telerik UI for ASP.NET AJAX Q3'14 Release is here