Today I want to introduce a new feature that we have been working on. It is one of those small things that might just make a huge impact on how you use your lane: Embedded Memolanes.
A note to Safari users: If any of the embedded lanes below do not appear, you can view the examples on a separate page.
I believe in the motto of “show don’t tell”, so here is an embedded version of the lane containing all the official Memolane blog posts:
The code needed to make this happen is as simple as:
That is all there is to it! To embed any memolane or story, simply grab the url, add .js to the end of it, and stick it in a “<script>” tag as shown above.
By default, an embedded memolane is 500px wide, 500px high, has a black background, and a 1px solid white border. Of course, one size does not fit all, so this can be tweaked to meet the needs of your site or blog.
Here is another example using a different background and border color, that has been made slightly taller. This is the Memolane.com story as told by the team members (including this one, beware of infinite recursion! ). One thing to note is that when using HTML color codes, the ‘#’ sign needs to be escaped to %23 or it will not work.
The code for this lane is:
“<script src="http://memolane.com/stories/8a3d3bacd1eef863886c00023c5dc8ed.js?width=500&height=600&background=%23000044&border=1px solid %230AF"> </script>”
For the background of the embedded memolane, it is also possible to specify the values of “transparent” or “memolane.” “Transparent” is useful if you have a background image or an advanced background design on your site and want this to show through. “Memolane” causes the embedded memolane to use the same background image as is used on the lanes on the Memolane.com site. Here is the embedded version of the story of team Memolane.com as SXSWi 2011 in Austin, Texas (we also removed the border just for fun):
The code for this is:
“<script src="http://memolane.com/stories/0b61d538b40ca61c4ee325e751414308.js?background=memolane&border=none"> </script>”
Some general tips when working with Embedded Memolanes:
1. Memolane looks best on a dark background. So either leave the default (black), set background=memolane, or specify another dark color that matches with your site’s design. Only use background=transparent if your site has a complex dark background already.
2. Give it space. Memolane by its very nature requires a bit of space for it to look nice and not feel cramped – 200px by 100px won’t work very well. Remember to check expanded memos in your embedded lane, because expanded image galleries and long blog posts require adequate height to look good.
3. Check the privacy settings of the lane you want to embed. When a lane is embedded, it will only show public content. This means that if you embed a lane with “private” or “friends only” content, this will not show up in the embedded lane, not even if you are logged in to Memolane.
And most importantly:
4. Have fun and be creative. Use this in interesting places to do interesting things. If you do something really cool, send us a shout at firstname.lastname@example.org, and we might feature your use of an Embedded Memolane on our site or on our blog.
This is our first version of embedded memolanes, and we know that there are lots of ways that we can improve it. We would love to hear your feedback – so give us a shout at email@example.com or leave us a note in the Memolane Support Community.
- Nikolaj Hald Nielsen
Product Lead & Co Founder