Add the Vodpod Button to Your Site

Make it easy for your users to share your videos on Vodpod.

A. Build your own button

• Create your own button or link to open a new page and pass your video page in the url parameter to the Vodpod sharing page:

  http://vodpod.com/account/add_video_page?url=...

  Options

  You can optionally pass title, description, and embed or swfurl arguments. See the OExchange spec for more details.

B. Use the custom Vodpod button

• Get the Code

  To place Vodpod buttons on your site just add this code to your page:

  <a class="vodpod-share-button" data-embed="..." data-link="..." data-title="..."></a> <script type="text/javascript" src="http://assets.vodpod.com/javascripts/share_video.js"></script>

  How It'll Look

  The button on your site will look like one of these:

  Add the CSS class vodpod-orange to your link to get the orange button.

  The Data

  The Vodpod button uses the following data to share your video on Vodpod:

  • Shareable video embed code (embed, object, or iframe)
  • Link back to your original video page
  • Title of the video
  • The title and link values are optional, but you must specify the embed code.

Options for specifying the video embed code

• Providing the embed code directly

  Include a "data-embed" attribute on the anchor tag on your page with the value of the embed code:

  <a class="vodpod-share-button" data-embed="<embed src=... " .. ></a>

  Make sure to attribute-encode the embed code.

• Set a global Javascript variable

  Set the Javascript variable vodpod_embed_code to the value of your sharable embed code.

• Pointing to an element holding the embed code text

  Include a data-id or data-class attribute on the Vodpod anchor tag that indicates another page element that contains the embed code text:

  <a class="vodpod-share-button" data-id="share-embed" .. ></a>

  Provide an element id (using 'data-id') or CSS class (using 'data-class'). We will find the first matching element and extract the embed text from that element, depending on the type of the element:

  • div - The contents (innerHTML) of the div will be used
  • input,textarea - The value of the field will be used
  • embed,object - The actual embed/object tag value will be used

• Facebook standard & Oembed endpoint

  If your site generates Facebook-style metatags in the header (video_src or og:video) with the embed code, you can specify that:

  <a class="vodpod-share-button" data-facebook="true" ... ></a>

  If your site supports Oembed, specify the data-oembed attribute with the URL of your oembed endpoint:

  <a ... data-oembed="http://www.youtube.com/oembed" ... ></a>

Links & Titles

• Specifying the video link

  By default the link back to your video will use the URL of the page on which the Vodpod button resides. You can change that link by specifying the data-link attribute to the Vodpod anchor tag:

  <a class="vodpod-share-button" data-link="http://..." .. ></a>

• Specifying the video title

  By default the current page title will be used as the title of the video. You can specify a different title by using the data-title attribute to the Vodpod anchor tag:

  <a class="vodpod-share-button" data-title="Kittens are cute" .. ></a>