Tech | Web Team

Social Media Icons

New social media widgets are now available for all McCombs Sitecore users.

Insert a Widget Column

  • Right click on your add-on folder and select "Insert" (if you do not already have one, here is how to create an add-on folder for your page)
  • Select "Widget Column"
  • You will be prompted to name your widget folder; just leave it named widget column
  • You will now see the widget folder appear in your content tree

Insert the Social Media Container

  • Right-click on widget folder and a menu of options will pop up
  • Click "Insert"
  • You are now presented with several widget options; select "Social Media Container"
  • Social Media Container will now appear in your content tree

Insert new Social Media Widgets

  • Move your cursor to the Social Media Container folder in the content tree
  • Right click it and a menu of options will pop up
  • Click "Insert"
  • You will be prompted to name the widget you are inserting; name it something obvious (i.e. if you are inserting a Facebook widget, name it "Facebook"; if you are inserting a Twitter widget, name it "Twitter")
  • Your newly-named social media widget will now appear in your content tree

Fields in the Social Media Container

  • "Choose Icon Size" allows you to use pick whether the icons representing each social media page will be small or medium. Best Practice: Choose medium unless there is a reason not to!
  •  "Hide Header Text" allows you to display a header that says "Follow Us" that will appear directly above the social media icons. The "Follow Us" header is displayed by default.
  • Talk to the web team before checking the box in the "Display Subpages" field; checking this box can cause serious formatting issues to some pages.

Fields in individual social media widgets

  • "Type" determines how this particular icon will appear on the live site. So, if you are working on a Facebook widget, select "Facebook" in this field to create the familiar icon on your page.
  • "Link..." This is where you will paste the url of your social media account. For example: To link to The McCombs School of Business Facebook account, you would paste the url https://www.facebook.com/UTMcCombsSchool. Make sure to paste in the whole address beginning with "http."
  • "Alt Text..." The text you enter here will appear when a user hovers his/her cursor over the icon. Alt text is also very important for SEO, so name it appropriately. For example: If you've created a widget that will link to the business school's main Facebook page, the text you enter in this field might read "McCombs School of Business on Facebook." 

Best Practices

  • To maintain visual consistency, be sure you have at least 3 different social media accounts you want to link to before you use these widgets
  • If you have social media accounts that we do not yet have icons/widgets for, let us know and we will make them for you
  • Inserting new social media icons on your page may cause your existing content to shift around; if the visual layout of your page suffers after inserting social media icons, open the widget column and try changing the "margin size" field.

Page last updated: 8/20/2013