University at Buffalo (UB)
Transforming UB’s digital communications.
Social Button Component
Customized social media links.
On this page:
Accessibility
- Link text should be meaningful..
- Use the Open in New Window setting sparingly.
Last reviewed: October 5, 2023
Using This Component
The component as first displayed.
This component has only one tab. It can be used in the header or footer. Click the wrench icon to configure these settings.
Technical Restrictions
None.
Configure - Main Settings
Button Text - Enter the label you want displayed in your footer.
Button Link - Enter the link to your social media channel.
Button Icon - Choose from the listed platforms, for example
The component opened for editing.
- Flickr
- Snapchat
- TikTok
- Wordpress
- X
- YouTube
Open in new window - This optional setting forces the clicked link to open in a new browser tab or window.
- When that is selected, an additional icon will follow the linked text, to alert visitors that they will be taken to a new browser window, or even leave the current website. > Read more about link labels.
Additional Buttons Are Possible
Unit Web Leaders / Site Managers
If you have pressing needs for additional buttons, please make an Enhancement Request. If there is sufficient demand, we will add them to the development queue.
Accessibility Concerns
Links in many components can be set to open in a new browser window (or tab). The user can thus explore the new page, while preserving the source page (and your website) in the original tab. However, this can be confusing if the user does not realize a new tab has opened. They may become lost, confused how they arrived on that new page and unable to return to your site.
Best practice: let the user control their experience and stay in the same tab, with two notable exceptions:
- Use the 'open in new window' setting if loading a new page in the current window would disrupt their current activity (e.g. moving them to a new page while they are in the middle of completing a form).
- Use the 'open in new window' setting if loading a new page in the current window will break them out of a secure environment.
Additional Reference:
Link text should describe where the link will take the user in a manner that is appropriate to the context on your page and also the target page. This is also true for images that act as links.
Best practice: Avoid meaningless standalone phrases like "click here", "see all" and "learn more".