Blog, PHP, WordPress, WordPress Shortcode, YouTube

Add Thumbnail Image (Links) from a YouTube RSS Feed to WordPress with Shortcode

This article will show you how to display YouTube thumbnail links in your WordPress website (or PHP application) by way of the video RSS feed. While another article is scheduled that'll display the same output using the YouTube API, the RSS method navigates the requirement to register for the API, making the process a little easier.

The block of YT code has undergone a numerous of variations because of the multitude of ways in which the data might be rendered. Because the thumbnail tower is essentially an image-feature, we once supported different methods of cropping and scaling the images we retrieved from YouTube... but that didn't suit everybody. What's published on this page is now a cupcake version - it's up to you to add the decoration. At the bottom of the page are a few options that might assist with image manipulation.

Note: More complete YouTube renderings can be built with version 3 of YouTube's API, and that information is forthcoming. Note that changes made to our backend may impact upon the examples (we'll tidy up formatting when time permits).

How To Find Your YouTube Channel RSS Feed

Your YouTube RSS feed can be found by navigating your way to https://www.youtube.com/feeds/videos.xml?channel_id=123, where 123 is your own channel ID. If you don't know what your Channel ID is, view the source for your YouTube page and search for the text videos.xml?channel_id - it will reveal the full XML feed. Alternatively, select your own channel from your subscriptions list and note string of text after channel. For example, the channel URL for BeliefMedia's YouTube page is https://www.youtube.com/channel/UC3qxAmFHsyqAnrg_UbbsHjQ. Our channel ID is UC3qxAmFHsyqAnrg_UbbsHjQ.

The Result

The shortcode of [ytrss channel="UC3qxAmFHsyqAnrg_UbbsHjQ" number="3"] will render the following:

Broker Website Costs Slashed for Cyber Week

We'll Increase Broker Grow Conversions by 300% or Give You $10

We'll Multiply 'Broker Grow' Results by 300% or Give You $10k

The second example includes 3 random videos with the title text overlaid on the video thumbnail. The shortcode of [ytrss channel="UC3qxAmFHsyqAnrg_UbbsHjQ" number="3" random="1" type="1"] will return the following:

Mortgage Broker Facebook Ads and Lead Cost

We'll Increase Broker Grow Conversions by 300% or Give You $10

Tips for Partnering with RE Agents

The final example illustrates how the feed might look if you applied some styling. Shortcode of [ytrss channel="UC3qxAmFHsyqAnrg_UbbsHjQ" number="2" random="1" type="1" width="300" style="border: 5px dotted; background: #ff0000; padding-left: 10px; padding-right: 10px; padding-top: 10px;" span="font-size: 1.2em; font-weight: bold; background: #FFFF80; color: #000000"] returns the following abomination.

Demo of the Business Nonconforming Subscription Form

User SMS Verification with Yabber Website Forms

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.

<?php

Add Thumbnail Image (Links) from a YouTube RSS Feed to WordPress with Shortcode

http://www.beliefmedia.com/youtube-rss-tower-wordpress

function beliefmedia_youtube_tower_rss($atts) {

$atts = shortcode_atts(array(

'channel' => 'UC3qxAmFHsyqAnrg_UbbsHjQ',

'number' => '4',

'thumbnail' => '5',

'width' => '280',

'random' => 0,

'style' => 0,

'span' => 0,

'words' => 0,

'type' => '0',

'cache' => 18 * 3600

), $atts);

$transient = 'ytrss_' . md5(serialize($atts));

$cached = get_transient($transient);

if ($cached !== false) {

return $cached;

} else {

$rss = 'https://www.youtube.com/feeds/videos.xml?channel_id=' . $atts['channel'];

$xml = (array) simplexml_load_file($rss);

if ($xml === false) return 'Error Loading RSS Feed.';

$xml = $xml['entry'];

if ($atts['random']) shuffle($xml);

for ($i = 0; $i < $atts['number']; $i++) {

$title = $xml["$i"]->title;

if ($atts['words']) $title = wp_trim_words($title, $atts['words'], '..');

$attributes = $xml["$i"]->link->attributes();

$href = $attributes['href'];

$pubdate = $xml["$i"]->published;

/* Get video ID */

$link = html_entity_decode($href);

parse_str( parse_url( $link, PHP_URL_QUERY ), $url_vars );

$id = $url_vars['v'];

/* Get video dimensions */

$video = beliefmedia_youtube_thumbnail($id, $atts['thumbnail']);

$w = round($video['width']); $height = round($video['height']);

$url = $video['url'];

if ($atts['width']) {

$video = beliefmedia_youtube_thumbnail_size($atts['thumbnail'], $atts['width'], $w);

$w = round($video['width']); $height = round($video['height']);

}

switch ($atts['type']) {

case '0':

/* Default span CSS */

if (!$atts['span']) $atts['span'] = 'font-size: 0.9em; color: white; font-weight: bold;';

$return .= '<a href="' . $link . '" target="_blank" rel="noopener noreferrer"><img src="' . $url . '" width="' . $w . '" height="' . $height . '" alt="' . $title . '" title="' . $title . '"></a>';

$return .= '<div style="padding-top: 10px; padding-bottom: 20px;"><span style="' . $atts['span'] . '"><a href="' . $link . '" target="_blank" title="' . $title . '" rel="noopener noreferrer">' . $title . '</a></span></div>';

break;

case '1':

/* Default span CSS */

if (!$atts['span']) $atts['span'] = 'color: white; font-size: 0.9em; font-weight:bold; background:rgba(0,0,0,0.6); padding: 2px;';

$return .= '<div style="height: ' . $height . 'px; width:' . $w . 'px; position: relative;">';

$return .= '<a href="' . $link . '" target="_blank" rel="noopener noreferrer"><img style="position:absolute; left:0; top:0;" src="' . $url . '" width="' . $w . '" height="' . $height . '" alt="' . $title . '" title="' . $title . '" /></a>';

$return .= '<div style="z-index:1; position: absolute; padding: 15px;"><span style="' . $atts['span'] . '">' . $title . '</span></div>';

$return .= '</p></div>';

$return .= '<div style="height: 12px; width: ' . $w . 'px;"> </div>';

break;

}

$result = '<div style="width: ' . $w . 'px; margin: 0 auto;';

if ($atts['style']) $result .= $atts['style'];

$result .= '">' . $return . '</div>';

/* Set transient */

set_transient($transient, $result, $atts['cache']);

return $result;

}

add_shortcode('ytrss','beliefmedia_youtube_tower_rss');

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.

The second function on this page is required to return the appropriate thumbnail size. Additionally, the function below is necessary to resize images (discussed below).

<?php

Returns new width and height via dodgy scaling of YouTube thumbnail

http://www.beliefmedia.com/youtube-rss-tower-wordpress

function beliefmedia_youtube_thumbnail_size($thumbnail, $width, $currentWidth) {

$hd = array('5', '8');

$result = array();

$factor = (in_array($thumbnail, $hd)) ? 1.777 : 1.333;

return array('width' => $width, 'height' => round($width / $factor));

}

Resizing Thumbnails

The required function referenced on this page lists the most commonly used YouTube thumbnails. The only two thumbnails that return the 16:9 thumbnail (or those that are returned without the top and bottom black bars) are the mqdefault (320 x 180) and maxresdefault (1920 x 1080) images. If you're not using a library to scale remote images automatically, the mqdefault image can easily be scaled down without too many issues.

If you're not too concerned about importing all your YouTube images into your own WordPress library, you can create your own 16:9 (1.777) cropped image size and use the function on this page to create appropriately scaled thumbnails... although this does require slight modification to the code.

Shortcode Attributes

channel

Your YouTube channel.

number

The number of thumbnail results to return. The YouTube RSS feeds returns only your last 15 uploads.

thumbnail

The thumbnail ID references the image sizes as detailed on this page. The mqdefault (320 x 180) image is referenced by default.

width

If you choose to use a width other than the actual size of the image, enter it here. The image will be scaled down and the height will automatically be determined.

random

To return random videos, use random="1".

style

The style attribute applies style to the parent div container. By default the container will match the width as defined by the width attribute or the width of the referenced image.

span

To add styling to the title text, add it with the span attribute. By default we use font-size: 0.9em; font-weight: bold;.

words

To truncate the title text to a specific number of words, use words="15" (where 15 is the maximum number of words to return).

type

For text underneath the image, use text="0". To overlay the text on the thumbnail, use text="1".

cache

The period of time to cache the result. Defaults to 18 hours.

PHP Function

Used outside of WordPress, the function on this page may be used. As with the shortcode, it requires the second beliefmedia_youtube_thumbnail() function on this page. It also requires Simple Cache and the beliefmedia_youtube_thumbnail_size() function above.

Download

Title: Add Thumbnail Image Links from a YouTube RSS Feed (WP Shortcode)
Description: Add Thumbnail Image Links from a YouTube RSS Feed With WordPress Shortcode or PHP.
Download • Version 0.2, 1.4K, zip, Category: WordPress Shortcodes
PHP Code & Snippets, (2.4K)

■ ■ ■

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.