Social Media Block

What is it?

The Social Media Block is a structured list of links represented by an icon allowing users to click through to visit your social media presences on the web. It is loosely based on a version displayed on the UC Davis home page.

This can be used in the main content areas of the Flex and Standard pages, but will not function in the quick links, site ownership sections, or above the primary navigation bar. If you're unsure, please review the Block Usage Chart.

Where can you get the block?

  1. Using the Global drop-down menu, navigate to the Content Library.
  2. Expand the General Library folder and locate the Social Media Block folder.
  3. Copy the social-media-block, click the Copy tab, and then change the Parent Folder location to your site and the folder of your choice.
  4. Click Submit to save.

How to configure a Social Media Block

Layout of the social media block

Media options

Please note you can have a maximum of six media outlets listed.

  • Social media icon - an icon pack is offered from the Content Library/General Library/Social Media block location, providing you with a pre-sized selection of the more popular media services on the web. Copy the image to your site and then attach it in this location.
  • Image alt-text - for compliance and accessibility standards, an alt-text or alternative text sentence is required. In this case, the name of the social media service is sufficient, or you can add something like "Visit us on Facebook!".
  • Social media account url - the URL of your department's site on the particular service's site.

Additional Content

A basic text-processing area is provided in the event you would like to add more accounts or information about your social presence on the web.

Settings

  • Icon alignment - icons can be displayed as left aligned or centered.
  • Language code - configure the output for languages other than English

Style

  • Theme - pick from several different color configurations
  • Custom code - if you want a look other than one of the defaults, you're welcome to apply your own custom CSS class

Where can you attach it?

The Social Media Block can be attached in any of the block attachment regions located in the main content area of the Flex page and in any of the Repeating Content Block areas of a Standard Page.

Demo

  • Facebook
  • Twitter
  • YouTube
  • Google Plus
  • Pinterest
  • RSS

Drop Section Title

This is the main content area to tell people about our exciting social media options.

Chat icon

The quick brown fox jumped over the lazy Avenger. Pistachios are delicious and prone to taking over the world.

  • Bullet list
  • Another link
  • Some event name displayed on Flickr

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam non nisi eu turpis feugiat suscipit. Duis sed massa erat. Ut ipsum mi, porta sed viverra commodo, porttitor sed ex. Duis mollis lacus eget felis hendrerit, in scelerisque risus placerat. Nunc vitae quam augue. Quisque hendrerit ullamcorper est, ac dictum ex scelerisque eu. Maecenas a neque et magna hendrerit mollis in at elit. Suspendisse sed sem ac velit scelerisque finibus. Quisque pharetra, erat sed ornare sollicitudin, sapien sapien consectetur magna, et maximus ipsum tellus imperdiet est. Maecenas aliquam ex vulputate vestibulum laoreet. Aenean tincidunt metus ut dolor tristique lobortis. Nunc porta tortor at ex ultricies sollicitudin. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Customization

You're welcome to either add a custom class (format: .u_your-class-name) or overwrite the existing classes in your own supplemental.css. View the classes used in the live stylesheet named socialmedia1.css.