[ARCHIVED] How I integrated a pinterest board in my class

[DrNufer]

Hi all.  I am trying something this term that I thought I would share with you.  One of the courses that I teach is a graduate level class discussing instructional technology.  I periodically email the students relevant articles and blog posts in order to keep the material current.  We know that twitter integrates into canvas via the LTI tool, but pinterest does not have this option.  I thought it might be interesting to give pinterest a try.  Pinterest has an option to export a board to a website or blog.  So I tried a few approaches and will share the one that I implemented.

Within pinterest, you can create your board.  I created a new pinterest account specifically for my class(es); everything is related to academia.  I titled the pinterest board IO527 (https://www.pinterest.com/tech3238/io527/).​  I also invited the class to participate in contributing to the board - this involves me manually entering in their email addresses.  When I click on my pinterest board, there are options for sharing the content, including sending the board to someone, posting it on facebook, or creating a widget.  I am interested in that latter option.

The widget options that I chose are:

• Board
• Size: create your own
• Image width: 115
• Board height: 275
• Board width: 850

You'll want to play around with those dimensions in your instance to find a right fit for you.  There is no perfect size, and it will render differently given the resolution and size of the monitor (or mobile device), and the extent to which the individual's web browser is zoomed in.

At the bottom of the widget page, pinterest will spit out some code for you.  For me this code looked like:

<script async defer src="//assets.pinterest.com/js/pinit.js"></script>

<a data-pin-do="embedBoard" data-pin-board-width="850" data-pin-scale-height="275" data-pin-scale-width="115" href="https://www.pinterest.com/tech3238/io527/"></a>

I pasted this into a plaintext editor (notepad, for me).  I titled the file "Class Pinterest Board.html".  Essentially I created a little webpage that consisted only of the pinterest board.  I uploaded the file into Canvas.  I created a content page within my Course Home section (we include this section in every course on the modules page - things like policies, library resources, introductory discussions, etc.) where I explained what the pinterest board is and why I am introducing it to the course.  I encourage students who would like to contribute to the board to create a dedicated pinterest account, I explain the difference between a pin and a repin, and I include instructions for pinning and provide guidelines.  I then embedded my pinterest board into each unit in the class.

To do this, I went to the modules page and for each unit I created a new file page.  Then I simply chose the html file that I had uploaded.  The result is not as seamless as a dedicted LTI tool, such as the twitter feeds, but it is functional and useful.

[Stef_retired]

It was great meeting you yesterday and talking about this great idea, snufer--but I didn't expect you to create the resource so fast! We are still looking forward to seeing you screen share this in CanvasLIVE, either as a standalone presentation or as part of a suite of embeddable resource ideas.

[DrNufer]

Thanks stefaniesanders​.  One thing I haven't thought through is how to design a Pinterest integration like this if there are multiple sections of a course being taught.  For me I am the sole instructor for my course and I have no problem going through these motions.  In fact, I'll probably just keep the same pinterest board and carry it over each time the course is taught.  But what if there are multiple sections that are copied each semester with various faculty?  Should they share one communal pinterest board?  Perhaps it should just be an option that faculty can set up themselves and I can create a screencast and PDF guide for people at my institution explaining to them how to do it.  I suppose this might be an issue of "we can do it, but should we?"  It probably just depends.  At any rate, it's never a bad thing to have many options to provide people in terms of ed tech.

[drimmer]

snufer​this is great - awesome, in fact. It has also made me want to write a blog post about students going the extra mile to really engage with a course and how, unfortunately, I don't think this is going to be possible at the school where I work (compulsory sport and service commitments).

[mmcinerney]

Did you copy and paste the code into the file exactly as did above? And how did you paste the code into an HTML file? We are having trouble with these steps. Thanks!

[DrNufer]

To create the html file I used the embed code from pinterest and simply pasted into notepad.  That's what I used for PC.  On mac you can try textedit or textwrangler.  Then instead of saving it as a .txt file, I saved it as an html file.  Simply go Save As... and change the Save as type: from .txt to All Files.  And then name your files something like pinterest.html.

That will be the html file that you will upload into Canvas.  If you click on the file after saving it onto your computer, it should open up in your default browser. 

[mmcinerney]

Okay, I got that far. I am now having trouble with the code. How do I enter the code into the TextEdit? When I open up the html file it takes me to a new webpage but it is a webpage with the code rather than the pinterest board.

I am a little confused where it says "Dont Forget to include pinit.js once per page right before the closing </BODY> tag."

Do I put the top code first and then the second (pinit.js) code after it?

Thanks in advance!

[DrNufer]

I don't think the order of the two matter so much.  I went in to my Canvas shell and downloaded the actual file I am using.  Here is what my file looks like:

I saved that as a simple .html file and uploaded it to canvas.  You can put the <script> after the <a> if you'd like, but it really shouldn't matter once it's in Canvas because ultimately both lines of code will be within the page <body></body> tags. 

[ilovell]

I had the same issue but, I got it to work . For my .html text file I added <html> and <body> things now seems to be working perfect.

<!doctype html>

<html>

<body>

<a data-pin-do="embedBoard" data-pin-board-width="400" data-pin-scale-height="240" data-pin-scale-width="80" href="https://www.pinterest.com/"></a>

<script async defer src="//assets.pinterest.com/js/pinit.js"></script>

</body>

</html>

[DaleDrees]

Thanks for sharing snufer​! I will give this a try now - Thanks!

[finnegmh]

I love this idea, thank you for sharing it! 

[laurakgibbs]

Thanks for sharing your Pinterest project, snufer‌! I am a big fan of Pinterest myself personally, and some of my students are really motivated to use Pinterest also, which is great. A lot of them don't start off seeing it as a powerful bookmarking and research tool, but it really is. I've pasted in below the "Tech Tips" I share with my students to encourage them to use Pinterest and to zoom in on its power as a research tool.

Also, once you have uploaded the Pinterest widget code to Canvas in the form of a File, you can then use iframe to put that File inside a Page. That can be helpful if you want to provide additional contextual information to your students, like assignments based on Pinterest, tips on how they can create their own Boards, etc. etc. I've written up the step by step for how to go from Pinterest to Canvas File to Canvas Page here:

https://community.canvaslms.com/groups/designers/blog/2017/03/05/pinterest-in-canvas

The same thing also works for Flickr albums and for Twitter widgets!

I am really grateful to  @James ‌ and ishar-uw‌ for helping me make that extra step from uploading the File to configuring a Canvas Page with the File inside it. 

Here are the Pinterest tips I share with my students; they are part of a whole range of extra credit Tech Tips that I offer. Some students do lots of tips, other students are more hesitant... but what's nice is that when they visit other students' blogs in the class (each student has their own blog), they can get inspired from seeing what other students have learned to do! It's all about CONNECTED LEARNING. 🙂

PINTEREST TIPS

• Create a Pinterest Board. This tip will help you get started using Pinterest. And if you already use Pinterest, you can use this tip to create a new Board for this class.
• Pinterest Searches. One of the most powerful things about Pinterest is the way you can use it as a tool for search and discovery!
• Editing Pinterest Pins. Make sure you know how to edit a Pinterest pin so that you can go back and add more detail to the pin text.
• Pinterest Buttons and Bookmarklets. Install a Pinterest browser button or bookmarklet so that you can pin any webpage quickly and easily.
• Embed Pinterest Board. This tip will show you how to create a widget for a Pinterest Board and embed that widget in a Blogger blog post.
• Embed Pinterest Pin. You can also embed a single pin in a blog post, which means it automatically displays the image along with notes and links too!
• Pinterest Board in Blog Sidebar. This tip builds on two earlier tips: you can create a sidebar box for your blog, and then you can add the PInterest Board to the box.

[DrNufer]

laurakgibbs‌, I love these ideas.  It may be hard to fully integrate a pinterest assignment formally into the curriculum, depending on the alignment of learning outcomes, but it's a great platform for supplementing instruction and further engaging students by connecting them to social media (of sorts).  

[laurakgibbs]

Yes, exactly snufer !  I do require my students to have blogs (but even there, I am platform-neutral)... and then I just encourage them to explore and use different tools in different ways and share back what they learn with the rest of the class. I learn a lot that way too! 🙂

[aalexander]

I love getting students locating resources in Pinterest and I love this idea! Can't wait to try this,  thanks for putting this together

[laurakgibbs]

A lot of my students are serious Pinterest enthusiasts, so when I suggest it as a bookmarking tool they can use for school, they leap at it. Which is great! Getting my students into the idea of bookmarking and curation is a real challenge... thank goodness for Pinterest as an option that works well for some! 🙂

[schachernp]

Thanks for the great idea and the all helpful information!!  🙂

[mchild76]

Thank you for sharing this idea - I have it up and running in my sandbox both as a link and a page. laurakgibbs I appreciate the helpful info on tips you provide for students new to Pinterest. I really try to push personal knowledge management and this integration fits really well with that pursuit.

[laurakgibbs]

Agreed, mchild76‌! Not all of my students are into learning new technology things, but many of them are... and of course there are always so many kinds of tools I am glad to share with them. It's really fun to show people who already use Pinterest how to make it more useful for actual research by adding notes, using the suggested Boards from Pinterest, etc. Students are always looking for images to use in their blog posts in my classes, so Pinterest is a great resource to promote! 🙂

[ahardesty]

Thank you for posting!  @michellemeazell ‌ you might want to see this.