Podlove Subscribe Button
General
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.
Usage
Using the Podlove CDN
We are hosting an always up-to-date version of the Podlove Subscribe 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>Currently, you can set these options:
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', 'eo', 'fi', 'fr', 'nl', 'zh' and 'ja')
data-size: size and style of the button ('small', 'medium', 'big'). All of the sizes can be combined with 'auto' to adapt the button width to the available space like this: 'big auto'
data-color: define the color of the button (Please see section **Override Button Color** 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
data-format: choose a button format, default is a rectangle, options are 'square' and 'cover' (**Note**: 'cover' has a max size of 300px)
data-style: choose a button style, default is filled, options are 'outline' and 'frameless'Self hosted
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', 'eo', 'fi', 'fr', 'nl', 'zh' and 'ja')Podcast data API
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": "https://media.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",
"directory-url-itunes": "https://apps.apple.com/podcast/newz-of-the-world/id492588543"
},
{
"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.
Override Button Color
The color of the button is configurable by setting the data-color parameter on the script tag. If the parameter is not given the default will be used. Allowed are all notations for colors that CSS can understand (keyword, rgb-hex, rgb, rgba, hsl, hsla). See here for more.
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. Please write us or create an issue, if you are interested in this feature.
Use your own button element
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>Add non-javascript fallback
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.
Automatic opening on page load
If you request the page where the button is embedded with the hash param #openSubscribeButtonPopup the popup will automatically open. There should only be one embed code present on the site though!
Example:
https://example.com/subscribe#openSubscribeButtonPopupSupported Apps / Services
Android
Cloud
iOS
Linux
macOS
WindowsPhone
Windows
Development
Install requirements
yarn installUse gulp to build the project or start the server:
yarn run build
yarn run devContribution
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.
Support
License
