--- title: "Create a mobile app for ANY website" description: "We always talk about the dozen of connectors GoodBarber provides you to publish your content in your app. To this day, there are more than 30! But now, y" canonical_url: "https://www.goodbarber.com/blog/create-a-mobile-app-for-any-website-a267/" lang: en date: 2013-10-28 last_updated: 2022-01-26 --- # Create a mobile app for ANY website [Back](/blog/make-it-r13/) # Create a mobile app for ANY website Written by [Dumè Siacci](https://www.goodbarber.com/blog/author/dominique-siacci/) on Monday 28 October 2013· Last update: Wednesday 26 January 2022 ![](https://cmsphoto.ww-cdn.com/superstatic/41269/art/grande/5997374-8941388.jpg?v=1643188206.6677608) We always talk about the [dozen of connectors](https://www.goodbarber.com/connectors/) GoodBarber provides you to **publish your content** in your app. To this day, there are more than 30! But now, you may be wondering what a connector is? You might also be disappointed to see that your favorite platform isn't in our connector list. We do our best to offer a native experience, synching content from the most popular solutions in the market, but there are thousands! Today, I'd like to introduce you to our **custom connector**. This connector makes **GoodBarber compliant with all existing services** to publish content. Of course, the downside is that it involves work on your part... but, by the end of this post, you'll see that it's not that difficult. Let's discover together [how to create an app](https://www.goodbarber.com/blog/how-to-make-an-app/) for your Joomla, Drupal, ezPublish, Spip ... or any other solution, even one created from scratch. ## 1 - What is a connector? When we created GoodBarber, we wanted to avoid making a direct connection between your app and your website. We have already explained why in a [Friday talk about synchronization](https://www.goodbarber.com/blog/friday-talk-synchronization-a172/). There are 3 main reasons behind this choice: **- better maintenance**: many of you ask us to tweak GoodBarber to take into account some customization you made to your site. We always try to modify and implement the tweak to all the users that may need it. Managing those modifications on our servers is far more efficient. If we had a direct connection from your website to your app, each modification would have been made on every app, and would have required re-submissions. **- better performances**: we want your app to be fast and to provide a seamless user experience. We have a special focus on response time, data compression and transmission over the network, etc. Maybe you already familiar with the fact that our infrastructure is shared with WMaker, specialized in web hosting for more than 10 years now. With our 2 services combined, we serve more than 250 million requests per month. **- new connectors**: some of our team members work on the synchronization engine. They keep an ear out for your requests, and they create new connectors when a majority of you request them. The connector is here to "translate" the content of your website into a format used by your app to display it, natively. *Why not create yours?* ## 2 - The custom connector: the one you create by yourself If you don't find the right connector in our connector list, you can still **create yours, by yourself**! Let's take an example. If you have a website made with Joomla, you can use the RSS connector. But, this connector will prevent you from accessing some very cool features in your app like **posting comments**, adding a **search engine** or activating **pagination** so that content can be pulled on demand from the app. So the idea is to **create your own content feed**, and plug it into your GoodBarber app, using the custom connector. That way, you'll have **total control** over what you will publish into your app. **It's not very difficult** to achieve, but it takes some developing skills. ## 3 - What can I do with the custom connector? Basically, with the custom connector, you will be able to access all the features available with each type of content handled by GoodBarber: **articles, photos, videos, maps, podcasts, events, comments, etc.** Depending on your needs, you might have to create several **content feeds**: - get **last items** - get **comments** and post comments - filter **items by categories**, tags ... it's up to you to decide - **search engine** ## 4 - How to create a custom content feed? Everything is explained in your backend. Go to **Help Center > Developers > Content API** You will find the **specifications** to follow in order to create your own feed. Keep 2 important things in mind: - all the feeds you are going to create will be **JSON formatted**, with the same structure - depending on the content type, **some attributes will differ** **Let's dive into the technical stuff!** Here is an example of the kind of feed your are going to create in order to display articles in your app. The easiest way to do it, is to create a feed that will display **the last 24 articles** of your website. But, **it will be more or less the same** when creating a feed for other articles (based on a tag for instance), or a feed that will contain the response of a search request. { "generated_in" : "0.010000 s", "items" : [ { "author" : "Author of the post", "commentsEnabled" : true, "commentsPostUrl" : "URL_API_COMMENTS", "commentsUrl" : "URL_FEED_COMMENTS", "content" : "...", "date" : "2013-10-23T21:57:00+02:00", "id" : 123456, "images" : [ { "id" : "image_123456", "url" : "URL_ORIGINAL_IMAGE", } ], "largeThumbnail" : "URL_LARGE_THUMBNAIL", "nbComments" : 12, "smallThumbnail" : "URL_SMALL_THUMBNAIL", "subtype" : "custom", "summary" : "...", "tumbnail" : "URL_THUMBNAIL", "title" : "Title of the post", "type" : "article", "url" : "URL_POST", }, ... ], "next_page" : "http://www.example.com/json.php?page=2", "stat" : "ok", "title" : "Example", "url" : "http://www.example.com" } At the root of the JSON dictionary, you will insert the feed's metadata. Here is their description. **Main structure of the JSON file:** *Those keys will be found at the feed's root* | Name | Type | Description | | ------------- | -------------- | -------------------------------------------------------------------------- | | generated\_in | String | Generation time of the response | | items | Array of Items | Array of items to be returned | | next\_page | String | URL of the next\_page to call (calculated with the page and per\_pageargs) | | stat | String | Status of the response ("ok" is everything is fine, "error" otherwise) | | title | String | Title of the source | | url | String | URL of the source | Then, all you have to do is to fill the **items** table with **Article** objects (which inherit from the Item type). Here is the description of each attribute. **Keys of the general items dictionary** *Those keys are the same for all items. If the example was about a photo custom feed, those attributes would also* *be* *used.* | Name | Type | Description | | ---------- | ---------------- | ----------------------------------------------------------------- | | id | String | Item unique identifier on its source | | type | String | Item type | | title | String | Item title | | url | String | Item URL on its source | | categories | Array of Strings | Categories associated with the item on the source | | date | String (date) | Item publication date | | author | String | Item author | | subtype | String | Item subtype (generally describes the service type of the source) | **Keys of the dictionary related to articles** *As our exemple is about an article feed, we need to insert those keys for all the objects* | Name | Type | Description | | --------------- | ------------- | ----------------------------------------------------------------- | | nbComments | Integer | Number of comments associated with the item on its source | | commentsEnabled | Bool | Describes if the comments have to be enabled or not for this item | | commentsUrl | String | URL to access the JSON feed of comments for this item | | commentsPostUrl | String | URL that allows to post comments on this item | | summary | String | Summary of the article (no HTML, text only) | | content | String | Article content | | smallThumbnail | String | Article thumbnail (small format) | | thumbnail | String | Article thumbnail (medium format) | | largeThumbnail | String | Article thumbnail (big format) | | images | Array of Dict | List of images contained in the article | | images/[]/id | String | Value of the id attribute of the tags in article content | | images/[]/url | String | Image URL | Have a look a few more [detailed examples](https://www.wmaker.net/doc-appsv2-us/docs/exemples_flux_custom.zip) we provide, be accurate when you create your feed, and everything will be fine :) Feel free to contact the support team if you need assistance. ## 5 - Connect your custom feed to your GoodBarber app ![](https://cmsphoto.ww-cdn.com/superstatic/41269/art/default/5997374-8942794.jpg?v=1455888856.8797774) Now that **your feed is ready**, you need to go back to your backend to connect it to a section. Once you've reached this step, the worst part is over. If you are already familiar with the GoodBarber backend, you know that when you **add a section**, you can choose from connectors to add content. Among the connectors, there is one called **Custom**. You'll find it in the following sections: articles, videos, photos, sounds, maps and events. ![](https://cmsphoto.ww-cdn.com/superstatic/41269/art/default/5997374-8942799.jpg?v=1455888857.020601) Then, you can set different options for your custom feed: last articles of course, but also search engine, filters by categories, etc. Save the section and have a look at the great work you produced! - [#Connector](https://www.goodbarber.com/blog/tags/connector) - [#DIY app](https://www.goodbarber.com/blog/tags/diy%20app) - [#Features](https://www.goodbarber.com/blog/tags/features) - [#Tips](https://www.goodbarber.com/blog/tags/tips) ![Dominique Siacci](https://blog.goodbarber.com/_public/profile/ca/ca3512f4dfa95a03169c5a670a4c91a19b3077b4-default.jpg) About the author[Dominique Siacci](https://www.goodbarber.com/blog/author/dominique-siacci/)CTO Co-founder and CTO of GoodBarber. I drive the product's technical vision: architecture, infrastructure, and more recently the integration of AI at the core of the platform. A developer at heart, I stay close to the code and the engineering decisions that enable thousands of GoodBarber users to publish their apps without writing a single line of code. [Read more](https://www.goodbarber.com/blog/author/dominique-siacci/) [![LinkedIn](https://portal.ww-cdn.com/portal_static/svg/base2021/linkedin.3ed8162e2a2b.svg)](https://fr.linkedin.com/in/dsiacci/)[![X](https://portal.ww-cdn.com/portal_static/svg/base2021/x.820492c586dd.svg)](https://twitter.com/dsiacci)[![Facebook](https://portal.ww-cdn.com/portal_static/svg/base2021/fb.be37c82b8283.svg)](https://www.facebook.com/dsiacci)