Creek Articles

Back to Index


Written by
Travis Bernard
Creek > Website Integration Toolkit       Integration

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>

<!-- 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

  1. Go to the Control Panel.
  2. Go to Tools > Settings > Integration > Website Integration
  3. 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 #/
  4. 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.

  1. Go to the Control Panel.
  2. Go to Tools > Media
  3. Upload the image to Media.
  4. Click on the new image in media, then select the URL for the original full-sized image — rather than the sized ones.
  5. Go to Tools > Settings > Themes > Social Media
  6. Paste the URL into the input box for: URL to fallback image for Facebook shares
  7. Click Save at the bottom of this page.