Embed Storify Social Media Stories on Digital Signage

  • 1
  • Article
  • Updated 3 years ago
In this article, we will show two options to embed your Storify. The first option is via the HTML Widget and the second option will be via the Web Page Widget.

What is Storify?
In their words, Storify is the easiest way to find, collect, and share what people are saying all over the web. You can sign up or take a tour here.

Creating your Storify
If you have an existing Storify to use, great! If you don't and need help building one, you can get started by creating an account.

As you can see below, there are a number of ways building your content on Storify. Storify uses social media and web sources to build up content. In this example, I decided to embed a Facebook Canada post containing an image:


Once you’re ready, make sure to Publish the Storify so that it's ready to be added into your Rise Vision Presentation!

Option 1: Embedding via the HTML Widget

Get the Embed code on Storify

After drafting and publishing the Storify, grab the HTML Embed code as shown below:


The HTML embed code for the Storify I created is below:



<div class="storify"><iframe src="//storify.com/RV_Community/storify-on-digital-signage/embed?header=false&border=false" width="100%" height="750" frameborder="no" allowtransparency="true"></iframe><script src="//storify.com/RV_Community/storify-on-digital-signage.js?header=false&border=false"></script></div>



The code above needs some tweaking, but we can do this within the Rise Vision Editor in the HTML Widget. If you are planning to add a refresh interval to the Storify in your Presentation, you should use the Web Page Widget instead.

Adding and tweaking the code in the HTML Widget

Add your Storify HTML code to the HTML Widget. In the embed code where it states width="100%" height="750" you may need to tweak it accordingly. In this example, I decided to change it to the presentation's resolution which is width="1920" height="1080".

In the Placeholder's Properties, I decided to change it to the same width and height values just to streamline my settings.

Select Save & Preview.

Option 2: Embedding via the Web Page Widget

Export your Storify to HTML

Back in Storify, use the Export option after publishing the story. See the screenshot below as to where this is:


Select the HTML option which will then take you to a new page:


The exported HTML Storify example that I am using for this article is: https://storify.com/RV_Community/stor...

In the Widget settings, you may also need to tweak around with the magnify, horizontal and vertical scroll. You may also want to set a refresh interval depending on how often this Storify gets updated.

See below on what Storify story looks like on preview:



You may want to consider adding a 'frame' (see using transparent images) over your Storify story to further customize the look.

Maintaining Storify on Digital Signage
What makes Storify different is that a user can log into the Storify platform and manage the social media content from that Platform. Once published, the content will feed back into the Rise Vision digital signage thanks to the data refresh interval in the Web Page Widget or via restarting the Player if using the HTML Widget.

A couple of things to note:
The Storify logo will still be visible in both the HTML and the Web Page Widget options. If keeping the signage logo-free is important, you may want to look for other alternatives.

Being able to add more content will involve scrolling through the pages. At this stage, there is no automatic scroll available (at least, one that I can think of for this article) meaning that we're limited to using one Storify item.

You can now add a Storify story in your Rise Vision Presentation! Feel free to share further tips or ideas below.
Photo of HSuarez

HSuarez

  • 11,896 Points 10k badge 2x thumb

Posted 3 years ago

  • 1

There are no replies.