Integration

iFrame integration!

This page shows some examples for iFrame integration to 9blox.com. In general it's always the same:

  1. Search for the service you want to integrate
  2. Copy the iFrame integration code to embed the site or widget
  3. Create a code block on your page
  4. Copy the iFrame integration code into it and add your own HTML if needed.
  5. If needed, adapt the width and height attributes in the code. Both should be "100%" if possible, otherwise set width to "320" for one-column and to "660" for two-column blocks. Height can be anything, e.g. "500".


Click here for detailed help on 9blox.com.

Weather forecast

Go to Meteoblue and set up a widget. Copy the iFrame code into a code block and add your own HTML if needed.

meteoblue

Spotify playlist

Go to Spotify on the web, choose your playlist, click on the three dots, 'Share' and 'Copy embed code'. Then copy the iFrame code in a code block.

Instagram Share

Open instagram from your web browser, choose a photo you shared. At the top right there is a 3-dot menu. Click it, choose 'Embed' and copy that code into a code block.


View this post on Instagram

A post shared by Frank D (@frankdux_germany)

Google Sheets

Go to your Google Sheet, click on 'File', 'Publish to the web', choose 'Embed' and copy the iFrame code in a code block.

YouTube video

Choose your YouTube video, go to 'Share', 'Embed'. Then copy the iFrame code in a code block. Change the width to 100% and height attributes to e.g. 500, otherwise the video may spill over.

Note that there is a specific block type for embedding YouTube videos to make it even easier

Any website

You can basically integrate any website, but note that our widgets are only 320 pixels wide (including some padding), so an embedded website may not look so good. You should use the extended widget width (2 columns) for more horizontal space.


Google calendar

Create a public calendar in Google, look at the "calendar integration" options and copy the iFrame-code to a code block. Please adjust the width in the copied code to "300". You can also adjust some settings within Google.


Note that you can use the 'calendar integration' block type for an easier (and prettier) way to integrate a Google calendar as shown here.

No entries

Diagram in Google Sheets

Read more about integrating a diagram fed with live data from Google Sheets.

Chessboard

Chessbase.com offers several chess boards and exercises for integration.

You can also have a look at PlayPager

Photo albums

Look at Albumizr to create a photo album which can be embedded with an iFrame.

  1. Upload your photos there
  2. Click on Embed
  3. Copy the generated code into an iFrame block (and adjust the width to 340 px for standard-width blocks)

Dropbox integration

You can add files (e.g. photos) from Dropbox. This offers a whole new world of possibilities. For example, you can sync photos from your mobile phone automatically to Dropbox and share these photos to 9blox.com.

Read more.


© 2021 Frank Dux
Imprint/Privacy
Create yourself
9blox.com: Logo
Twitter
WhatsApp
Email
Facebook