Ghost is our favorite blog platform, but it is lack of support of plugins. There are many users are eager to develop the custom card for their site which is powered by Ghost.

There are some discussions in the official ghost forum:

Can I build a custom plugin integration for ghost?
like wechat / weibo login, wechat mini program?
How to build custom cards
Is it possible to build custom cards for Ghost CMS? For example if I wanted to be able to add a new card alongside the primary; Image, Markdown, HTML, Gallery, Divider, Bookmark & Email that created an accordion and allowed the administrator to create tabs with headings and text?

and more...

The official solution is integration and embed card:

Community Integrations: Connect your favourite apps & tools – Ghost
Keep your community and your readers connected and connect your favourite apps and tools to your Ghost site, including Slack, Helpscout & many more!

This is not exactly what we want. Why?

  • We have to manage many separated accounts across different sites which provides the related content, it's really boring.
  • The content is spread on all these third-party websites. Once these website is moved or interrupted, the content will be lost and the link will be broken.
  • The embed card is the "iframe" fragment in the post. These embedded pages are controlled by different website owners, there is no unified programmatic interactive interface, and its simple sharing mechanism is not suitable for our interactive purposes. It is difficult to do more controll with these snippets in the post.

For some large content (such as video), it is not suitable to embed the actual content into the post, but for some other smaller content (such as diagrams, drawings, markers on the map), we can insert the effective content directly into the post. This approach brings better performance, makes our data safer, and opens the door for building more interesting interactions.

Customization of Ghost and Installation

You need to download the customized Ghost distribution and update your server installation in order to use the universal extension cards.

The package can be downloaded for free, but it's appreciated if you'd like to buy me a cup of coffee!

Viewer & Editor Components of Extension Card

Each expansion card has two views: one for editing, which helps the creator edit the content in the built-in Koenig editor of admin client, and the other for viewing, which is used to show the content. The read-only view of extension card works both in Koenig editor for preview, and also in the front-end of the platform.

Installation of Extension Card

Install the extension card is very simple. Get the configuration of the card, and insert it in the ghost config file like the following template:

"extCards": [
  {
    "label": "card name",
    "iconUrl": "the svg icon file for the card",
    "matches": [ "the keywords used to filter the card in the Koenig Editor"],
    "type": "card",
    "replaceArg": "extension",
    "payload": {
      "editorComponentName": "editor component name",
      "editorSrc": "the js file name for the editor component",
      "editorStyle": "inline style used in Koenig Editor",
      "viewerComponentName": "viewer component name",
      "viewerSrc": "the js file name for the viewer component",
      "licenseKey": "the license key of this card",
      "options": {
        // this object will be passed to the extension card constructor
      }
    }
  },
  {
    // and more cards here.....
  }
]

The editorSrc file is used in the Koenig Editor, which will be loaded dynamically when the first instance of this card is loaded. We should contain both the viewer component and the editor component in it. While in the viewerSrc file, only viewer component is necessary, which is used in the front-end for reader's view.

Restart Ghost, if everything is OK, you will see the card listed in the Koenig Editor when you click the '+' icon to insert a new card.

Version Compatibility

The current Ghost expansion card mechanism is to bind card payload data with a certain version of code. This means that if a new version is available, it will not affect old cards created with the old version. Therefore, you don’t need to consider data migration of existing cards in old posts.

If you do need to upgrade the card created with older version to a new one, you can export the posts to a JSON file through the feature provided in Lab tab page and reimport the JSON file again after replace the editorSrc and viewerSrc option in the card.

License Verification

License verification is left to the creator of the expansion card. The card developer decides whether the expansion card is free of charge or the user needs to pay for it.

Therefore, the license checking process is not restricted, and developers are free to choose their own way.

Develop Your First Extension Card

We have prepared a free starter project for extension card development. Just follow the post here:

Free Ghost Extension Card Starter
Make your own custom card base on our free Ghost extension card starter project.