Salesforce Community Social Media Links in a Footer

Need to add social media links to your Salesforce community? While it isn’t drag and drop, there are just a few steps to make sure you can add them in a stylized manner to your footer. The code is provided, as are some screenshots of the process.

Adding Community Social Media Links

Step 1: Create a new static resource and upload this ZIP file. The file contains several icons in an SVG format. SVG allows an image to be scalable and can have the color manipulated. (Make sure to use the FooterIcons naming convention, as shown below)

Step 2: Drag a new HTML Editor component into your community. Place this wherever you want your social media links to appear.

Step 3: Add some code to your component. This code will place 4 of the available icons into the footer:

<div class="socialFooter">
    <a href="#" class="socialLink">
        <img src="/sfsites/c/resource/FooterIcons/FooterIcons/LinkedIn.svg" />
    </a>
    <a href="#" class="socialLink">
        <img src="/sfsites/c/resource/FooterIcons/FooterIcons/Facebook.svg" />
    </a>
    <a href="#" class="socialLink">
        <img src="/sfsites/c/resource/FooterIcons/FooterIcons/Twitter.svg" />
    </a>
    <a href="#" class="socialLink">
        <img src="/sfsites/c/resource/FooterIcons/FooterIcons/Youtube.svg" />
    </a>
</div>

If you’re not familiar with HTML, don’t worry. The things you have to edit are very basic. If you want to remove a link, Just remove one of these sections:

<a href="#" class="socialLink">
    <img src="/sfsites/c/resource/FooterIcons/FooterIcons/Twitter.svg" />
</a>

The same applies to adding additional icons. Just paste another version of that into your code block.

To set the link, replace each “#” with the actual link. For example <a href=”https://twitter.com/salesforcech” class…

The ZIP file you uploaded has 8 images inside. You can replace the /Twitter.svg with any of the available options.

• Facebook.svg
• Instagram.svg
• LinkedIn.svg
• Slack.svg
• Twitter.svg
• Vimeo.svg
• Whatsapp.svg
• Youtube.svg

Step 4: Time to add some styling. If you noticed, the icons are probably enormous and stacked. We can fix that with some CSS rules. First, go to your theme tab, and select ‘Edit CSS’ from the dropdown.

In the CSS editor, paste the following code:

.socialFooter { align-items:center; display:flex; justify-content:center; }
.socialFooter .socialLink { padding:10px; }
.socialFooter .socialLink img { width:32px; }

This will now line up your icons in the center, and set them to 32 pixels wide. You can change the size in the last line, just update the 32px with any number.

The images default to black, but you can add another CSS rule to change them to any color. Go to this link and paste the hexadecimal code of the color you want. For our example, I’ll use a default Salesforce community blue: #415aa8. That page returns some code at the bottom. In our case it is:

filter: invert(30%) sepia(77%) saturate(504%) hue-rotate(188deg) brightness(98%) contrast(91%);

Add that directly before or after the width:32px; in the last line of your CSS.

The Result

Presto! You now have custom colored icons in your footer. If you’re comfortable with CSS, you can tweak things even further. If you have a dark background, you can set the icons to white (#FFFFFF).

Need custom icons? You can follow the same steps, just using your own SVG images inside of a folder. Add them to a folder called FooterIcons, and compress them into a ZIP file.