Tuesday, November 17, 2015

Display YouTube Video Thumbnails in Blogger

Display YouTube Video Thumbnails in Blogger

Link to My Blogger Tricks

Display YouTube Video Thumbnails in Blogger

Posted: 17 Nov 2015 06:11 AM PST

Extract YouTube Video ThumbnailsWe have reached the stage of our Blogger JSON tutorial series where we will learn how to extract thumbnails from a YouTube video and display these featured thumbnails inside recent posts widget. YouTube Data API is an excellent way to create 3rd party applications for users that could help them to search for YouTube videos, upload videos to YouTube, and update existing videos. It also helps you to retrieve playlists, favorite videos, and do much more. Since discussing YouTube API is beyond the scope of this tutorial therefore we will only discuss the thumbnails which are stored inside the tags <media:thumbnail/>. Understanding YouTube Video Feed is not our concern for this tutorial series. In this part we will first discuss the Thumbnail basic URL structure and will learn different techniques of embedding these thumbnails inside blog posts but in our next tutorial we will discuss how to dynamically display featured YouTube thumbnails inside the recent comments widget via JSON feed by retrieving the Thumbnail from the YouTube Iframe.

Note: Click the Button below to see full list of topics under discussion.

Topics List

Extract Thumbnails from a YouTube Video

Every YouTube Thumbnail has the following URL structure:

http://img.youtube.com/vi/VIDEO ID/IMAGE NUMBER.jpg

  • There are a total of 4 thumbnails available through YouTube API for each video. Each image is numbered in this sequence: 0, 1, 2, 3. Represented by IMAGE NUMBER
  • Each video has its unique ID represented by VIDEO ID.

I once uploaded a Facebook Timeline video to my YouTube channel. This video is located at

https://www.youtube.com/watch?v=tcw10SeE_VQ

Where  tcw10SeE_VQ is the video ID. This is the exact same URL structure for all videos on YouTube.

YouTube Data API stores around 4 thumbnails for each video. 3 small and one large. The thumbnails stored for the above video are located at:

http://img.youtube.com/vi/tcw10SeE_VQ/0.jpg

1st largest Full size Default thumbnail Image with dimensions 480 x 360 (pixels)

Full size YouTube Thumbnail

http://img.youtube.com/vi/tcw10SeE_VQ/1.jpg

2nd Small thumbnail Image with dimensions 120 x 90 (pixels)

 

Small YouTube Thumbnail

http://img.youtube.com/vi/tcw10SeE_VQ/2.jpg

3rd Small Default thumbnail Image with dimensions 120 x 90 (pixels)

Default YouTube Thumbnail

http://img.youtube.com/vi/tcw10SeE_VQ/3.jpg

4rth Small thumbnail Image with dimensions 120 x 90 (pixels)

Small YouTube Thumbnail

Embedding YouTube Thumbnails in Blog posts

Now lets suppose you want to publish a video post and you want to display the thumbnail Image of your YouTube video as the featured Image of your blog post in a SEO friendly manner. For this all you need to do is to use the following image code:

<img src=http://img.youtube.com/vi/VIDEO ID/0.jpg  width="400px" alt="Image Description"/>

  • You just need to replace VIDEO ID with the ID of your YouTube video URL
  • Note that I have selected the 1st Thumbnail image (i.e. 0.jpg) to display the largest thumbnail.
  • You can customize the width of your image by simply editing 400px. Note that the 1st thumbnail has a width of 480px.
  • Replace "Image Description" with Image Title

Display Thumbnails Dynamically

For simplicity we have only discussed the static method of embedding thumbnail images in blog posts but in our next tutorial we will discuss a JavaScript technique to extract YouTube Video Images dynamically from the blogger JSON feed and will display Video thumbnails automatically next to each post containing a video Iframe.

At present we are only sharing the technique for YouTube videos but if you guys would love to know how to extract Dailymotion or Vimeo video Thumbnails thumbnails also then let me know so that I may share those scripts with all of you.

Stay tuned for the next part which involves some interesting yet easy JavaScript programming. Peace and blessing buddies! :)

HostGator Best Hosting Plans For Bloggers

Posted: 17 Nov 2015 03:22 AM PST

Hostgator is surely the biggest giant today with excellent 24/7 customer service and largest collection of sites hosted. This review discusses reasons for which Hostgator has become the first choice for pro bloggers and internet marketers.
on
Note: This post has been updated with new changes made in 2015

No matter whatever blogging platform or content management system (CMS) you may be using, the topic today will discuss reliable and affordable web hosting plans that you can purchase to kick start your blogging career. Advertisers and direct sponsors have started giving more value to blogs which are self hosted and produce quality content. Here we will discuss how to transfer your current domain to HostGator and at the same time buy a reliable hosting plan. We will also answer some frequently asked questions to keep things clean and clear.

Why HostGator?

For this I have written a detailed article that you can read here:

I wont tell you any technical details here like unlimited bandwidth, Disk space, sub domains etc. I would only highlight their excellent customer service. You always need active real support from your web hosting company so that in times of technical need you may not feel helpless. Whether you are a customer or just a passing visitor the agents there are always available to give free help and suggestion.

Web Hosting companies are examined and tested by Online testing organizations and critics every year. HostGator has amazingly moved ahead of everyone in the world of web hosting for speed, reliability and support for over 9 consecutive years. You can Read the long list of awards they have achieved so far at their homepage.

I must tell you that these awards matter a lot because they are reviews collected after detailed research and they are not paid reviews. Therefore their authenticity is always respected and can't be ignored.

I researched for almost a week before choosing our web hosting company. Almost every professional blogger, designer and developer that I came across used HostGator as his web host. I read their reviews and read several forums before making my mind to choose HostGator to provide us with a storage space where we could save our resources and tools. Its one month now since I first joined HostGator and the experience so far has been outstanding. I am learning and experiencing new technologies and can easily apply them to the blog because all latest web technologies and development tools are fully supported by HostGator Control Panel.

They also provide free SEO software to monitor and track performance of your blog along with free $100 Adword and $100 Yahoo Ads campaign if you live in USA.

What can I create after buying a hosting plan?

You can create almost anything using the softwares found in HostGator control Panel (Cpanel)

  1. Blog Software  eg: Wordpress, LifeType
  2. Forum Software
  3. Gallery Software
  4. Guestbook Software
  5. Website Builder
  6. Mail Software  eg: xyz@mybloggertricks.com
  7. Social Networking Software   eg: Facebook, mySpace
  8. Wiki Software
  9. Survey Software
  10. Billing Software
  11. Chat Software
  12. Directory Software
  13. eCommerce Software

I am using Free Blogger, How would it effect me?

You can continue using blogger the same way you did before. You will write and access your posts from blogger.com dashboard as you normally do. Everything would remain the same except that now you don't need to save your style sheets, scripts and web pages on third party servers. You will have your own allocated disk space at HostGator which you can use to create unlimited numbers of sub domains like a Blogging Forum, tool or services Page. Your blog would load much faster than before and would grow more popular amongst the readers and daily visitors.

You can create a separate webpage for any purpose you may like. For example: You can create a uniquely designed webpage for each of your Ebook promotion or any other product promotion. You can do everything that pro bloggers have been doing so far.

I am using Free Wordpress, How would it effect me?

You can easily transfer your posts to your self hosted Wordpress blog with the help of agents. HostGator guys provide great support for Wordpress and the community is always more  helpful in your case. You will have all the privileges that I explained for a blogger user.

Note: Incase you needed premier help in redirecting your Free Wordpress to Paid Wordpress without losing traffic and ranking then you may please contact us via our Services Page

Will Domain Migration Effect my Ranking or Traffic?

Surely not! You can migrate your domain from your current registrar to HostGator within a week and during this time your website would work just normal. It wont stop working or show a no server found error. The transfer never effects your traffic or ranking. Since you are not changing your domain address and just the company who owned your domain therefore all your backlinks will still point to you and you can continue enjoying the PageRank Juice.

However if you are using Blogger.com then your website will go down for just 24 hours till your DNS settings are propagated successfully. We had informed our readers when MBT was about to Go down for a day. Luckily things proved more easy then we expected thanks to the sincere help of HostGator Agents.

How much will it cost me?

It will cost you less than $100 per year! Imagine you waste more than $100-$200 per month on your stomach and accessories, a small budget can build your entire future career. I have share below discount Coupon codes that you can use to get up to 25% discount on your hosting plan.

 

Ready To Become a Webmaster?

 

If you have made up your mind just like me and wish to start experiencing the lifestyle of a webmaster for less than $100 per year then the details below is what you must understand and apply the sooner possible:

HostGator Hosting Plans

There are three business plans that HostGator offers which are:

1. Hatchling Pan

  • Single Domain
  • UNLIMITED Disk Space
  • UNLIMITED Bandwidth
  • Shared SSL Certificate
  • Starting at $6.71/month   Which means $107 per year   This will decrease further after applying our 25% discount coupon

2. Baby Plan   (The plan that we use)

  • UNLIMITED Domains
  • UNLIMITED Disk Space
  • UNLIMITED Bandwidth
  • Shared SSL Certificate
  • Starting at $8.96/month  which means $143 per year. Would further decrease with Discount coupon

3. Business Plan  (Obviously Not for bloggers)

  • UNLIMITED Domains
  • UNLIMITED Disk Space
  • UNLIMITED Bandwidth
  • FREE Private SSL & IP
  • FREE Toll Free Number
  • Starting at $12.71/month  which means $203 per year. Would further decrease with Discount coupon

I used Hatchling plan for running this blog and I will highly recommend it if you are planning to run just one domain on a single HostGator account. If you have more than one blogs/domains than Baby plan is a much profitable hosting plan for you. We are planning to launch a new blog so we will be upgrading to baby plan because we can run two blog networks on a single account for less than $76 per year which is just amazing. This amount will further decrease thanks to discount coupons.

Update: We are using baby plan now!

Conclusion:

Use Hatchling if you want to run just one Domain

Use Baby if you are planning to open more domains in future.

For How Many Years Should You Register?

Register your domain for no less than 3 years. If your register for Less than three years suppose 1 year or 2 years, then it would cost you more because higher discounts are given only when you register for a minimum of three years. We registered our blog for 3 years and I advise the same for you. Higher Discount Coupon codes do not apply for less than three years.

Once your registration expires after three years, you can then easily renew it. They wont terrify you with deadlines.

25% Discount Coupon Codes

If you register now using the coupon code below during the sign up process you will get 25% discount on any hosting plan you choose. You can enjoy free first 7 months with the following discount codes:

discount with coupon

Straight $26.85 Discount ! Apply for at least 3 years!

Click this link and try it.

123927819218

If you are buying a hosting for just one year then using the following coupon will give you $9.94 OFF.

Click this link and try it.

5153557876

We will make sure to share higher discount coupon codes in coming days.

How To Transfer Your Current Domain To HostGator?

Domain transfer is amazingly free. HostGator did not charged us for Domain transfer unlike other web hosting companies that charge around $28 for a domain transfer. You may confidently proceed for Hatchling or baby plan. During the process if you needed any help you can always contact us or post your relevant queries in the comment box below.

Wish you a happy blogging career. Peace and blessings pals. :)

Share:

0 comments:

Post a Comment