Jump to main content

Piranha block for social media links

2021-08-03 Piranha
Most businesses and even personal sites have the need to share their social media links. Here's an example on how you can turn your social media links into a reusable block

Most businesses and even personal sites have the need to share their social media links. Here's an example on how you can turn your social media links into a reusable block. This example will require you to have Bootstrap and FontAwesome installed on the site. You could easily change the Enum extension class to return strings for other icon libraries as well.

SocialLinkType.cs - Create an Enum and a static extension class to help with selecting FontAwesome icons
public enum SocialLinkType

public static class SocialLinkTypeExtension
    public static string ToCss(this SocialLinkType media)
        switch (media)
            case SocialLinkType.Facebook:
                return "fab fa-facebook-f";
            case SocialLinkType.Linkedin:
                return "fab fa-linkedin-in";
            case SocialLinkType.Twitter:
                return "fab fa-twitter";
            case SocialLinkType.Instagram:
                return "fab fa-instagram";
            case SocialLinkType.Youtube:
                return "fab fa-youtube";
            case SocialLinkType.Github:
                return "fab fa-github";
                return string.Empty;
SocialLinksBlock.cs - Group/Parent block
[BlockGroupType(Name = "Social links", Category = "Social media", Icon = "fas fa-hashtag", IsGeneric = true)]
[BlockItemType(Type = typeof(SocialLinksItemBlock))]
public class SocialLinksBlock : BlockGroup
    [Field(Title = "Title")]
    public StringField Title { get; set; }
SocialLinksItemBlock.cs - Child block
[BlockType(Name = "Social link ", Category = "Social media", Icon = "fas fa-hashtag", IsGeneric = true, IsUnlisted = true)]
public class SocialLinksItemBlock : Block
    [Field(Title = "Title")]
    public StringField Title { get; set; }

    [Field(Title = "Social media link", Options = Piranha.Models.FieldOption.HalfWidth)]
    public StringField Link { get; set; }

    [Field(Title = "Social media type", Options = Piranha.Models.FieldOption.HalfWidth)]
    public SelectField<SocialLinkType> SocialLinkType { get; set; }

    public override string GetTitle()
        return string.IsNullOrWhiteSpace(this.Title.Value) ? "N/A" : this.Title.Value;
SocialLinksBlock.cshtml - The view for your block
@model SocialLinksBlock

<section class="container block block-social-links">
    <h2 class="text-center mb-5">@Model.Title</h2>
    <ul class="d-flex justify-content-between justify-content-md-around">
        @foreach (SocialLinksItemBlock item in Model.Items.Cast<SocialLinksItemBlock>())
                <a href="@item.Link.Value">
                    <i class="@SocialLinkTypeExtension.ToCss(item.SocialLinkType.Value) icon mx-auto"></i>
And finallly some CSS to give our block some styling
.block-social-links ul {
    list-style: none;
    padding: 0;
    margin: 0;

.block-social-links ul li a {
    text-decoration: none;
    text-align: center;
    color: #000;

.block-social-links ul li a:hover span {
    text-decoration: underline;

.block-social-links ul li a:hover .icon {
    background: #777;

.block-social-links ul li .icon,
.block-social-links ul li span {
    display: block;

.block-social-links ul li .icon {
    color: #fff;
    background: #444;
    width: 2rem;
    height: 2rem;
    padding: 0.5rem;
    border-radius: 100%;

And dont forget you register your block in Startup.cs under the Configure() method
How about another great post? Previous Next

You might also want to read the following

2021-08-12 Piranha

Edit block templates inside the manager with Scriban

Want to edit block templates without rebuilding your project? Let Scriban help you with that. Scriban parses your custom Html and objects and then gives you HTML ready to be used anywhere.

2021-08-11 Piranha

Track users with Google Analytics on your Piranha site

Keep a track on your visitors and which pages are popular with Google Analytics. This post gives you a great example on how you can implement a dynamic way to add end edit your tracking codes

2021-08-10 Piranha

Manage your footer with a region

Footers are a basic component of almost all websites. Therefor we'll make it as easy as possible for us to manage ours by turning it into a region area on our site model. This guide uses Bootstrap 5

2021-08-08 Piranha

Carousel block for Piranha with Bootstrap

A good image slider or carousel can complete your website. This post will give you a quick example on how you can add your own carousel to your Piranha site

2021-08-07 Piranha

Youtube block for Piranha

Want to show Youtube videos on your Piranha site? This post will give you a quick example on how you could implement a Youtube block on your site, either for showing useful videos or Rick-Rolling your visitors

2021-08-05 Piranha

Accordion block with Bootstrap 5

Sometimes you have way to much text to fit on a page. A simple way to structure and group important content is by using an accordion. This post will give you an idea on how you can implement your own accordion on a Piranha site