Skip to main site navigation
Skip to main content
Switch to text-only view
Switch to default view
this is a photo of a usb drive

Linking Your Page To Your Social Media Site.

Word Document -- PDF Document


Quick links:


*look in the left navigation area for an example of the outcome of this process


Inserting The Social Media Icons

  1. In WCMS, go to your folder and open the page you want to add Social Media links to, and click the “Edit” tab to access “Edit” mode.

  1. Scroll down to the Optional Column Content edit box (this should be located right under the Optional Elements area).

    Visual Aid

  1. Click in the text area and push the “Enter” key on your keyboard (You must “Enter” once for your icons to show up in “View” mode

  1. In the tool selection area of the edit box, locate and click the “Insert/edit image” tool (clicking this will open the “Insert/Edit image” dialogue box).

    Visual Aid

  1. Next to the word Image, click on the “Browse” icon (clicking this will open the “Please choose a File” dialogue box).

    Visual Aid

  1. Locate and open the _Social__Media folder by scrolling up and clicking on the “+” to the left of the folder.

    Visual Aid

  1. Open the icons folder by clicking on the “+” to the left of the folder.

    Visual Aid

  1. Select the social media icon you want to use by clicking on it (Facebook, Twitter, and YouTube icons are available).

    Visual Aid

  1. Click the “Confirm” button.

    Visual Aid

  1. Click in the Alternative Text text box and type in the name of the social media site that corresponds to the selected icon.

    Visual Aid

  1. Resize the icon by clicking in the Width/Height text boxes and typing in the desired width and height (32 X 32 is the default).

    Visual Aid

  1. Click the “Insert” button to view the icon in the Optional Column Content edit box.

    Visual Aid

  1. If you are linking to more than one social media site repeat steps 3 through 11.

    Visual Aid


Back To Top



Displaying The Icons in a Row

  1. In the tool selection area of the edit box, locate and click the “Edit HTML Source” tool (clicking this will open the “HTML Source Editor” dialogue box).

    Visual Aid

  1. In the “HTML Source Editor” dialogue box, locate the HTML Image tag for the first icon.

    Visual Aid

  1. Insert a space next to the “img” and type: class=”inline”.

    Visual Aid

  1. Repeat steps 1 through 3 for the other icons.

    Visual Aid

  1. Click the “Update” button when you are finished editing the HTML.

    Visual Aid


Back To Top



Linking the Social Media Icons to the Social Media sites.

  1. Open a new tab in your browser or new browser window.

  1. In the new tab or browser window, log in to your social media site (i.e. Facebook, Twitter, YouTube).

    Visual Aid

  1. Highlight the entire website address in the Address Bar of your browser widow.

    Visual Aid

  1. Copy the website address by holding down the “Control” key on your keyboard and pushing the “C” key. (Mac users: hold down the “Command” key and push the “C” key).

  1. Navigate back to the tab or browser window displaying WCMS’s editor.

  1. Locate the icon in the Optional Column Content edit box that corresponds with the Social Media site you just copied the address of and click on it.

    Visual Aid

  1. With the icon highlighted, in the tool selection area of the edit box, locate and click the “Insert/edit link” tool (clicking this will open the “Insert/Edit Link” dialogue box).

    Visual Aid

  1. Click the radio button labeled External (clicking this will reveal a website address text box next to the Link label).

    Visual Aid

  1. Paste the website address by holding down the “Control” key on your keyboard and pushing the “V” key. (Mac users should hold down the “Command” key and push the “V” key).

    Visual Aid

  1. Click the “Insert” button.

    Visual Aid

  1. If you are linking to more than one social media site repeat steps 1 through 10.

  1. Scroll to the bottom of the page and click the “Submit” button to view your work in “View” mode.

    Visual Aid

  1. Publish the page to view your work in the live site (www.iusb.edu/your site).

  1. Click on the Social Media Icons to make sure they work correctly.


Back To Top