Additional social accounts for authors

Ideas
1

Hey there :wave:

I have come across Additional social accounts in general settings which is asking for “Additional social accounts” for entire Ghost sites.

I’m opening this as a different feature request as it is for a different part of a Ghost site and can’t be covered by the solution proposed in that other feature request.

I am proposing that we update the API for Authors to allow for an arbitrary number of social links instead of only being able to specify a twitter or facebook account.

The design of the API is obviously up to you :joy: but I was thinking something like:

{
  "authors": [
    {
      "slug": "cameron",
      "id": "5ddc9b9510d8970038255d02",
      "name": "Cameron Almeida",
      "profile_image": "https://docs.ghost.io/content/images/2019/03/1c2f492a-a5d0-4d2d-b350-cdcdebc7e413.jpg",
      "cover_image": null,
      "bio": "Editor at large.",
      "website": "https://example.com",
      "location": "Cape Town",
      "meta_title": null,
      "meta_description": null,
      "url": "https://docs.ghost.io/author/cameron/",
      "social": {
        "facebook": "example",
        "twitter": "@example",
      }
    }
  ]
}

where there would be no restrictions to any of the keys that are in the social object. We could either provide svg icons for all major social platforms we can think of as part of Ghost core, or we could leave which icons are supported to the template authors. I don’t know which way is better and I would be interested in hearing opinions on this.

The benefit of this is that it should be possible to make this backwards (and forwards) compatible. I.e. if you define something in the social block with a key facebook you could also expose it in the API for the author as a top-level key :+1:

2

after thinking about this for a little bit more (and discussing it with a colleague) it strikes me that the social links should include links :thinking: especially because we don’t want to have to implement link building logic for all possible social links.

Maybe something like this will work:

"social": {
  "facebook": "https://facebook.com/example",
  "twitter": "https://twitter.com/example",
}

or maybe we need something move verbose:

"social": {
  "facebook": {
    "link": "https://facebook.com/example",
    "name": "Facebook"
  },
  "twitter": {
    "link": "https://twitter.com/example",
    "name": "Twitter"
  },
  "linkedin": {
    "link": "https://linkedin.com/profile/example",
    "name": "LinkedIn"
  }
}

This way we don’t need to rely on capitalising the key for the name of the platform (see LinkedIn for a great example). We can still use the key as the path for the icon (e.g. /icons/linkedin.svg or something)

3

If anyone wants a clean way to add more social links to their author pages with the existing theming model can do so like this:

  1. Change your author.hbs template to default-author.hbs
  2. Open the file and add the following line of code to the area in which you want more social links to appear:
    {{{block "social-links"}}}
  3. Create a new template file called author.hbs and add the following:
    {{!< default-author}}
  4. Final step. Any time you want to add more social links to an author page create a new template file using the authors slug, so for me it might be author-dave.hbs, and add the following:
    {{!< default-author}}

{{#contentFor "social-links"}}
  <a href="https://dribbble.com/daviddarnes">🏀</a>
{{/contentFor}}

Done :tada:.

Not only does this keep your theme codebase clean, but it also gives more fine tune control of your HTML structure. You can of course replace the emoji with an SVG, we even have a handy guide on adding SVG icons to your site that would be compatible with this technique. Check it out over here:
https://ghost.org/tutorials/adding-social-network-links/

Hope this helps :smile:

2 Likes
4

wow that’s a pretty awesome technique to get the job done :tada:

The idea of my feature request was more to be able to add more social accounts in the Author edit page, without the need to create template snippets.

It would need replacing the current social inputs with a UI that would allow you to click a + button and add social accounts for the user

Screenshot 2020-04-30 at 10.46.09

Does that make sense? I would be happy to work on the dashboard element as a contribution but we would need an API design that allows for it before I could do something like that

5

I’ve just been having a discussion with someone about a similar API and it might be a bit hard to work with an object structure, especially in handlebars :thinking: so instead of

"social": {
  "facebook": {
    "link": "https://facebook.com/example",
    "name": "Facebook"
  },
  "twitter": {
    "link": "https://twitter.com/example",
    "name": "Twitter"
  },
  "linkedin": {
    "link": "https://linkedin.com/profile/example",
    "name": "LinkedIn"
  }
}

It might be better fo us to go with a simple array:

"social": [
  {
    "name": "facebook",
    "link": "https://facebook.com/example",
    "title": "Facebook"
  },
  {
    "name": "twitter",
    "link": "https://twitter.com/example",
    "title": "Twitter"
  },
  {
    "name": "linkedin",
    "link": "https://linkedin.com/profile/example",
    "title": "LinkedIn"
  }
]

Which would easily allow you to do this:

{{#each author.social}}
  <a href={{this.link}} title={{this.title}} target="_blank" rel="noopener">
    <img src="/icons/social/{{this.name}}.svg">
  </a>
{{/each}}

or if we kept the object structure we could go with

{{#each author.social}}
  <a href={{this.link}} title={{this.title}} target="_blank" rel="noopener">
    <img src="/icons/social/{{@key}}.svg">
  </a>
{{/each}}

where the key of the object replaces the name :+1: thoughts?

1 Like