Salesforce Community Social Media Links

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)

Salesforce Community Social Media Links

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 href="#" class="socialLink">
        <img src="/sfsites/c/resource/FooterIcons/FooterIcons/Facebook.svg" />
    <a href="#" class="socialLink">
        <img src="/sfsites/c/resource/FooterIcons/FooterIcons/Twitter.svg" />
    <a href="#" class="socialLink">
        <img src="/sfsites/c/resource/FooterIcons/FooterIcons/Youtube.svg" />

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" />

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=”” 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).

Adding Salesforce community social media icons to a footer

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.

I am a 24x Salesforce certified consultant. I am passionate about Salesforce, and I enjoy the friendly ecosystem that is filled with talented, intelligent professionals.
Posts created 50

4 thoughts on “Salesforce Community Social Media Links in a Footer

    1. Michelle,
      The icons that are part of that ZIP file are circular with a transparent center section. If you want just the center section (the icon itself, not the surrounding circle) to be a different color, you’ll need to upload different icons in the ZIP file.

      There are lots of websites with free SVG icon libraries, so you can search for one you like, and add them to the ZIP file instead. Let me know if that makes sense, or if you run into any problems.

  1. Hello Chris,
    If I upload another ZIP file. How can I find the path that I should put in the HTML.
    For example if my ZIP file was called: HelloIcon, the path would be:

    but that doesn’t work for me. Please, could you explain me where the path comes from, because I didn’t find information about it.

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Posts

Begin typing your search term above and press enter to search. Press ESC to cancel.

Back To Top