Display YouTube Thumbnail with wordpress custom field

Note:

Before using the code bellow, I strongly recommend you to take a look on my YouTubeNails plugin, wich is a evolution of the function bellow and you can easily configure as a widget.

Why saving a video thumbnail for a video hosted on YouTube, when you can use the YouTube API plus WordPress Custom Fields to display the thumb, without working around crops, size and other stuff like this.

All you need:

  1. Create a custom field called(slug) “link_video”, which contains the standard “share” url from YouTube, something like this http://www.youtube.com/watch?v=kBN9_deleBg”;
  2. Use the code bellow, to retrieve data, inside a WordPress Loop;
<?
if (have_posts()) : 				
  global $post;
  $strquery = "category_name=videos";
  $myposts = get_posts($strquery);
  if($myposts):
	foreach($myposts as $post) :
             setup_postdata($post);
            // get meta from the custom field, using its slug
            $videolnk = get_post_meta($post->ID, 'link_video', true);
            // pure php string replace
           // add the standard YouTube API call for video thumbnails
           $videolnk = str_replace('http://www.youtube.com/watch?v=','http://img.youtube.com/vi/',$videolnk);
           $videolnk .= "/2.jpg";
        endforeach;
  endif;
endif;
?>

Then you can call the code bellow on your page(inside the loop):

<a href="<?=get_permalink()?>">
<img src="<?=$videolnk?>" width="214" height="129" >
</a>

Go to the source, if you need further info about YouTube API.

About these ads

, ,

  1. #1 by Marcel on February 15, 2011 - 4:07 pm

    Alvaro,

    Não entendi como implementar o código. Você poderia explicar com mais detalhes por favor.

    Grato

    • #2 by Alvaro Neto on February 15, 2011 - 4:16 pm

      Oi Marcel, o roteiro é o seguinte:
      1 – Baixe e instale o plugin WordPress Custom Fields.
      2 – Crie um custom field chamado link_video e insira nele uma url de compartilhamento válida do YouTube, como http://www.youtube.com/watch?v=kBN9_deleBg
      3 – Use os códigos destacados em cinza no post dentro de um loop de consulta.

      Espero poder te ajudado. Futuramente melhorarei este post, com mais detalhamento.

      Alvaro

      • #3 by Marcel on February 15, 2011 - 4:40 pm

        Oi Alvaro

        Desculpe a insistência mas fica ainda 2 perguntas:

        1) Mesmo eu tendo o WP 2.9.2 ainda assim preciso do plugin?

        2) O que seria um loop de consulta para eu inserir?

        Grato pela atenção.

      • #4 by Alvaro Neto on February 15, 2011 - 4:47 pm

        Sem problemas Marcel. Estamos aí para ajudar.

        O WordPress More Fields, em princípio, funciona a partir da versão 3.0 do WordPress.

        O loop do WordPress, pode ser feito de mais de um jeito.

        Em um post que fiz sobre categorias, há um exemplo bem acessível.

        Alvaro

  2. #5 by Bogdan on February 17, 2011 - 9:18 pm

    where should i put this?

    // get meta from the custom field, using its slug
    $videolnk = get_post_meta($post->ID, ‘link_video’, true);
    // pure php string replace
    // add the standard YouTube API call for video thumbnails
    $videolnk = str_replace(‘http://www.youtube.com/watch?v=’,’http://img.youtube.com/vi/’,$videolnk);
    $videolnk .= “/2.jpg”;

    • #6 by Alvaro Neto on February 18, 2011 - 12:50 am

      Hi Bogdan, you must put it inside a loop, after a block like this

      <?
      if (have_posts()) :
      while (have_posts()) : the_post();
      ?>

      but maybe you should take a look on the Codex, cos there are other ways to build a loop.

      Well, I’ll change this post to be more easy to understand, other people asked for it, so sorry it is confused.

      Hope you make it work, please let me know if I can help on something else, if it works for you or not.

      Maybe you should also take a look on my plugin, YouTubeNails, cos it is easy to use and maybe it will be able to help you on your job.

      Best Regards!

    • #7 by Alvaro Neto on February 18, 2011 - 1:10 am

      I’ve rewrote the post, hope it is easier to understand now. Please let me know if it works for you. Best Regards, and thank you for subscribe.

  1. wp-popular.com » Blog Archive » Display YouTube Thumbnail with wordpress custom field « It works on WordPress
  2. Wordpress Answers « It works on WordPress

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: