Website Integration Toolkit

Written by

Travis Bernard

The website toolkit allows you to integrate Creek with any website.

Go to our open source project page for the Website Integration Toolkit for more information.

Demo

View demo here.

Installation

In summary:

Add the following code to your website's <head> and <body> (steps 1 and 2).
Then, create a /shows page for the schedule container (steps 3).

1. Add to the top of `<head>`

This toolkit includes Vue.js in order to render the framework.

<!-- Creek JavaScript Toolkit -->
<script type="text/javascript" src="https://cdn.creek.fm/integration/0.7.9-alpha/demo/creek.js"></script>

<!-- Apply an optional built-in CSS theme -->
<link rel="stylesheet" href="https://cdn.creek.fm/integration/0.7.9-alpha/themes/light.css">

2. Add to the bottom of `<body>`

Edit this code so that it uses the xxxx.creek.fm domain for your station.
Update any other options. For all available options, see the creek-data.js file.

<!-- Initialize the Creek JavaScript Toolkit -->
<script type="text/javascript">
  Creek.init({
    debug: false,
    domain: "bff.creek.fm",
    audio: {
      toolbar: {
        enable: true
      }
    },
    station: {
      title: "BFF.fm"
    },
    shows: {
      schedule: {
        enable: true
      }
    }
  })
</script>

3. Insert show schedule on page

Create a /shows page on your website, example: https://station-name.com/shows
Insert this #Creek-Shows container on the page, in the main content area.

<!-- Create a main content element to hold the shows and schedule -->
<div id="Creek-Shows"></div>

Permanent Share Links: Fixing Facebook Posts

These permanent share links allow social media like Facebook to create proper "previews" of your shows and broadcasts if they are shared on the Facebook Timeline.

Essentially, this is a workaround for how Facebook doesn't read the "virtual pages" created within the browser by the JavaScript router of this website integration toolkit.

Setting them up

Go to the Control Panel.
Go to Tools > Settings > Integration > Website Integration
Enter the settings for your external website.
- Enable the share links.
- Enter your external website domain (into which you are integrating this toolkit).
- Enter your share domain.
  - Defaults to: station-name.creek.fm
  - You can also use a domain like share.station-name.com — just ask us about setting this up.
- Enter the path to your integrated shows page — usually /shows
- Enter the prefix — usually #/
Click Save at the bottom of this page.

Now, when you click a share button on the embedded shows schedule, you will get a link like:

http://station-name.creek.fm/share/shows/show-name

Testing a share link

To preview what a share link will look like if posted on Facebook, use the Facebook Sharing Debugger.

Paste the share link into this tool in order to take a look at how Facebook sees this link.

Facebook Share Images

You can update the default image that appears when someone shares a show or broadcast on Facebook.

This default image will be the og:image in the Open Graph tags the Facebook reads.

Go to the Control Panel.
Go to Tools > Media
Upload the image to Media.
- The image should be at least 1200px wide by 630px tall. See this Facebook help page for more info.
Click on the new image in media, then select the URL for the original full-sized image — rather than the sized ones.
Go to Tools > Settings > Themes > Social Media
Paste the URL into the input box for: URL to fallback image for Facebook shares
Click Save at the bottom of this page.

Creek Articles