Beehively Tips: How to Display a Google Doc in an Announcement

Are you an avid user of Google Drive and want to display your files online? Google Drive fans rejoice, you can place single or multiple-page Google Drive files directly into Beehively announcements! This allows the school community to see important files or newsletters right within the browser, instead of having to download or click an external link. The result will look like this on your classroom or home page:

Screen Shot 2015-01-07 at 9.40.40 AM

The bar to the right-hand side is a scrolling bar, allowing you to post a multiple-page file or newsletter, given it is uploaded into Google Drive. The following steps may seem complicated at first, but it becomes easy with practice. We recommend setting up a test newsletter group to post some newsletters without fear of them sending out; Beehively is happy to help set this up! Keep reading to learn how to embed Google documents into your announcements:

1. This HTML code will be used to embed your doc into an announcement, keep this handy for future use:

Click here for the code

2. Make sure your PDF or Google Doc is set to “Public on the Web,” this ensures all members in Beehively will be able to see your file.

Screen Shot 2015-01-07 at 9.28.23 AM3. Copy the link to your document, it should look like this:

Screen Shot 2015-01-07 at 9.29.28 AM4. Paste this link somewhere in a document and remove /view?usp=sharing from the end of the link

5. Plug the remainder of the link into the HTML Provided in step 1.

  • To do this, remove the DOC LINK HERE and paste the document link in its place.

6. The HTML will look like this, but with your own file:

Click here for an example of this code

  • Notice that /view?usp=sharing, which was removed earlier, has been replaced with /preview. This is important because it allows the user to see a preview of the entire document in the embedded frame.

7. Access the “Add New Announcement” screen and select the </> symbol to the far left to edit the HTML of the announcement. This will open a plain-text window to enter HTML code.

  • There may be some characters already in the box, these are default symbols and can be deleted before you enter your code.

Screen Shot 2015-01-07 at 9.38.15 AM

8. Enter the iframe code created above and click the </> again once you are complete. Clicking the symbol once you finish is important, as it notifies the system to save the HTML that was entered.

Once you click </> again, the document is there!

Screen Shot 2015-01-07 at 9.38.25 AM

If you are able to see see the embedded file in your announcement, you are all set to post! Submit for approval and once approved, it will appear on the home page/classroom page as an embedded file. Please don’t hesitate to contact with any questions!

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s