HOW TO: Blogger Blog to Ionic 3 App

In the tutorial we are going to create an Ionic app from a Blogger blog. It will take about 1 hour. The first steps are to get an API Key so that you can use the Blogger API and then find a suitable blog.

Get an API Key:

  • Sign in to Google.
  • Click “Get a Key” here.
  • Select project or create a new project.
  • Click “Enable API”.
  • That will generate a random string, which is your API key.
    • I will use XXX-API-KEY-XXX. Replace that with your API key.

Find a suitable blog:

  • I will use
  • Call the Blogger API with your key (XXX-API-KEY-XXX) and url of the blog (URL-OF-BLOG).
    • The URL must contain “https” or “http” at the beginning.
  • Response type one:
  • Response type two:
    • A JSON object with some basic information about the blog, including name and description.
    • This means that the url is valid and suitable for this tutorial.
    • blank template.
    $ sudo npm install -g ionic cordova
    $ ionic start blog-app blank
    $ cd blog-app
    • Create a provider and a page for you app.
    $ ionic generate provider constants
    $ ionic generate page post
    • Run the app to see progress.
    $ ionic serve --lab


    • Import the HTTP module.
    • Add the HTTP module to imports.
    • Import the post page.
    • Add the post page to declarations and entryComponents.
    import { HttpModule } from '@angular/http';
    import { PostPage } from '../pages/post/post';
    declarations: [
    imports: [
    entryComponents: [

    Constants Provider

    • Create two properties to store the url of the blog and your API key.
    private url = '';
    private apiKey = 'XXX-API-KEY-XXX';
    • Create a function to return each property.
    getUrl() {
      return '' + this.url;
    getApiKey() {
      return '' + this.apiKey;

    Home Page

    • Import the Http library and add it to the constructor.
    • Import the Constants provider and add it to the constructor.
    import { Http } from '@angular/http';
    import { ConstantsProvider } from '../../providers/constants/constants'
    constructor(constants:ConstantsProvider, http: Http, ... ) { ... }
    • Create a property for the title of the blog.
    • Create a property for the list of blog posts.
    title: string;
    posts: any[];
    • Inside the constructor:
      • Call the Blogger API to get the details of the blog, using the information from the Constants provider
      • Set the title.
      • Call a function to get the posts, passing the posts API link.
    http.get('' + constants.getApiKey() + '&url=' + constants.getUrl())
      .subscribe(response => {
        let data = response.json();
        this.title =;
    • Create a getPosts() function:
      • Get the posts from the API, using the key from the Constants provider.
      • Set the posts property.
    getPosts(url:string) {
        .subscribe(response => {
          let data = response.json();
          this.posts = data.items;
    • In the html file, display the blog title in the header. Set the padding to 0.
      <ion-titlestyle="padding: 0;">
        {{ title }}
    •  In the html content:
      • Show a list of blog posts.
      • Display the title and author of each blog.
      • Add a click listener to open the post.
      <button ion-item *ngFor="let post of posts" (click)="openPost(post)">
        <h2 [innerHTML]="post.title"></h2>
        <p [innerHTML]=""></p>
    • At this point, you will be able to see the list of posts.
    • Import the post page.
    import { PostPage } from '../post/post';
    • Create and openPost(post) function to open the post page and pass the selected post as a parameter.
    openPost(post) {
      this.navCtrl.push(PostPage, {post:post})

    Post Page

    • Create a property of the post.
    • Get the post from the navigation parameters.
    private post: any;
    constructor( ... ) { = navParams.get('post');
    • Change the header title to the title of the post
        <ion-title>{{ post.title}}</ion-title>
    • Add a heading to show the full title of the post.
    • Add div to contain the post.
    <ion-content padding>
      <h2 [innerHTML]="post.title"></h2>
      <div [innerHTML]="post.content.rendered"></div>
    • At this point, you will be able to see the post in your app.

    What’s Next?

    Well done! You turned a Blogger blog into an app. You’ve seen what it looks like on your web browser. The next thing is to view it on your phone or tablet and see what it would as a native app. Ionic DevApp is the quickest and easiest way to do this if you have and iPhone or Android.

    The app is a good start, but there are still many ways to improve it. Here are some ideas:

    • Add styling to the app and take advantage of the variables.scss file.
    • Add a refresher so that the user can pull down to get the latest posts in a category.
    • Detect when the users scrolls to the bottom of the category list and load older posts.
    • Check out the Blogger API Documentation and see what else you can implement.

    My source code:

    Related: HOW TO: WordPress Blog to Ionic App

12 thoughts on “HOW TO: Blogger Blog to Ionic 3 App”

  1. Hello sir, I did as you explain. it’s working good and getting post…but how to open next page or get more post?

    1. After you call the posts API
      The returned object will have “nextPageToken: PAGE_TOKEN”, pass that value in the next call as pageToken=PAGE_TOKEN

      The returned object will have a nextPageToken if there are more posts and a prevPageToken if there are previous posts.

      If you are “orderBy=updated”, then be careful. When I tried, I found that pagination and “orderBy=updated” did not produce the expected results.!topic/bloggerdev/7jPDLv8HUaE

    1. Only photos from within the post will be shown. For other photos, you will have to read the Blogger documentation.

  2. Hey! I could not use the response object as you did. At
    let data = response.json();
    it says: Property ‘json’ does not exist on type ‘Object’.

    Instead, I used JSON.stringify() and it worked. But again, at
    this.postData = data.items;
    it says: Property ‘items’ does not exist on type ‘string’.

  3. Its a great start on using the blogger API into ionic app. However, I’m looking for some help in creating a new blog post/page from an ionic app on the blogger. Any help would be appreciated. Thanks.

  4. Dear Ben,
    I am so sorry to said that this code is too old (at least for ionic). Can you make a post about this which is compatible with ionic’s latest version with video tutorial. I know this will be too much. But ionic is new for me and this code has too much error.

Leave a Comment

Your email address will not be published. Required fields are marked *