Thursday, December 10, 2015

Blogger Sitemap Generator - Version 2016

Blogger Sitemap Generator - Version 2016

Link to My Blogger Tricks

Blogger Sitemap Generator - Version 2016

Posted: 10 Dec 2015 06:18 AM PST

Blogger Sitemap Generator and Pinger

Blogger XML Sitemap Generator and Pinger was our first PHP tool that we released back in 2012. We received great feedback from all of you and based on that precious comments we are releasing the updated version of this online tool to help you build both Dynamic Sitemaps and Atom Feed Sitemaps. Lets call it version 2016! This tool is much more advanced due to a better optimized algorithm and its capability to create sitemaps for unlimited posts. It will also help you ping your multiple sitemaps to Bing Webmaster tools for faster indexing. Since Blogger has decreased the number of items or entries from 500 URLS to just 150, we needed a quick update to help you encounter this sitemap indexing bug.

It's the complete toolkit required to create correct XML sitemaps for BlogSpot blogs. The tool does the hectic mathematical calculation on your behalf that we discussed earlier in the following post:

Blogger Sitemap Generator

How To Use it?

The UI is extremely easy to understand. I have mentioned all details. All you need to do is to submit your Blog URL and total number of your Published Posts.

Blogger Sitemap Generator Tool

Your blog URL must end with a forward slash. For example:

Correct URL

http://www.YourBlog.blogspot.com/

Incorrect URL

http://www.YourBlog.blogspot.com

Reason: No forward slash at the end.

To find published posts count go to Blogger > Posts > Published

Published posts in blogger

  1. Type both URL and Post count inside the text boxes and click the submit button.
  2. The page will load to generate Dynamic Sitemaps and Atom Feed sitemaps along with Ping links for Bing.
  3. Finally go to Google Search Console and submit the sitemaps one by one. For doing this just follow this tutorial: submit Multiple sitemaps to Google
  4. To learn how to submit your blog sitemaps to Yahoo and Bing then Please read Submit sitemap to Yahoo and Bing without errors.

Your Feedback!

Do share your feedback about this latest update and let us know what needs to be done to make it even better. I hope this tool may help you create better xml sitemaps for your blogspot blogs and help you encounter the ongoing traffic drop issues that you are facing due to incomplete sitemap index file. Enjoy using it and remember me in your prayers. Peace and blessings buddies!  =)

Why Blogger Sitemap Submits only 20 Pages & 3000 URLS?

Posted: 10 Dec 2015 04:34 AM PST

Blogger Sitemap.xml Not Indexing Blogger Dynamic sitemap.xml due to some technical cache problem, is generating only 20 sub-pages where each page contains only 150 links (i.e. 20 X 150 = 3000 urls). That means, your blogspot Sitemap Index File  will only submit a maximum of 3000 Posts to Google Webmaster Search Console due to this technical bug. Upon exploring the organization of sitemap pages inside the index file (i.e. Parent Sitemap.xml), I came to discover that the blogger server is successfully generating sitemap pages in sequential order, the reason why they are not listed inside the Sitemap Index is because the Parent page is not pinged or refreshed after 20 pages are registered.  I am sure I may be sounding a little confusing at this moment to newbies but the illustrations and solutions below will help you understand and fix this ongoing problem where most users complained that webmaster is indexing only 3000 URLS and not indexing the remaining of your blog posts.

If you just heard about Blogger Dynamic sitemaps that I strongly recommend that you first read the following post:

Calculate the number of Sitemaps Pages Your Blog Needs

The Blogger Sitemap Index File groups your blog posts into subpages where each page contains a total of 150 Posts. A new page is created each time your post count inside an existing page exceeds 150. 

For example if your blog contains a total of 600 published posts then your sitemap index file will create a total of 4 pages where each page will contain 150 links (i.e. 600/150 = 4 Pages). The pages will be listed inside sitemap.xml in this order:

Note: Your Sitemap Index file is located at Your-Blog.blogspot.com/sitemap.xml

<loc>http://www.Your-Blog.blogspot.com/sitemap.xml?page=1</loc>

<loc>http://www.Your-Blog.blogspot.com/sitemap.xml?page=2</loc>

<loc>http://www.Your-Blog.blogspot.com/sitemap.xml?page=3</loc>

<loc>http://www.Your-Blog.blogspot.com/sitemap.xml?page=4</loc>

Now suppose you have around 717 published blog posts. In this case if you apply old school math then you need to create ( 717/150 = 4.78 ~ 5 Pages ). Always take one page extra if you get a divisional result in decimals. We would have considered only 4 pages if the result would have been exactly 4.00.

Sitemap index will automatically create these pages as long as your posts does not exceed a maximum of 3000. It creates only 20 pages to accommodate those 3000 posts (i.e. 20x150 = 3000). The remaining pages are not listed though created by the server and we will discuss here how to generate those extra pages manually and submit them separately to Google search console.

We need to submit the dynamic sitemap in two ways which are discussed below:

1. Submit Sitemap if your Posts are less than 3000

If your published posts are less than 3000 articles in all then you just need to submit the following sitemap to Google search console and Bing webmaster tools:

http://www.Your-Blog.blogspot.com/sitemap.xml

2. Submit Sitemap if your Posts are greater than 3000

If the count of your published posts is greater than 3,000 then you need to manually submit the subpages using the calculation we did earlier.

Follow this formula:

1 Suppose you have published up to 4,127 posts. Then you need to create subpages for only (4,127 - 3,000 = 1127) Posts. We will call them the leftover posts.

2 Divide the leftover posts by 150 to find how much sitemap pages you need to submit.

1127 / 150 = 7.513 ~ 8 Pages

3 Start the page count from 21 because 20 pages are already included inside the Parent sitemap.xml. So the sitemap pages that we need to submit along with the index sitemap are:

http://www.Your-Blog.blogspot.com/sitemap.xml

http://www.Your-Blog.blogspot.com/sitemap.xml?page=21

http://www.Your-Blog.blogspot.com/sitemap.xml?page=22

http://www.Your-Blog.blogspot.com/sitemap.xml?page=23

http://www.Your-Blog.blogspot.com/sitemap.xml?page=24

http://www.Your-Blog.blogspot.com/sitemap.xml?page=25

http://www.Your-Blog.blogspot.com/sitemap.xml?page=26

http://www.Your-Blog.blogspot.com/sitemap.xml?page=27

http://www.Your-Blog.blogspot.com/sitemap.xml?page=28

Submitting Blogger Sitemap subPages to Google

The above is a screenshot of the sitemaps I submitted for one of our clients who had more than 11,147 posts. I need to create a total of 55 Pages.

Good news!

If the above method seems quite a lot like elementary math to you then wait for just 6 hours and I will release a PHP tool that will automatically create sitemaps for you. I will release this tool today inshAllah.

Need Help?

Let me know if you need any further clarification or help in calculating your sitemap subpages. I would love to help in this case. Do post your comments below. I hope all those who were encountering the traffic drop issue due to sitemap indexing problems may find this tutorial helpful.

Peace and blessings buddies! =)

Saturday, December 5, 2015

Extract YouTube Thumbnails From Blog Posts via JSON

Extract YouTube Thumbnails From Blog Posts via JSON

Link to My Blogger Tricks

Extract YouTube Thumbnails From Blog Posts via JSON

Posted: 05 Dec 2015 06:16 AM PST

Extract YouTube Thumbnails from Blog posts

Today's tutorial is first time shared online Alhamdulillah that will discuss the most advanced and unique technique of extracting thumbnails from a YouTube Video Iframe embedded inside your blog posts. Our technique is unique because it will ignore all images inside the post and will only pull out the Iframe Image provided by YouTube and will display it as the featured thumbnail. If no video Iframe was found only then the existing third party images inside the blog post will be considered to play a thumbnail role. We have already discussed the manual method of displaying YouTube thumbnails in blogspot posts and today we will discuss the dynamic method to automatically do the job for you. Although Blogger now provides a default link to YouTube thumbnail in its JSON feed API but due to its low resolution we still need a better dynamic method to do the job for us. Lets get to work!

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

Topics List

Location of Thumbnail URL

We will used the second method that we discussed in part#9 to extract an image from inside the post content using the path:

json.feed.entry[i].content.$t

Kindly go through part#9 to know the basic technical details

Display YouTube Featured Thumbnails in Recent Posts Widget

Now comes the coding part. We will use the exact same script that we have shared in part#10. Major modifications made have been highlighted in Orange with white text.

<!-- ######### Writing Callback Function ############# -->
<script type="text/javascript">
//----------------------------Defaults
var ListBlogLink = window.location.hostname;
var ListCount = 5;
var TitleCount = 70;
var ListLabel =" ";
var ChrCount = 80;

var ImageSize = 100;

//----------------------------Function Start
function mbtlist(json) {
document.write('<ul class="mbtlist">');
for (var i = 0; i < ListCount; i++)
{

//-----------------------------Variables Declared
var listing= ListUrl = ListTitle = ListConten = ListContent =ListImage =thumbUrl =sk = "";
//----------------------------- Title URL
for (var j = 0; j < json.feed.entry[i].link.length; j++) {
if (json.feed.entry[i].link[j].rel == 'alternate') {
break;
}
}
ListUrl= "'" + json.feed.entry[i].link[j].href + "'";
//----------------------------------- Title Stirng
if (json.feed.entry[i].title!= null)
{
ListTitle= json.feed.entry[i].title.$t.substr(0, TitleCount);
}

//----------------------------------- Content Check

ListConten = json.feed.entry[i].content.$t;
ListContent= ListConten.replace(/(<([^>]+)>)/ig,"").substr(0, ChrCount);

//------------------------------------ Thumbnail Check

// YouTube Thumbnail Search

if (json.feed.entry[i].content.$t.match(/youtube\.com.*(\?v=|\/embed\/)(.{11})/) != null)
{ var youtube_id = json.feed.entry[i].content.$t.match(/youtube\.com.*(\?v=|\/embed\/)(.{11})/).pop();
if (youtube_id.length == 11) {
        var ListImage = "'//img.youtube.com/vi/"+youtube_id+"/0.jpg'";
        }
}
// Blogger Default Thumbnail Search

else if (json.feed.entry[i].media$thumbnail)
{
thumbUrl = json.feed.entry[i].media$thumbnail.url;

sk= thumbUrl.replace("/s72-c/","/s"+ImageSize+"/");
ListImage= "'" + sk.replace("?imgmax=800","") + "'";
}

// Support For 3rd Party Images
else if (json.feed.entry[i].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]")/) != null)
{
ListImage =  json.feed.entry[i].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]")/)[1];
}

else
{
ListImage= "'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmHVmKC0KNO5XzkCef8dYzoxertepzPo-eG1uPFbHfkWY4cRvTNRQsBAXpjOYGxHoDa4PDggRaDicuGWobKoQ7fKy2O3Inxd1wu53KrL0WO6CNjQwOApFYISt4Zo3lZQrOfy7FKc8xY0k/s200/Icon.png'";
}


//----------------------------------- Printing List
var listing = "<li><a href="
+ ListUrl+
  "><img src="
+ListImage+
"/></a><a class='mbttitle' href="
+ListUrl+
"target='_blank'>"
+ListTitle+
"</a><span class='icontent'>"
+ListContent+
" ...  <a href="
+ListUrl+
" class='imore'>»</a></span></li>";
document.write(listing);
}
document.write("</ul>");
}
</script>
<!-- ######### Invoking the Callback Function ############# -->
<script>
ListBlogLink = "http://www.mybloggertricks.com";
ListCount = 4;
TitleCount = 70;
ListLabel = "Video";
ChrCount = 100;

document.write("<script src='"+ListBlogLink+"/feeds/posts/default/-/"+ListLabel+"?alt=json-in-script&callback=mbtlist'></"+"script>");
</script>
<!-- ######### Styles for Look ############# -->
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<style>
.mbtlist {list-style-type:none;overflow:hidden}
.mbtlist li {margin:0px auto 20px auto; clear:both; color:#666; font-family:Helvetica; font-size:12px; border-bottom:1px dotted #ddd;padding-bottom:10px;}
.mbtlist .mbttitle {font-family:oswald; font-size:16px; color:#0080ff; font-weight:normal; text-decoration:none;}
.mbtlist .mbttitle:hover {color:#00A5FF;}
font-family:georgia; font-size:15px; font-weight:bold}
.mbtlist div span{margin:0 10px 0 0; display:inline-block;}
.mbtlist span {display:block; margin:5px 0px 0px; padding-right:5px;}
.mbtlist .imore {font-size:16px; font-weight:bold; text-decoration:none; color:#666; line-height: 0.7em;}
.mbtlist img {float:left; margin:0px 10px 10px 0px; border:6px solid #fff; padding:0px; width:100px; height:65px; box-shadow:-1px -1px 4px #777; }
.mbtlist .icontent {text-align:justify;}

</style>

OUTPUT:

YouTube Featured Thumbnails in blog list 
Note:

If you visit our Label Video, you will notice that the posts also contain images and our blog is displaying those images as thumbnails and not displaying the youTube thumbnail. But with the above advanced widget, you will actually display youTube thumbnails. I will update the Summary plugin that our blog is using shortly.

How it works?

  • First we ran a loop to check if a YouTube Iframe actually exists.
  • Next we stored the 11 Characters YouTube Video ID inside the variable youtube_id using the .pop() method.  .pop() method returns the last group match of the regular expression i.e. {11} - the video ID
  • Finally we inserted the the Video ID inside the standard URL structure of YouTube Thumbnails. We stored the Image URL inside ListImage and passed this value for printing.
  • That's it!

How to use it?

To use this plugin for your blogs, simply copy paste the code inside a HTML/Javascript widget and replace ListBlogLink and ListLabel with your Blog URL and Label respectively. For more details read part#6.

Need Help?

Let me know if you ran through any problems in understanding the interesting concept shared above. I hope this method will take blogger to the next level and will help young developers to build better widgets for their blogspot blogs. Feel confident to ask any question by posting your comments. Your brother is here for any help required. =)

Thursday, December 3, 2015

Blogger Now Supports Creating Featured Thumbnails for YouTube Videos

Blogger Now Supports Creating Featured Thumbnails for YouTube Videos

Link to My Blogger Tricks

Blogger Now Supports Creating Featured Thumbnails for YouTube Videos

Posted: 03 Dec 2015 07:16 AM PST

YouTube Thumbnails Support in Blogger BlogsWhile developing a JSON based Plugin for blogger blogs, we observed that Blogger now creates a featured thumbnail image automatically for YouTube videos embedded inside blog posts. This means now you don't need to extract YouTube Thumbnails using an advanced JavaScript method. This is done dynamically by Blogger through its JSON Feed API. In this tutorial I will demonstrate in brief how this thumbnail is created and stored inside a json object. If you are a developer, you may find this discovery extremely interesting because it helps to shorten your code and optimize it for better performance as no search for YouTube thumbnail is required now on your behalf. So far the thumbnail support only exists for YouTube videos, I tested vimeo and dailymotion videos but the thumbnails were not created.

In our coming JSON series we will surely discuss the JavaScript technique that we previously used to develop widgets for clients because though blogger creates an auto thumbnail for YouTube Iframe but the disadvantage of this method is that the thumbnail is in square format having dimensions 72 x 72. Blogger is actually extracting the default small YouTube thumbnail which has dimensions 120 x 90 (pixels).Therefore if you wish to display large HQ thumbnails inside your apps then you may wait for our next tutorial.

If you are new to Blogspot JSON feeds, I would recommend that you at least read part1 and part2 of this tutorial series.

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

Topics List

The YouTube Thumbnail is stored inside media$thumbnail

Assuming you already have read how to view your JSON feed in a human readable format, I am sharing below the steps to locate where exactly the thumbnail is stored.

1. Embed a YouTube Iframe inside your blog and publish the post.

2. Copy your new JSON code. In our case we are using a test blog and the url for its JSON feed is:

http://www.facebook-comments-box.blogspot.com/feeds/posts/default?alt=json

3. Next Navigate to JSON > feed > entry

Select the most recent post which of course is inside the element { } 0

blogger json feed thumbnail

4. Expand the node media$thumbnail to see its elements.

media thumbnail node elements

From the image above you can observe that Blogger JSON feed provides 4 basic information about the thumbnails. The important among which is the url.

  • xmlns$media:  This tag provides the link for Media RSS specification directory which provides meta data info for video clips. Currently though it points to search.yahoo.com/mrss/ but it will soon be replaced with rssboard.org/media-rss in future. Full Details
  • url: This is the Image link to the default YouTube Thumbnail. Its default size 120 X 9.
  • height: default size for height
  • width: default size for width

The thumbnail that blogger creates ends with extension default.jpg. If you replace it with 0.jpg, you will get a much larger High Quality thumbnail. We will discuss how to do it in our coming tutorial.

http://img.youtube.com/vi/ht866-K1JeU/default.jpg  (120 x 90)

default youtube thumbnail

Replace with 0.png for large thumbnails

http://img.youtube.com/vi/ht866-K1JeU/0.jpg   (480 x 360 )

Large youtube thumbnail

Need Help?

For a more advanced approach I will share the JavaScript technique in next part of this tutorial series. Let me know if you have any queries with regard to the above tutorial. I have tested vimeo videos and also dailymotion videos by embedding them in blogspot posts but so far only YouTube thumbnails are supported in Blogger.