Home » Articles posted by Rebecca Walters

Author Archives: Rebecca Walters

How do I add an image to the top right corner of a webpage?

Note: These instructions apply to the “Basic Content” content type on our Drupal content management system. This article also assumes that you’ve already uploaded your image(s) to the appropriate “Files (hidden)” webpages and optimized the photo to these dimensions: 238 x 180 pixles.

  1. Make sure you are logged on and in the editing interface for the content you wish to edit.
  2. Scroll down to the “Image” menu.
  3. Select the menu, and being typing in the name of your image (Ex. “peter_shaw_thumbnail”)
  4. Select the image.
  5. Optional: Please also set the “Image Alt Text” field, a short description of the image, including relevant keywords.
  6. “Save” your changes. The image will automatically be pulled into the top right corner of your webpage.

How do I add a Facebook Like button to a webpage or story page?

There are two steps involved in adding a Facebook Like button to a webpage or story page: first you must add the Facebook Element content type and then you must complete the Open Graph tags.

  1. Click on “Add” in the “Edit Console.”
  2. Select “Facebook Element” from the list of content types.
  3. Enter the URL of the webpage or story page you want to “Like.”
  4. Under “Type,” select “Like Button” from the drop down menu.
  5. Choose the “Layout,” “Button with count inside.”Facebook Element Like Button
  6. “Save.”

Now you will see the Facebook Like button appear on your webpage or story – but it’s only the first step. In order for Facebook to figure out what your webpage or story is all about, you’ll have to add Open Graph Tags. Luckily, adding these tags only takes about 5 minutes of your time.

  1. Here’s the tricky part. You’ll need to enter the Open Graph Tags in different areas depending on whether you’re editing a webpage or a story page. If you’re editing a webpage, click on “Settings” in your “Edit Console.” Scroll down and click on “Meta-tags.” Meta tags for webpages OR If you’re editing a story page, click “Edit” story at the bottom of the page before the share and comment area. Scroll down through the editing interface and click on the “Meta tags” menu.Meta tags for stories
  2. A new menu will open and you’ll see lots of options. The first thing you’ll want to do is ignore the “Meta Description” option, unless you’d like to take the time to set your webpage’s meta description for Google search.
  3. You only need to add the following tags: Open Graph Title, Open Graph Type, Open Graph URL, Open Graph Image, and Open Graph Description.
  4. The “Open Graph Title” is simply the title of your webpage or story.
  5. The “Open Graph Type” will always be “website.”
  6. The “Open Graph URL” will always be the URL of your webpage or story page.
  7. The “Open Graph image” is the URL of the photo in the right hand corner of your webpage or story page.
  8. The “Open Graph Description” is a short intro to the web content. If you’ve written a good opening paragraph to your webpage, or a good teaser to your story, simply copy and paste that to the Open Graph Description field.Facebook Open Graph tags
  9. “Save.”

How do I add a Facebook Like Box to a webpage?

You can add Facebook Like Boxes to the bottom of a standard webpage or to the right hand sidebar area, like Student Services. To get started follow these steps:

  1. Click on “Add” in the “Edit Console.”
  2. Select “Facebook Element” from the list of content types.
  3. Enter the URL of the Facebook page you want to “Like.”
  4. Under “Type,” select “Like Box” from the drop down menu.
  5. Choose the “Layout” option: “Box with Count Above.”
  6. If you would like to show the faces of the people who like you on Facebook, check the “Show Faces” option.
  7. If you would like to show the updates from your Facebook page, check the “Show Stream” option. With the “Number of Posts” field, you can also choose how many updates appear within the box.
  8. “Save.”

How do I tag URLs for online marketing campaigns so that we can track their success with Google Analytics?

There are several tags you can add to the end of our www.miis.edu URLs so that we can track online marketing campaigns via Google Analytics, whether these campaigns focus on email, Facebook, LinkedIn, or external websites (grist.org, gradschools.com, princetonreview.com, etc.). You can use the Google URL Builder Tool to guide you through the process.

Please follow the step by step instructions below:

  1. In the “Website URL” field, enter the web address of the page you would like people to visit after they click on the link or ad.
  2. In the “Campaign Source” field, enter the source of the campaign such as Facebook, Linkedin, Google, Grist, Gradschools.com, Email (our MIIS Constant Contact account) etc.
  3. In the “Campaign Medium” field, enter the type of the campaign such as CPC, Email, Banner, Directory, etc.
  4. In the “Campaign Name” field, name your promotion. Be as specific as possible. Here are some examples…
    • Google AdWords: “G:India Search-MBA (English)” OR “G:USA Display-Peace Corps (English)”
    • Facebook Campaign: “F:YellowRibbon-MBA USA(English)”
    • LinkedIn Campaign: “L: TISP – USA (English)”
    • Banner Ads: “FP:Banner-IPS-Sept2011” Note: FP= Foreign Policy
    • Email Campaigns: External: “FP:Email-IPS-Dec2011” or Internal (via Constant Contact): “Email:TI-Scholarships-Feb2012”
  5. Click “Generate URL.”

Here’s a helpful screenshot of the toolbuilder:


You can also use the “Campaign Term” field to differentiate between paid keywords (You would use this feature when tagging URLs on a Google AdWords account.) And you can use the “Campaign Content” field to differentiate between the content of your ads (i.e. the text and photos), if your running two or more ads concurrently about the same product or promo. Imagine two ads about the IEP program on Grist with different photos, or two ads about the Yellow Ribbon program on Facebook with different headline text.

How do I edit photos in less than 5 minutes with Picnik?

Photos intended for the top right media space of www.miis.edu webpages should be vertically-oriented: the height should be greater than the width. Photos cropped and resized to about 238×260 pixels fit the space best. You can crop photos online with Picnik in under 5 minutes by following the instructions below.

  1. In Flickr or Picasa, choose the photo you would like to edit with Picnik.
  2. Click “Crop.”
  3. Drag the grid over the portion of the photo you would like to keep, usually to reduce the width of the photo.
  4. Click “Resize” to adjust the height and width of the photo. Change the width to 238 pixels.
  5. Save your photo.

  6. Congratulations, you’ve just edited a photo in less than five minutes!

How do I edit photos in less than 5 minutes with Preview?

Photos intended for the top right media space of www.miis.edu webpages should be vertically-oriented: the height should be greater than the width. Photos cropped and resized to about 238×260 pixels fit the space best. You can crop photos in Preview in under 5 minutes by following the instructions below.

  1. Open the photo you would like to edit in Preview.
  2. Choose the select tool.
  3. Highlight the part of the photo you would like to keep.
  4. Click “Edit,” then “Copy.” (Or Command “C.”)
  5. Click “File,” then “New From Clipboard.”
  6. Save your edited photo.


Congratulations, you’ve just edited a photo in less than 5 minutes!

How do I enable a 301 redirect?

301 redirects help you change the URL of a www.miis.edu webpage without breaking the link. All people accessing the old link will automatically be taken to the new URL.

Please follow these steps to enable a 301 redirect:

  1. Navigate to the page with the old URL. (Ex. http://www.miis.edu/academics/language/diplomat)
  2. Take note of the Monster Menu # in the Edit Console. (Ex. 242454)

  3. Navigate to the webpage’s new URL. (Ex. http://www.miis.edu/academics/language/diplomats)
  4. Scroll down to the bottom of the page and click “Edit.”
  5. Within the editing interface, scroll down to the menu at the bottom of the page. Click “URL redirects.”

  6. Click “Add a redirect to this location,” which takes you to the 301 redirect module on the Drupal CMS admin panel.

  7. Complete the “From” URL field by adding this line of code mm/(Monster Menu #) (Ex. mm/242454)

  8. Don’t forget to click “Save.”

How do I add a meta-description to my webpage?

Meta-descriptions are text that appears under your title tag in a Google search and, therefore, provide another area to use the keywords identified in your SEO strategies. Meta-descriptions consist of well-written ad copy not exceeding 155 characters. To add a meta-description to one of your webpages, follow these quick steps:

  1. Navigate to the webpage you would like to add a meta-description to.
  2. Click “Edit” at the bottom of the webpage.”
  3. Within the editing interface, scroll down to the bottom menu and click “Meta tags.”
  4. After the menu opens, add your text under “Desciption.” Don’t forget to “Save” your edits.

How do I add a search box to a FAQs page?

To add a search box to your Frequently Asked Questions webpage in the style of the Admissions FAQs, you will need to use the “Quick Access” content type and also create a Drupal View of your FAQs list.

  1. Create a new subpage under your FAQs webpage entitled “List of FAQs” or something similar.

  2. Move your FAQ nodes (i.e. the individual Questions and Answers) to this new subpage.
  3. Delete any remaining content on your original FAQs webpage.
  4. Under “Edit Console” in the top left corner of your screen, click “Add,” and choose the “Quick Access” content type.
  5. Within the editing interface, add your “Title” (i.e. Frequently Asked Questions), “Label” (i.e. Start typing to search the FAQs.), and “Selector.” (The “Selector” for the FAQs Quick Access will always be ‘.question’)
  6. At this time, you can also add “Opening Paragraph” text and an “Image” so that one appears in the top right media space.
  7. Save the changes you’ve made.
  8. Return to the “Edit Console,” click “Add,” and choose “Basic Content.” Within the editing interface, add a “Title” for the content type in brackets [ ] so that it does not appear on the webpage i.e. [FAQs View]
  9. Here’s the tricky part. In order for the FAQ nodes to appear in one uninterrupted list (i.e. the Drupal View), you will need to add the following line of code in the “Body” text: [view:faqs==(tag)] To create the Admissions FAQs webpage, the tag used in the code was “admissions.” Therefore, this line of code was added to the webpage: [view:faqs==admissions]
  10. For your FAQs webpage, you will need to chose a tag relevant to your content to generate the Drupal View. Substitute your tag for “admissions” and add the line above of code to the “Body” text.
  11. Before you’re finished, you will now need to double check all of your FAQ nodes to make sure they have the tag you’ve chosen. If the FAQ nodes are not properly tagged, they will not appear on your new FAQs webpage.

How can I enhance the audio quality of my video clip?

Follow the steps below to edit the audio quality on a .mov file with a little help from Quicktime Pro and Audacity.

  1. In Quicktime Pro, export sound the .wav file. Click “File,” then “Export.” Use the dropdown menu to choose “Export Sound to Wave.”
  2. Open the file in the Audacity.
  3. Find a segment of the background noise you wish to remove.
  4. Select that segment of noise.
  5. Click “Effect,” then “Noise Removal.”
  6. Retrieve the “Noise Profile.”
  7. Select the entire sound file.
  8. Click “Effect,” then “Noise Removal.” Adjust the “Less/More” bar to determine how much noise to remove, and “Preview” the clip.
  9. Click “Remove Noise.”
  10. Save the project, and export it as a .wav file.
  11. Open the corrected audio file through Quicktime.
  12. Select the corrected audio file by moving the markers to the beginning and end of the clip.
  13. “Copy” the corrected audio file.
  14. Select the existing audio on the .mov file by moving the markers to the beginning and end of the clip.
  15. Click “Edit,” then “Add to Selection and Scale.”
  16. Click “Window,” then “Show Movie Properties.”
  17. Delete Audio Track 1.
  18. Congratulations! Your video clip should now play with corrected sound.

Sites DOT MIISThe Middlebury Institute site network.