Monday, 03 February 2014 04:04

How to embed Twitter and Folders

Written by

You can embed a wide variety of items into Mahara pages. Some however, are not quite so easy to add. These include:

  • Twitter
  • Folder views in Google Drive
  • Personal work on various other platforms

To embed these items, you need to create an html page and then embed your content (e.g. Twitter feed) on that page. If you are a Mahara administrator, you need to ensure that the location of these pages is added to your “Allowed iframe sources”.

Twitter

Twitter has recently increased security which has made embedding more difficult. To embed your twitter timeline, you need to:

Create an html file.

  • Open NotePad.
  • Copy this code and paste it into NotePad
    • <html><body> replace this text with Twitter feed code</body></html>

twitter feed notepad save

  • Save the file.
  • **Under “Save as Type”, select “All Files”

Call the file “twitter_yourname.html”. DO NOT forget to add .html to the file name. Leave NotePad open. You will come back to this.

Twitter

  • Go to your Twitter home page and click on settings

twitter feed setting

  • Next, click on Widgets and then select “Create New”.

twitter feed widget

  • Use the default settings and click on “Create Widget”.

twitter feed createnew

  • You will see the code. Copy the code.

twitter feed copycode

  • Go back to the NotePad window and paste the code, replacing the text that says, “replace this text…”.

twitter feed notepad pasted

Save the file. You can test it by simply opening it by double clicking. It should open in a browser and display your feed. If it does not, you have made a mistake. Check your work.

Where to save your file

Your administrator will tell you where to save your file. It needs to be added to the server in order to provide an absolute link.

Administrators, you need to create a shared folder and then upload user files. You should provide a URL via a secure method to avoid harmful file injections by spammers or hackers.

Sharjah folks can find further details about the folder from me.

Mahara

Once your file has been uploaded, you need to add an External Media block to your Mahara page.

mahara embed

  • In the "“URL or Embed Code” section in the block edit window you need to add the following code:

<iframe src="http://eportfolio.cisweb.hct.ac.ae/embedpages/yourpage name.html" height="500" frameborder="0" scrolling="no">

  • Don't forget to change the file name in the code.
  • You can also edit the block name and other settings.

mahara twitter iframe

  • Once your page has been loaded by me, you will see your Twitter feed.

 


 

Folder Views on Google Drive

If you embed a Google Drive folder using the Mahara tools only, you will get a view that looks like this:

mahara folders view

If you click on the link, you will open a new browser window and view the Google Drive folder with thumbnails. This can be very convenient for quick views.

google drive folder thumbs

For an embedded view that might look nicer for you, there are two options.

  • List view

google drive list view

  • Grid View or Thumbnail View

google drive grid view

This view takes up much more space, but might be nice for a small folder.

How to embed a Google Drive Folder View

Create an HTML file

  • Open Notepad
  • Copy this code and paste it into notepad:
    • For the list View:

<iframe src="https://drive.google.com/embeddedfolderview?id=replacethiswiththe folder_ID#list" width="800" height="600" frameborder="0"></iframe>

    • For the Grid view:

<iframe src="https://drive.google.com/embeddedfolderview?id=replacethiswiththe folder_ID#grid" width="800" height="600" frameborder="0"></iframe>

  • Go to Google Drive and copy the Folder ID of the folder you want to embed.
  • Replace the text in the code (replacethiswiththe folder_ID ) in the previous step with the folder ID.

google drive copy foldername

  • Save the notepad file as an html file and give it this name:
    • google_yourname_folder1.html

twitter feed notepad save

  • **Under “Save as Type”, select “All Files”
  • You can preview your file to see if it works by double clicking on it. It should open in a browser and show your folder. If it does not, check your work. Did you add (.html) to the file name?? Did you Save as Type – All Files??

Where to save your file

Your administrator will tell you where to save your file. It needs to be added to the server in order to provide an absolute link.

Administrators, you need to create a shared folder and then upload user files. You should provide a URL via a secure method to avoid harmful file injections by spammers or hackers.

Sharjah folks can find further details about the folder from me.

 

Add Folder to Mahara

Once your file has been uploaded, you need to add an External Media block to your Mahara page.

mahara embed

  • In the "“URL or Embed Code” section in the block edit window you need to add the following code:

<iframe src="http://eportfolio.cisweb.hct.ac.ae/embedpages/yourfilename.html" width="500" height="400" frameborder="0" scrolling="no" />

  • Don’t forget to add your file name. You can also edit the block name and other settings.

google drive listview edit

Read 1740 times
Dr. Paul Leslie

Associate of Taos Institute: http://www.taosinstitute.net/

Education is a Community Affair. 

pleslie bio header 300

www.paulleslie.net | This email address is being protected from spambots. You need JavaScript enabled to view it.

Media