Saturday, October 31, 2015

5 Major Disadvantages of using HTTPS in Blogger

5 Major Disadvantages of using HTTPS in Blogger

Link to My Blogger Tricks

5 Major Disadvantages of using HTTPS in Blogger

Posted: 31 Oct 2015 08:11 AM PDT

5 Major disadvantages of HTTPS in bloggerNow when Google has provided the option of HTTPS encryption for blogspot blogs with non-custom domains, are you ready to turn on HTTPS on for your blog? But before that it is really important to understand the risks, complexity and SEO costs involved in switching to HTTPS. In our last post we discussed the differences between http and https and we also explained that less than 0.1% of all sites in internet has gradually adopted using https, though it sounds less but sites which are serious about a slight ranking boost in their search results are accepting to make this SEO shift. Lets discuss 5 major reasons why we recommend that you should not switch to HTTPS at this time and if 'enabling HTTPS' could effect your BlogSpot Search Ranking.

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

Topics List

5 Major Disadvantages of turning on HTTPs in Blogger

Following are some of the solid reasons that makes me think twice before advising someone to switch on HTTPs for his blogspot blog.

1. Blogspot Images have absolute paths and not relative

All images that you upload in a blogger blog are stored inside Picasa web album. Before Google announced the use of HTTPS on its servers, Picasa was using the non-encrypted HTTP protocol for all its URLS. Though Picasa now has an SSL certificate and has enabled HTTPS encryption for itself but Picasa http URLS are not auto redirected to https in Blogger. All images that you upload are instead saved in http protocol which is the biggest SEO mistake and makes https useless for blogspot blogs because your visitors will continue getting http errors on your site unless you manually change each http to https in all your posts one by one! Which I know is hectic and time consuming. But no easy solution other than this.

Even if you have enabled HTTPS, your visitors will continue seeing the following http error in their address bar which can frighten them! =) It is caused mainly due to image links stored in http:// instead of https://

https error in blogspot blog

This issue could have easily be handled if blogger used relative URLS for storing images instead of absolute as shown below:

relative path and absolute path for images

In Relative URLS case you don't need to change the URLs from http to https because the image src will pick the current Domain URL structure of your site no matter how many times you change it.

For example if your URL is

http://example.blogspot.com

then your Images would then be stored at

http://example.blogspot.com/-/image.png

Now if you have changed your URL to

https://example.blogspot.com

then since you are using a relative path for images which is not changed, all your image URLS will automatically get the correct https URLs as shown below:

https://example.blogspot.com/-/image.png

Now since all your picasa images are stored with absolute paths then in this case your image URL will not be switched to https unless you manually do it as shown below:

If your Image has the following URL inside a post:

http://lh6.ggpht.com/_7wsQzULWIwo/Srn4c3EpmaI/AAAAAAAAB24/rq9_CVED8is/s800/Animated%20Picasa.gif

now if you decide to switch your .blogspot.com domain to HTTPS, your image URL will not change and will remain the same as shared above unless you manually edit the post and replace http to https. The image will work with both http and https protocols. Test below:

https://lh6.ggpht.com/_7wsQzULWIwo/Srn4c3EpmaI/AAAAAAAAB24/rq9_CVED8is/s800/Animated%20Picasa.gif

This issue has been first time highlighted online and If someone from official blogger team is reading this post then I request them to fix this redirection problem the sooner possible.

2. HTTPS is not 301 redirected to https

Google treats https and http versions of your blog as two different sites. Because the http version of your blogspot blog URL is not 301 redirected permanently to the https version. This is the same problem that we discussed for Picasa images.

If you have enabled HTTPS for your blog then you will observe that you can access your blog with both http:// and https:// . You will notice that when you type http://yourblog.blogspot.com in the browser address bar, your blog will not be redirected to https://yourblog.blogspot.com!

This is a serious SEO mistake and can cause your blog get penalized with Panda penalty for promoting duplicate content. Because all your posts will appear twice in search results once for the http:// version and once with https:// encryption.

3. HTTPS can effect your Google PageRank

Due to poor configuration of 301 redirection, you will loose all PR juice of your backlinks for the HTTPS version of your blog URL. Sites which have linked to the http:// version of your blog URL, will pass the PageRank juice only to the http version and you will get no share in the HTTPS version of your site which is your ultimate URL!

In short that https version of your blog is a complete new site unless blogger 301 redirects the HTP protocols correctly.

4. HTTPS can reduce your AdSense earning

If you are a AdSense publisher, then you may see your earnings reduce significantly. Google itself says that sites with HTTPS pages earn less than those with HTTP pages because AdSense will restrict your ads to those that are SSL-compliant and will not shows ads on your site which are using HTTP! =)

HTTPS-enabled sites require that all content on the page, including the ads, be SSL-compliant. As such, AdSense will remove all non-SSL compliant ads from competing in the auction on these pages. If you do decide to convert your HTTP site to HTTPS, please be aware that because we remove non-SSL compliant ads from the auction, thereby reducing auction pressure, ads on your HTTPS pages might earn less than those on your HTTP pages.

5. HTTPS can make widgets stop working on your blog

All your social plugins which have scripts hosted at HTTP will prompt http errors to your visitors unless you manually replace the http with https:// inside your blog template for all these plugins, and gadgets which uses JavaScript so that you may get rid of the mixed content issue. 

With HTTPs disabled the FB plugin was working correctly:

blogspot blog without HTTPS encryption

fb plugin working fine

With HTTPs enabled the FB comments count stopped working:

blogspot blog with HTTPS encryption

fb plugin not working in https

 

Willing to Turn on HTTPS?

If after reading all these points you still wish to switch to HTTPS then follow these steps:

To enable HTTPS:

switching on HTTPS in blogger

  1. Go To Blogger > Settings > Basic > HTTPS Settings.
  2. In HTTPS Availability, select Yes.
To disable HTTPS, follow the steps above and select No for HTTPS Availability.  

If you disable HTTPS, visitors will be redirected to the unencrypted HTTP version of your blog. However all bookmarks to your blog will continue to work.

In our coming posts we will discuss how to fix the mixed content issues linked with https and fix all such https errors inside the blogger template.

Have Questions?

This was my deep research on this new trending topic amongst blogspot users. I tried to be as much clear as possible and inform everyone about the SEO and revenue risks involved with HTTPS. Since https encryption is yet not available for blogs hosted on a custom domain, we will therefore wait and see if we can choose to switch to HTTPS. So far I am strongly against turning on HTTPS due to the above reasons that I explained, unless blogger provides an easy migration tool, it is almost impossible to edit each post manually and replace the http protocols yourself in order to get rid of the mixed content issue which is caused mainly by images and scripts inside your template and posts.

What are your views on this topic, have you planned to setup HTTPS for your blog? If yes then why haven't you yet decided to first buy a Custom domain for your blog and then take this step?

Thursday, October 29, 2015

Retrieve Content Excerpt From Blogger JSON Feed API

Retrieve Content Excerpt From Blogger JSON Feed API

Link to My Blogger Tricks

Retrieve Content Excerpt From Blogger JSON Feed API

Posted: 29 Oct 2015 08:33 AM PDT

extract excerpt via jasonWe have received some great feedback from all of you since the day we started this step-by-step tutorial series on extracting data from Blogger JSON Data API. So far we have discussed the basics of extracting data from a JSON file and we succeeded in developing a recent Posts widget sorted by Label. Today we will learn how to extract excerpt of your Posts. You will be able to extract the first few characters from the starting paragraph of your blog posts that are located above the "Jump break" or you can also extract all the post content and print it. We normally retrieve Content summary and display first few lines inside the recent posts widget to give an idea of what the post is all about. It is sort of a brief description of the article itself. You might have seen the description snippet appearing below recent posts in Wordpress blogs and today you will learn how to code your blogspot widget to display Post summary of your recent articles published on your blog. Lets get to work, same code but with slight modifications!

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

Topics List

Where is the Content Data Stored?

As we discussed in our last tutorial, you first need to change your site feed settings to allow feed in "Full" length or you can also choose "Until Jump break", only then you can you proceed.

site feed settings

Your post content is stored as HTML inside the following path:
json.feed.entry[i].content.$t; 
Which means we will first search through [ ] entry array and then extract the post html data from the { } content object where the content is stored inside the node $t as shown below:
 
content node
 
Click the content node and you will see that the $t stores your entire post as its value.
post content stored here

Displaying Recent Posts by Label in Blogger

We will use the exact same code that we shared in Part#6 , the only addition that we made this have been highlighted as Green.

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

//----------------------------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 = "";
//----------------------------- 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);


//----------------------------------- Printing List
var listing = "<li><a class='mbttitle' href="
+ListUrl+
"target='_blank'>"
+ListTitle+
"</a><span>"
+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 = 5;
TitleCount = 70;
ListLabel = "Social Media";
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;}
.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;}
</style>

Note:
  • As you can see above we introduced a new variable ChrCount and then set its default value to 80 to show only the first 80 characters of your post excerpt/summary.
  • We then introduced two new variables (ListConten  ListContent ) inside the loop and set their values to empty.
  • ListConten  will store the Post content which will also contain the thumbnail images + links. Since we just want the text and no images or links therefore we created another variable ListContent
  •  ListContent will replace/remove all images and links from the post content and will give us a Plain text. This is done using the replace() method.
  • To make sure we display only selected number of characters, we used the substr( ) method to display only the first ChrCount characters.
  • We then add the code for printing the results inside the <span>" tags.
  • Finally added some styles to make it's appearance look better

OUTPUT 

You have now created a recent posts width that displays Titles with Post Summaries or Post excerpts.

recent posts with post summaries

 

Have Questions?

Confused with any part still un-cleared just post your comments. In my next tutorial I will share how to display thumbnails next to each title. We will also learn how to display YouTube thumbnails and other third party thumbnail images inside this widget. A lot is on its way so stay tuned for all the updates!
 
Can you answer why we used substr() and not substring() method here? :)
 
Peace and blessings buddies! :>

Site Feed Settings - Choose 'Full' or 'Short'?

Posted: 28 Oct 2015 11:34 AM PDT

blogspot site feed settings Before proceeding towards extracting description snippet or summary snippet from JSON feed, it is really important to first understand what does the Blogspot Site feed tool for feed syndication actually do. Site feed setting options effect how your Feed structure is built and displayed and what data is contained inside the { } summary or { } content objects. Your JSON feed extraction will seriously fail if you have not chosen the right Feed length option. Lets explore this basic setting with technical perspective discussed first time online for blogspot blogs.

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

Topics List

Site Feed Settings for Blogger

You clearly now that if you navigate to Blogger > Settings > Other > Site feed , you will land on a page where you can decide to enable or disable the site feed(s) for your blog.

Here, you can select how much of your content you want to syndicate.

blogger site feed options

1 "Full"

Selecting this option will put the entire content of each post in your site feed. This option creates a { } content object node in your JSON file. This node will store all content HTML (i.e. All media: Images, text, links, videos, post formatting etc.) of your post inside it.

Content node

If you click this node, you will be able to see your article in exact same article because the HTML is stored here. This is the most important JSON node which holds the content of your entire article.

The type of data stored in this node is "html" which means all your post formatting is maintained.

HTML stored inside Content node

2 "Until Jump Break"

This option shows all post content before your 'jump break' / 'read more'. Also creates a { } content object node but will store only content before the jump break.

3 "Short"

Select Short to syndicate approximately the first 400 characters. This will only include an excerpt from the beginning of each post. Creates a { } summary object node in JSON

Summary object node

Note that the type of data stored in this node is "text", which means you can now extract only plain text form this node but no content with thumbnail images, links or proper formatting.

summary node stores text

Therefore due to this reason throughout our tutorial series we will choose the "Full" option to display feeds in full length.

4 "None"

It will turn off your site feed which no sane man would ever do!  No JSON, atom or RSS XML files are generated for the blog

If you select None, your blog will not be syndicated and its content will not be indexed by Google Blog Search!

5 "Custom"

For more advanced options, you can select "Custom." Using this option you can choose Feed length for Posts and Comments separately.

Blog feed custom length options

When you select "Custom," you'll see options for three different types of feeds. Each option has the same "Full," "Short," and "None" setting choices.

  • Blog posts: This is the same as the original, "Allow Blog Feed" option.
  • Comment feed: This will contain all comments made on all posts on your blog.
  • Per-post comment feed: Here, each individual post will have its own site feed, containing only its own comments.

So far I don't see an exception usage of the "custom" option so we will avoid using it because the "Full" option provides us with all data that we need in clean and neat HTML formatting!

Which Option to Choose?

Throughout our tutorial we will display feeds in "Full" or "Until Jump Break" because both these options provide us with information that we need. You can choose anyone of them. If you think you don't wish to show full posts to your Email Subscribers then "Until Jump Break" option is what you need to choose.

Have Questions?

I hope you now know exactly what these site feed settings actually do at the technical side and how it effects the JSON structure of your feeds. Let me know if you need any help. The coming tutorials are extremely interesting and full of knowledge. Stay tuned! Peace and blessings buddies :>