Website Integration Toolkit
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
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.
- Defaults to:
- 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.