Skip to main content

Secondary navigation:

BC Social Media List Component

cq sample pages

NOTE: due to increased anti-hacking checks in web browsers, you will not be able to test your social media links while in the AEM authoring mode. You will need to activate your page and test the links on the published version of the page.

The BC Social Media List component is used to create either a row or a column of social media icons with links to your social media sites on those platforms. You can choose which icons you need and you can set the URL of the link so that it goes to your social media site. It might look something like this:

To get started, drag the component to the place on your page where you want the row or column of icons to appear. Click the edit item on the blue bar to open the component. Then click the Plus (+) button to begin specifying your first icon. The dialog box should look something like this:

Social Media List screen capture - Channel List Tab
Social Media List - Channel List Tab

Use the Icon Name field to specify the icons you wish to show by using a defined name from the Font Awesome list of official social icons.  Here is a list of the most common ones:

Facebook ("f") - fa-facebook
Facebook ("square") - fa-facebook-square
Twitter (bird) - fa-twitter
Twitter (square) - fa-twitter-square
YouTube (logo)- fa-youtube
YouTube (play button)- fa-youtube-play
YouTube (square) - fa-youtube-square
Google+ ("g+") - fa-google-plus
Google+ (square) - fa-google-plus-square
Instagram - fa-instagram
Linkedin ("in") - fa-linkedin
Linkedin (square)- fa-linkedin-square
Pinterest ("p") - fa-pinterest
Pinterest (square) - fa-pinterest-square
Flickr - fa-flickr
Vimeo - fa-vimeo-square

In the examples below the "square" versions have been used to produce a uniform row of icons.

Use the Target URL field to define the URL of your social media to that the icon links to.

The component includes a Link Title field that you should fill in with the name of your social media site so that sight impaired users will hear where the link will take them since they can't see the icon.

After configuring the first icon, click the Plus (+) button again to start defining the second icon. You can add as many as you need.

There is an optional field called "List Title" at the top of the dialog box that allows you to enter text that will appear above the icon set. In the examples below the List Title is entered as "Social Media Icons," but you can specify any phrase or leave it blank.

After you complete your list of icons, move to the second tab called Color and Alignment.

Social Media List screen capture - Color and Alignment Tab
Social Media List - Color and Alignment Tab

The Color and Alignment tab in the component allows you to format the icons in two ways:

  • The Alignement Option menu allows you to choose "horizontal" (producing  a row of icons) or "vertical" (producing a column of icons). See sample of each below.
  • The Color Options component also allows you to specify the color of the entire set as:  maroon, gold, color, neutral (grey). Samples for each of these options are shown below.

 

Maroon option - all icons are maroon

 

Gold option - all icons are gold

 

Color option - icons are in their typical color

 

Neutral (grey) option - all icons are grey

Vertical Samples