Make Your Website Content Shareable with Social Media Sharing Buttons

In this blog post, learn how to integrate and style social media sharing buttons in your Sitefinity CMS website content.

It took social media a little more than a decade to establish itself as one of the most impactful and powerful tools in attracting audiences, bringing website traffic, and making your voice and brand heard. Nowadays, it is of key importance that your content is not only read but also shared via social media by your visitors to an even wider audience. By integrating social media sharing buttons into your site’s content, you make sharing content by your visitors simple.

In this blog post, you will learn how to do exactly that—integrate social media sharing buttons into your Sitefinity CMS website content. These sharing buttons do not use JavaScript, which means they load blazing fast and do not block your website from rendering. Since you want to be flexible in deciding which buttons you use for which content, you simply add a different set of sharing buttons to the widget templates for specific types of content, whether it's content of a built-in or a dynamic module.

Say you are writing a blog with posts relating strictly to your professional experience. You want to have your content shared just on LinkedIn and Twitter, so you add these options on the Blog post widget template. In addition, you want to customize the appearance and behavior of these buttons—for example, upon clicking the button, you want visitors to see a specific image or the logo of your company. It is all up to you.

In the following sections, you will learn how to do just that—create social media sharing buttons and add them to the template that all MVC Blog post widgets will use.

Create the Buttons

First things first. To create the desired buttons, you use the sharingbuttons.io generator. All you need is the URL and the title of content you want shared because this information is displayed to visitors once the content, like a blog post, is shared.

Hey, wait. This is not going to work for all your blog posts. So, let’s make things more dynamic.

To automatically populate the title and URL of any post upon sharing, you need to use relevant URL and text placeholders in the MVC Blog post widget template code. These placeholders need to be easily identifiable and dynamically replaced via HTML code logic with the actual blog post data. For example, you can use the following placeholders:

• Url: urlToBeReplaced
• Title: titleToBeReplaced

<!-- Sharingbutton Twitter -->
<a class="resp-sharing-button__link" href="https://twitter.com/intent/tweet/?text=titleToBeReplaced&amp;url=urlToBeReplaced" target="_blank" aria-label="">
    <div class="resp-sharing-button resp-sharing-button--twitter resp-sharing-button--small">
        <div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                <path d="M23.44 4.83c-.8.37-1.5.38-2.22.02.93-.56.98-.96 1.32-2.02-.88.52-1.86.9-2.9 1.1-.82-.88-2-1.43-3.3-1.43-2.5 0-4.55 2.04-4.55 4.54 0 .36.03.7.1 1.04-3.77-.2-7.12-2-9.36-4.75-.4.67-.6 1.45-.6 2.3 0 1.56.8 2.95 2 3.77-.74-.03-1.44-.23-2.05-.57v.06c0 2.2 1.56 4.03 3.64 4.44-.67.2-1.37.2-2.06.08.58 1.8 2.26 3.12 4.25 3.16C5.78 18.1 3.37 18.74 1 18.46c2 1.3 4.4 2.04 6.97 2.04 8.35 0 12.92-6.92 12.92-12.93 0-.2 0-.4-.02-.6.9-.63 1.96-1.22 2.56-2.14z"/>
            </svg>
        </div>
    </div>
</a>

Place the HTML Code in the Widget Template

Next, you enhance the Detail view of the Blog post widget template with the HTML code generated in sharingbuttons.io. Simply duplicate the existing Detail.DetailPage.cshtml file, located in ~/ResourcePackages/Bootstrap4/MVC/Views/BlogPost and rename the new file in accordance with the MVC naming conventions. For example, name the duplicated file Detail.DetailPageSocialShare.cshtml.

Time to make the magic and put the logic that will dynamically replace the hardcoded URL and title of blog posts:

• urlToBeReplaced => @Model.Item.DefaultUrl
• titleToBereplaced => @Model.Item.Fields.Title

@model Telerik.Sitefinity.Frontend.Mvc.Models.ContentDetailsViewModel 

@using Telerik.Sitefinity;
@using Telerik.Sitefinity.Frontend.Mvc.Helpers;
@using Telerik.Sitefinity.Web.DataResolving; 

<div class="@Model.CssClass" @Html.InlineEditingAttributes(Model.ProviderName, Model.ContentType.FullName, (Guid)Model.Item.Fields.Id)>
  <h3>
    <span @Html.InlineEditingFieldAttributes("Title", "ShortText")>@Model.Item.Fields.Title</span>
  </h3>
  <div>
    @Model.Item.GetDateTime("PublicationDate", "MMM d, yyyy, HH:mm tt")
    @Html.Resource("By")
    @DataResolver.Resolve(@Model.Item.DataItem, "Author", null)
    @Html.CommentsCount(string.Empty, @Model.Item.DataItem)
  </div>
  <div class="row mt-5">
    <div class="col-2 pr-social-share">
      <!-- Sharingbutton Facebook -->
      <a class="resp-sharing-button__link" href="https://facebook.com/sharer/sharer.php?u=@Model.Item.DefaultUrl" target="_blank" aria-label="">
        <div class="resp-sharing-button resp-sharing-button--facebook resp-sharing-button--small">
          <div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
              <path d="M18.77 7.46H14.5v-1.9c0-.9.6-1.1 1-1.1h3V.5h-4.33C10.24.5 9.5 3.44 9.5 5.32v2.15h-3v4h3v12h5v-12h3.85l.42-4z"/>
            </svg>
          </div>
        </div>
      </a>
      <!-- Sharingbutton Twitter -->
      <a class="resp-sharing-button__link" href="https://twitter.com/intent/tweet/?text=@Model.Item.Fields.Title&amp;url=@Model.Item.DefaultUrl" target="_blank" aria-label="">
        <div class="resp-sharing-button resp-sharing-button--twitter resp-sharing-button--small">
          <div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
              <path d="M23.44 4.83c-.8.37-1.5.38-2.22.02.93-.56.98-.96 1.32-2.02-.88.52-1.86.9-2.9 1.1-.82-.88-2-1.43-3.3-1.43-2.5 0-4.55 2.04-4.55 4.54 0 .36.03.7.1 1.04-3.77-.2-7.12-2-9.36-4.75-.4.67-.6 1.45-.6 2.3 0 1.56.8 2.95 2 3.77-.74-.03-1.44-.23-2.05-.57v.06c0 2.2 1.56 4.03 3.64 4.44-.67.2-1.37.2-2.06.08.58 1.8 2.26 3.12 4.25 3.16C5.78 18.1 3.37 18.74 1 18.46c2 1.3 4.4 2.04 6.97 2.04 8.35 0 12.92-6.92 12.92-12.93 0-.2 0-.4-.02-.6.9-.63 1.96-1.22 2.56-2.14z"/>
            </svg>
          </div>
        </div>
      </a>
      <!-- Sharingbutton Google+ -->
      <a class="resp-sharing-button__link" href="https://plus.google.com/share?url=@Model.Item.DefaultUrl" target="_blank" aria-label="">
        <div class="resp-sharing-button resp-sharing-button--google resp-sharing-button--small">
          <div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
              <path d="M11.37 12.93c-.73-.52-1.4-1.27-1.4-1.5 0-.43.03-.63.98-1.37 1.23-.97 1.9-2.23 1.9-3.57 0-1.22-.36-2.3-1-3.05h.5c.1 0 .2-.04.28-.1l1.36-.98c.16-.12.23-.34.17-.54-.07-.2-.25-.33-.46-.33H7.6c-.66 0-1.34.12-2 .35-2.23.76-3.78 2.66-3.78 4.6 0 2.76 2.13 4.85 5 4.9-.07.23-.1.45-.1.66 0 .43.1.83.33 1.22h-.08c-2.72 0-5.17 1.34-6.1 3.32-.25.52-.37 1.04-.37 1.56 0 .5.13.98.38 1.44.6 1.04 1.84 1.86 3.55 2.28.87.23 1.82.34 2.8.34.88 0 1.7-.1 2.5-.34 2.4-.7 3.97-2.48 3.97-4.54 0-1.97-.63-3.15-2.33-4.35zm-7.7 4.5c0-1.42 1.8-2.68 3.9-2.68h.05c.45 0 .9.07 1.3.2l.42.28c.96.66 1.6 1.1 1.77 1.8.05.16.07.33.07.5 0 1.8-1.33 2.7-3.96 2.7-1.98 0-3.54-1.23-3.54-2.8zM5.54 3.9c.33-.38.75-.58 1.23-.58h.05c1.35.05 2.64 1.55 2.88 3.35.14 1.02-.08 1.97-.6 2.55-.32.37-.74.56-1.23.56h-.03c-1.32-.04-2.63-1.6-2.87-3.4-.13-1 .08-1.92.58-2.5zM23.5 9.5h-3v-3h-2v3h-3v2h3v3h2v-3h3"/>
            </svg>
          </div>
        </div>
      </a>
      <!-- Sharingbutton LinkedIn -->
      <a class="resp-sharing-button__link" href="https://www.linkedin.com/shareArticle?mini=true&amp;url=@Model.Item.DefaultUrl&amp;title=@Model.Item.Fields.Title&amp;summary=@Model.Item.Fields.Title&amp;source=@Model.Item.DefaultUrl" target="_blank" aria-label="">
        <div class="resp-sharing-button resp-sharing-button--linkedin resp-sharing-button--small">
          <div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
              <path d="M6.5 21.5h-5v-13h5v13zM4 6.5C2.5 6.5 1.5 5.3 1.5 4s1-2.4 2.5-2.4c1.6 0 2.5 1 2.6 2.5 0 1.4-1 2.5-2.6 2.5zm11.5 6c-1 0-2 1-2 2v7h-5v-13h5V10s1.6-1.5 4-1.5c3 0 5 2.2 5 6.3v6.7h-5v-7c0-1-1-2-2-2z"/>
            </svg>
          </div>
        </div>
      </a>
    </div>
    <div class="col-10" @Html.InlineEditingFieldAttributes("Content", "LongText")>@Html.HtmlSanitize((string)Model.Item.Fields.Content)</div>
  </div>
  @Html.CommentsList(@Model.Item.DataItem)
</div>

Et voilà!

Style the Social Media Sharing Buttons

Let’s style those buttons and make them look good. To do so, copy the style code generated by sharingbuttons.io and paste it in your project. It is always wise to follow best practices, so in the example below, the project file structure follows the guidelines set in the GitHub Bootstrap 4 overview and looks similar to this:

You need to have a file dedicated to the styling of the social sharing buttons, say _social-share.scss. Import this file in the main.scss and then get on with it—make all the changes you find fit and build the assets as described in this useful Bootstrap 4 doc. As an expected result, you get what you wanted in the first place—social sharing buttons that work and have the right look.

Final Touches—the Extras

Last but not least—make it fancy! A picture speaks more than a thousand words but a thumbnail with text, even more so! So, to enrich your shareable content to display a thumbnail, all you need to do is add a custom field to your content, in this case – to blog posts. Simply go to Sitefinity CMS backend and add Social Media (OpenGraph) custom field to the Blog post content type. For more details, check out the Sitefinity CMS docs:

• Create custom fields
• Open Graph settings
  

Once you create the custom field, you will see it directly in the content editor when you are writing your blog post. Add a pic as a thumbnail and you are done!

That’s all folks, enjoy and spread the news on the sharing buttons! Sorry, I mean share the news.

If you're new to Sitefinity CMS, you can learn more about it here, or just dive right into a free 30 day trial today.

We have designed a free course to help developers who have little to no experience in developing against Sitefinity to get up to speed. Sign up here, it's free.