Blog, PHP, WordPress, WordPress Plugins, WordPress Shortcode, YouTube

YouTube Subscribe Button With WordPress Shortcode or PHP

The YouTube Subscribe button shortcode permits you to embed a channel subscription button into your WordPress post or page with shortcode. The button is another good argument for shortcode over code snippets provided by online tools; if the YouTube embed code ever changes, or new features were added, or you simply wanted to alter its appearance, modifying a single function would alter every occurrence of your subscription button on your website. YouTube has altered their code in the past... and they may do again.

The Result

The shortcode of [ytsubscribe layout="full"] will display the following (we've used the full layout for our Flight YT channel).

To display only the subscription button without the count, use [ytsubscribe count="hidden" align="right"]. In this case, we've also aligned the button to the right. This will apply a little CSS with padding (defined as a shortcode attribute). We could have optionally aligned left with [ytsubscribe count="hidden" align="left"]. The button is centered and wrapped in paragraph tags by default.

In the final example, we'll use a full layout in a 'dark' theme for BeliefMedia with the shortcode of [ytsubscribe theme="dark" layout="full" id="UC3qxAmFHsyqAnrg_UbbsHjQ"]. Note that I've used the attribute of id. If I were rendering a badge for a channel by name I would have used [ytsubscribe theme="dark" layout="full" channel="beliefmedia"]. The result:

We've only just started posting videos to our (lonely) company YouTube channel . While you're here, consider subscribing!

WordPress Shortcode

Copy and paste the WordPress function into your theme's functions.php file or, if you sensibly have one installed, your custom functions plugin. You may optionally download and install our plugin from the bottom of of the page.

<?php

YouTube Subscribe Button With WordPress Shortcode or PHP

http://www.beliefmedia.com/youtube-subscribe-button

function beliefmedia_youtube_subscribe_button($atts) {

$atts = shortcode_atts(array(

'channel' => 'flightorg',

'id' => '',

'layout' => 'default', /* default or full */

'count' => 'default', /* default or hidden */

'theme' => 'default', /* default or dark */

'listen' => false,

'align' => false,

'padding' => '8px 15px 8px 15px'

), $atts);

$return = '<script src="https://apis.google.com/js/platform.js"></script>';

if ($atts['listen'] !== false) {

/* listen JavaScript */

$return .= "<script>

function onYtEvent(payload) {

if (payload.eventType == 'subscribe') {

// Add code to handle subscribe event.

} else if (payload.eventType == 'unsubscribe') {

// Add code to handle unsubscribe event.

}

if (window.console) { // for debugging only

window.console.log('YT event: ', payload);

}

</script>";

}

/* Use ID over channel */

$channel = ($atts['id'] != '') ? 'data-channelid="' . $atts['id'] . '"' : 'data-channel="' . $atts['channel'] . '"';

/* Build button */

$css = ($atts['align'] !== false) ? 'float: ' . $atts['align'] . '; padding:' . $atts['padding'] : 'text-align:center;';

$return .= '<div style="' . $css . '">

<div class="g-ytsubscribe" ' . $channel . ' data-layout="' . $atts['layout'] . '" data-count="' . $atts['count'] . '" data-theme="' . $atts['theme'] . '"';

if ($atts['listen'] !== false) $return .= ' data-onytevent="onYtEvent"';

$return .= '></div>

</div>';

/* Return button */

return ($atts['align'] === false) ? '' . $return . '' : $return;

}

add_shortcode('ytsubscribe', 'beliefmedia_youtube_subscribe_button');

If you require shortcode to work in a sidebar widget, you'll have to enable the functionality with a filter. If you're using our custom functions plugin, you'll have that feature enabled by default.

Shortcode Attributes

The following attributes alter the behaviour of your subscription button.

channel

Your YouTube channel name. If an id is set, the channel will will be overwritten.

Your channel ID. A channel id will overwrite your channel name.

layout

The layout is either default (just a button) or full. Defaults to default.

count

By default your subscriber count will show. To hide, use count="hidden".

theme

The two theme options are default and dark.

listen

By default listen is false. If you build in some JavaScript listeners the code is waiting for you (use listen="1").

align

By default the badge will align to the center in paragraph tags. To float left or right use align="right".

padding

If you align your badge to the left or right, padding applies. Defaults to 8px 15px 8px 15px. Alter as necessary.

PHP Function

Used outside of WordPress, the following may be used.

<?php

YouTube Subscribe Button With WordPress Shortcode or PHP

http://www.beliefmedia.com/youtube-subscribe-button

function beliefmedia_youtube_subscribe_button($args = '') {

$atts = array(

'channel' => 'flightorg',

'id' => '',

'layout' => 'default', /* default or full */

'count' => 'default', /* default or hidden */

'theme' => 'default', /* default or dark */

'listen' => false,

'align' => false,

'padding' => '8px 15px 8px 15px'

);

/* Merge $args with $atts */

$atts = (empty($args)) ? $atts : array_merge($atts, $args);

$return = '<script src="https://apis.google.com/js/platform.js"></script>';

if ($atts['listen'] !== false) {

/* listen JavaScript */

$return .= "<script>

function onYtEvent(payload) {

if (payload.eventType == 'subscribe') {

// Add code to handle subscribe event.

} else if (payload.eventType == 'unsubscribe') {

// Add code to handle unsubscribe event.

}

if (window.console) { // for debugging only

window.console.log('YT event: ', payload);

}

</script>";

}

/* Use ID over channel */

$channel = ($atts['id'] != '') ? 'data-channelid="' . $atts['id'] . '"' : 'data-channel="' . $atts['channel'] . '"';

/* Build button */

$css = ($atts['align'] !== false) ? 'float: ' . $atts['align'] . '; padding:' . $atts['padding'] : 'text-align:center;';

$return .= '<div style="' . $css . '">

<div class="g-ytsubscribe" ' . $channel . ' data-layout="' . $atts['layout'] . '" data-count="' . $atts['count'] . '" data-theme="' . $atts['theme'] . '"';

if ($atts['listen'] !== false) $return .= ' data-onytevent="onYtEvent"';

$return .= '></div>

</div>';

/* Return button */

return ($atts['align'] === false) ? '' . $return . '' : $return;

}

/* Usage */

echo beliefmedia_youtube_subscribe_button();

/* Usage with arguments */

$args = array('id' => 'UC3qxAmFHsyqAnrg_UbbsHjQ', 'layout' => 'full', 'count' => 'hidden');

echo beliefmedia_youtube_subscribe_button($args);

Arguments are passed to the function in the $args array.

Considerations

The most significant cause for confusion when using this shortcode is use of channel name and channel ID. You may only use a vanity (channel) name if YouTube approved you for such, and your channel is accessible via youtube.com/yourname. If not, use your channel ID.
The iframe code we've previously shared should no longer be used. While it may continue to work, it's long deprecated.
The listen attribute can be used with listen="1". It specifies the name of a JavaScript function that will handle event notifications related to the button. More info here .

Download

Title: YouTube Subscribe Button in WordPress (WP Plugin)
Description: Insert a YouTube subscription button with WordPress shortcode or PHP.
Download • Version 0.2, 1.8K, zip, Category: WordPress Plugins (General)
WordPress Shortcodes, (959.0B) PHP Code & Snippets, (1.0K)

■ ■ ■

Download our complimentary 650-page guide on marketing for mortgage brokers. We'll show you exactly how we generate billions in volume for our clients.