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

Standard third party buttons

Combined Like with Send button:



Buttons with counters:



Pinterest Pinit and Follow buttons:



Pinterest PinPageImage button:



Yammer standard buttons:

telerik logo telerik logo telerik logo

The RadSocialShare control allows usage and easy configuration of standard third - party buttons such as Facebook Like/Send/Recommend, Yammer Like/Follow, Pinterest PinIt/Follow/PinPageImage, Twitter Tweet, Google+1 and LinkedIn button. You can render them by using their corresponding classes such as RadFacebookButton, RadTwitterButton, RadYammerButton, RadPinterestButton, RadGoogleButton and RadLinkedInButton. Some of these buttons can be set through SocialNetType property (i.e. values which are different from the styled buttons enumerator - FacebookLike, FacebookRecommend, Yammer (Like button), GooglePlusOne, LinkedInShare and Twitter).

Note: To have Yammer buttons working you should set the global property of RadSocialShare - YammerAppId (it can be obtained from https://www.yammer.com/client_applications) along with YammerNetwork (your network permalink) property of the RadYammerButton. More information about getting the APP-ID and the network permalink is available at http://developer.yammer.com/connect/

Note: To have Facebook buttons working correctly under older Internet Explorer browsers and to get a consistent behavior you should add the following xmlns namespace to your <html> tag:
xmlns:fb="http://ogp.me/ns/fb#"

For Telerik UI versions prior Q3 2014 release you must use the following tag: xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://opengraphprotocol.org/schema/"

This will instruct the browser how to correctly parse the content related to Facebook. Make sure you put it after the default xmlns in order to pass XHTML validation.

Note: The images the Pinterst bookmarklet can pick up must have dimensions equal to 201x201 pixels, regardless of the actual size of the image.

  • DefaultCS.aspx
  • styles.css
<%@ Page Language="C#"  %>

<%@ 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" />
</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">
        <h2>Combined Like with Send button:</h2>
        <telerik:RadSocialShare RenderMode="Lightweight" ID="RadSocialShare1" runat="server" UrlToShare="http://www.telerik.com"
            TitleToShare=".NET UI Controls, Reporting, Visual Studio Tools, Agile Project Management, Automated Testing, ASP.NET Web CMS by Telerik"
            Width="300">
            <MainButtons>
                <telerik:RadFacebookButton ButtonType="FacebookLike" ButtonLayout="Standard" Width="300"
                    ShowFaces="false"></telerik:RadFacebookButton>
                <telerik:RadFacebookButton ButtonType="FacebookSend"></telerik:RadFacebookButton>
            </MainButtons>
        </telerik:RadSocialShare>
        <br />
        <br />
        <h2>Buttons with counters:</h2>

        <telerik:RadSocialShare RenderMode="Lightweight" ID="RadSocialShare2" runat="server" UrlToShare="http://www.telerik.com"
            TitleToShare=".NET UI Controls, Reporting, Visual Studio Tools, Agile Project Management, Automated Testing, ASP.NET Web CMS by Telerik"
            Width="520">
            <MainButtons>
                <telerik:RadPinterestButton UrlToShare="http://demos.telerik.com/aspnet-ajax/Common/Images/SiteNav/telerik-logo.png"
                    FromUrl="http://www.google.com" TitleToShare="Telerik - Best in Biz Awards 2013 EMEA"
                    CounterMode="Horizontal" />
                <telerik:RadLinkedInButton CounterMode="Horizontal" ShowZeroCount="true"></telerik:RadLinkedInButton>
                <telerik:RadFacebookButton ButtonType="FacebookRecommend" ButtonLayout="ButtonCount"></telerik:RadFacebookButton>
                <telerik:RadTwitterButton CounterMode="Horizontal"></telerik:RadTwitterButton>
                <telerik:RadGoogleButton AnnotationType="Bubble" ButtonSize="Medium"></telerik:RadGoogleButton>
            </MainButtons>
        </telerik:RadSocialShare>
        <br />
        <br />
        <h2>Pinterest Pinit and Follow buttons:</h2>
        <telerik:RadSocialShare RenderMode="Lightweight" ID="RadSocialShare3" runat="server" Width="110">
            <MainButtons>
                <telerik:RadPinterestButton ButtonType="PinIt" UrlToShare="http://demos.telerik.com/aspnet-ajax/Common/Images/SiteNav/telerik-logo.png"
                    TitleToShare=".NET UI Controls, Reporting, Visual Studio Tools, Agile Project Management, Automated Testing, ASP.NET Web CMS by Telerik"
                    FromUrl="http://www.telerik.com" />
                <telerik:RadPinterestButton ButtonType="Follow" UrlToShare="http://pinterest.com/telerik" />
            </MainButtons>
        </telerik:RadSocialShare>
        <br />
        <br />
        <h2>Pinterest PinPageImage button:</h2>
        <telerik:RadSocialShare RenderMode="Lightweight" ID="RadSocialShare5" runat="server" Width="50">
            <MainButtons>
                <telerik:RadPinterestButton ButtonType="PinPageImage" />
            </MainButtons>
        </telerik:RadSocialShare>
        <br />
        <br />
        <h2>Yammer standard buttons:</h2>
        <telerik:RadSocialShare RenderMode="Lightweight" ID="RadSocialShare4" runat="server" UrlToShare="http://www.telerik.com"
            YammerAppId="MY-APP-ID" TitleToShare=".NET UI Controls, Reporting, Visual Studio Tools, Agile Project Management, Automated Testing, ASP.NET Web CMS by Telerik">
            <MainButtons>
                <telerik:RadYammerButton ButtonType="Follow" YammerNetwork="MyNetworkURL" />
                <telerik:RadYammerButton ButtonType="Like" YammerNetwork="MyNetworkURL" />
            </MainButtons>
        </telerik:RadSocialShare>
        <%--Hidden images on the page that the PinPageImage button can pick up
    Their width and height must be 201x201 px--%>
        <img alt="telerik logo" style="position: absolute; top: -10000px; left: -10000px; width: 201px; height: 201px"
            src="http://demos.telerik.com/aspnet-ajax/socialshare/examples/ClientSideAPI/images/Kendo_UI.png" />
        <img alt="telerik logo" style="position: absolute; top: -10000px; left: -10000px; width: 201px; height: 201px"
            src="http://demos.telerik.com/aspnet-ajax/socialshare/examples/ClientSideAPI/images/Sitefinity_CMS.png" />
        <img alt="telerik logo" style="position: absolute; top: -10000px; left: -10000px; width: 201px; height: 201px"
            src="http://demos.telerik.com/aspnet-ajax/socialshare/examples/ClientSideAPI/images/TeamPulse.png" />
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance