If you are a client developer and want to add your client to the list, please read the page above carefully and open an issue on this repository when you have fulfilled the requirements.
We are hosting an always up-to-date version of the Podlove Subsribe Button code on our CDN. This is the preferred way to include the button on your web site.
<script class="podlove-subscribe-button" src="https://cdn.podlove.org/subscribe-button/javascripts/app.js" data-language="de" data-size="small" data-json-data="podcastData" data-colors="red;green;blue" data-buttonid="123abc" data-hide="true"></script>
There are currently three options you can set:
data-json-data: name of the variable where the button can find information about the podcast (see Podcast data API section)
data-language: language the texts on the button and popup should be in (currently supports 'de', 'en' and 'ja')
data-size: size and style of the button ('small', 'medium', 'big', 'big-logo'). All of the sizes can be combined with 'auto' to adapt the button width to the available space like this: 'big auto' (**Note**: big-logo has a max size of 300px)
data-colors: define the colors of the button (Please see section **Override Button Colors** for more information)
data-buttonid: you can use this to open the popup from another element on the same page (see section **Use your own button element**
data-hide: if set to `true` the button will not be shown (useful if you want to use your own element
Put
dist/*
into the same folder on a publicly available server. Then add a script tag to the place where you want the button to appear:
<script class="podlove-subscribe-button" src="http://example.com/subscribe-button/javascripts/app.js" data-language="de" data-size="small" data-json-data="podcastData"></script>
There are currently two options you can set:
data-json-data: name of the variable where the button can find information about the podcast (see Podcast data API section)
data-language: language the texts on the button and popup should be in (currently supports 'de', 'en' and 'ja')
To work the button needs information about the podcast, which needs to be provided in the following format:
<script>
window.podcastData = {
"title": "Newz of the World",
"subtitle": "Tim and Mark talk about the Newz™",
"description": "Newz of the World is a weekly show about world news. Mark Fonseca Rendeiro and Tim Pritlove come together to present interesting reports and discuss their aspects and possible consequences. Newz of the world wants to be an alternative window to the common media flow and cherry picks interesting developments for you.",
"cover": "http://meta.metaebene.me/media/newz/newz-logo-600x600.jpg",
"feeds": [
{
"type": "audio",
"format": "mp3",
"url": "http://newz-of-the-world.com/feed/mp3",
"variant": "high"
},
{
"type": "audio",
"format": "aac",
"url": "http://newz-of-the-world.com/feed/mp4",
"variant": "high"
},
{
"type": "audio",
"format": "ogg",
"url": "http://newz-of-the-world.com/feed/ogg",
"variant": "high"
},
{
"type": "audio",
"format": "opus",
"url": "http://newz-of-the-world.com/feed/opus",
"variant": "high"
}
]
}
</script>
If everything went right you should see a button that will open a popup with subscribe buttons when clicked.
The colors of the button and popup are (almost) completely configurable by setting the data-colors parameter on the script tag. If the parameter is not given the default will be used. The colors have to be provided in this order separated by semikolon:
- buttonBackgroundColor
- buttonHoverBackgroundColor
- buttonActiveBackgroundColor
- buttonTextColor
- buttonHoverTextColor
- buttonActiveTextColor
- buttonBorderColor
- listHighlightBackgroundColor
- listHighlightTextColor
Allowed are all notations for colors that CSS can understand (keyword, rgb-hex, rgb, rgba, hsl, hsla). See here for more.
If you only want to replace certain colors you can simply leave the position empty and the default will be used.
Please Note: It is not possible to style multiple buttons/popups on the same page differently. Unfortunately this is technically not possible at this moment.
Full configuration:
<script ... data-colors="#75ad91;#75c39d;#61937b;#ffffff;#ffffff;#ffffff;#456757;#328398;#ffffff"></script>
Basic button styling (only idle button background and text color)
<script ... data-colors="#75ad91;;;#ffffff"></script>
A bit more complex... (Only idle button background/text and list highlight color):
<script ... data-colors="#75ad91;;;#ffffff;;;;#328398;#ffffff"></script>
For ultimate freedom you can use a completely different element on the page for opening the popup. To achieve this you have to set a unique ID for each button you have on the page like this:
<script ... data-buttonid="123abc"></script>
Then define the element that should open the popup when clicked just like this:
<a href="#" class="podlove-subscribe-button-123abc">Subscribe</a>
If you want to hide the original button you can combine data-buttonid with data-hide which, you already guessed it, will hide the button:
<script ... data-buttonid="123abc" data-hide="true"></script>
If you want to provide a fallback when no javascript is present, we recommend to do it like this:
<script class="podlove-subscribe-button" src="http://example.com/subscribe-button/javascripts/app.js" data-language="de" data-size="small" data-json-data="podcastData"></script>
<noscript><a href="http://newz-of-the-world.com/feed/mp4">Subscribe to feed</a></noscript>
You can also provide more than one feed link if you have more.
Install requirements
gem install sass
npm install -g gulp
npm install gulp-util gulp-coffee gulp-ruby-sass gulp-watch gulp-uglify gulp-concat gulp-browserify gulp-rename gulp-connect uglify-js
Use gulp to build the project or start the watcher:
gulp
gulp watch
If you want to help us translate the button to other languages, please sign up here and let us know if you need any help!
If you find a bug please use Github Issues to report it. If you want to add a feature or fix a bug please fork the repository, make your changes in a feature branch and open a pull-request.