Skip to content

YouTube SDK Pulgin information

Adori Youtube button SDK

Live Demo

Quickstart

The Adori YouTube button can be added to any page by installing the SDK and adding placeholders to the page for the share buttons.

Step 1: Add the Adori Share SDK

1
2
3
4
5
6
7
<script
  async
  defer
  src="https://adori.github.io/adori-web-sdk/js/adori.min.js"
  type="text/javascript"
  data-adori-key="YourAdoriWidgetKey"
></script>

The script tag supports the following data attributes

parameter Description Required
data-adori-key The key assigned to you by Adori. NO

Note: AdoriKey is disabled temporarily, you can choose to omit "data-adori-key" attribute in the script

Step 2: Add a placeholder for the Adori Share Button

1
<div class="adori-share"></div>

Note that the class must be set to "adori-share"

If you want to add the feedUrl dynamically add this below js

1
2
3
const element = document.getElementsByClassName('adori-share')[0]
element.setAttribute('data-feed-url', 'http://ggole.to/your.mp3')
window.adori.render(element)

If you want to hide Adori share button on invalid Urls than add below js

1
2
3
const element = document.getElementsByClassName('adori-share')[0]
element.removeAttribute('data-feed-url')
window.adori.render(element)

Note: Make sure to run this above code whenever feedUrl changes or available.

The placeholder tag supports the following data attributes

parameter Description Required
data-feed-url The url of the feed is should be added here dynamically, this supports only feed urls not mp3 YES

Single Page Apps

By following the Quickstart guide, the Adori Youtube Button SDK will automatically inject the share button into all of the placeholders on the page after the DOM is ready. For single page apps, it's common for the Adori share placeholder HTML to be added to the page dynamically in response to certain conditions (user navigates to a specific route, opens a modal, etc.). In this case, the placeholders might not exist when the injection script runs and as a result the Adori share buttons might not render.

Once the sdk is downloaded, it adds a global variable window.adori to your page. The Adori object contains the following properties:

adori.render(containerIdOrElement)

Argument Description Required
DomElement or ElementRef Reference to the placeholder element YES

For example, a Adori share button can be injected into a Vue component as follows:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<template>
  <div>
      <button @click="showAdoriShare">Show button</button>
      <div ref="adori" class="adori-share"></div>
  </div>
</template>

<script>
  export default {
      methods: {
          showAdoriShare(){
              const ref: any = this.$refs.adori
              const youtube: any = window
              ref.setAttribute('data-feed-url', 'google.com')
              youtube.adori.render(ref)
          }
          hideAdoriShare(){
              const ref: any = this.$refs.adori
              const youtube: any = window
              ref.removeAttribute('data-feed-url')
              youtube.adori.render(ref)
          }
      }
  }
<script>

Note: Call hideAdoriShare method to hide the the Adori share button