Social Media Footer block

A special block can be placed in your footer to link to your presence on various social media platforms. A variety of networks are supported, as detailed in the list of  Supported Social Networks and Icons⁠ below. 
In the past, a support ticket was required to edit these links; we've released a new module that allows web editors to make these changes directly. This guide explains the Social Media Block and how to use it.
﻿
Table of contents
New Social Media Block
Supported social networks and icons
How to use and edit the social media footer block
Open the module
Add your social media links
Style the icons
Arrange the icons
Save
New Social Media BlockH&S Drupal sites have always had the ability to include social media links in the footer. We added functionality that allows users to update and manage: 
which social media icons are displayed
the order in which the icons appear
the specific URL to the social media account
whether the icons are displayed as a grid or list
Supported social networks and iconsTen social media icons are currently available: Facebook, Instagram, iTunes/Apple Podcast, LinkedIn, Snapchat, Soundcloud, Spotify, Vimeo, X, and YouTube. 
For other platforms not listed, please use the Globe icon. Optionally,  submit a support ticket  If you'd like us to extend the list of supported icons. 
﻿
List of available social media icons.List of available social media icons.
How to use and edit the social media footer blockIf your site does not currently have a social media area in the footer, please  submit a support ticket  to have one added. Once the social media block has been added to your footer, these are the steps you'll follow to add links to your accounts.
Open the moduleLog in, then scroll to the bottom of the page. You'll see a section within the footer that contains your social media icons. Hover over this area to reveal a pencil icon. Click the pencil to show a link to "edit social media block."
﻿
Screenshot of the logged in view of the social media block within the footer. A dotted line surrounds the block, and a pencil icon in the center of a circle can be found in the top right corner. The pencil icon expands to show a link to "edit social media block."Screenshot of the logged in view of the social media block within the footer. A dotted line surrounds the block, and a pencil icon in the center of a circle can be found in the top right corner. The pencil icon expands to show a link to "edit social media block."
Add your social media linksOn the configuration page, scroll down to the "Links" section. Type the URL to any of your social media accounts. For example, add " https://youtube.com/ ChannelName" or " https://x.com/ ChannelName." You can leave the "Label" field empty, as this will default to the correct icon that corresponds to the social media platform. 
﻿﻿If you have more than 2 social media accounts to link, click the button to "add another item" and repeat as many times as necessary. 
Be sure to include the "https://" at the start of the URL.
﻿
Screenshot of the configuration page for the social media block. The first heading, Links, is outlined in yellow to highlight its position near the top of the page. The URL and label section are also outlined in yellow to illustrate where the URL should be entered. Below the second URL and Label pair, sits a button to "add another item."Screenshot of the configuration page for the social media block. The first heading, Links, is outlined in yellow to highlight its position near the top of the page. The URL and label section are also outlined in yellow to illustrate where the URL should be entered. Below the second URL and Label pair, sits a button to "add another item."
Style the icons At the top of the social media block configuration page, you'll notice several editable fields: 
Icon size: choose from small (32px) or large (48px). 
Layout: Choose from two layouts. Grid displays a row of icons without text. List view provides a column of icons with the name of the social media platform next to it. 
The color of the icons will be determined by your website's  theme and color palette⁠ . 
﻿
Screenshot of the top of the social media block configuration page. The dropdown options, 'icon size' and 'layout', are outlined in yellow to illustrate their position as the first two dropdown options on the page.Screenshot of the top of the social media block configuration page. The dropdown options, 'icon size' and 'layout', are outlined in yellow to illustrate their position as the first two dropdown options on the page.
﻿
Screenshots comparing the grid- and list-view layouts. Grid view displays the icons in rows of 4-across icons. List-view displays a single column of icons, with the name of the social media platform to the icon's right.Screenshots comparing the grid- and list-view layouts. Grid view displays the icons in rows of 4-across icons. List-view displays a single column of icons, with the name of the social media platform to the icon's right.
Arrange the iconsCustomize the look and feel of your social media block by arranging your icons in any order of your choosing. To do so, simply click on the arrow slider and drag it into the desired position.
﻿
Screenshot of the Links section of the social media block configuration page. A clickable arrow can be found directly to the left of each set of "URL/Label" fields. This arrow can be clicked, and then the "URL/Label" fields can be moved to another position on the page.Screenshot of the Links section of the social media block configuration page. A clickable arrow can be found directly to the left of each set of "URL/Label" fields. This arrow can be clicked, and then the "URL/Label" fields can be moved to another position on the page.
SaveOnce all of your social media networks have been added, click the "Save" button at the bottom of the page. Check out your updated icons in the footer section of your site, and make any styling changes as desired.
﻿
Screenshot of the icons for social media networks X and YouTube shown in the footer of a webpage.Screenshot of the icons for social media networks X and YouTube shown in the footer of a webpage.
﻿
﻿