Skip to content

Social media network setup

Jump to bottom
Patrick Kollitsch edited this page Oct 29, 2024 · 23 revisions

Ananke automatically adds "follow" link icons to the header and footer and "Share" link icons to pages unless the disable_share parameter is set to true either on the site level (site params) or page level (front matter). Each services can show a label, an icon, and a color.

MIGRATION: Read about how to migrate below in the Section Migrate from versions before v2.11

Configuration

All configuration of Ananke's social media features is located under the ananke.social section in your websites params section. This can be found at one of the following locations:

  • in hugo.toml or config.toml [^1] in your website root under params.ananke.social
  • in config/_default/hugo.toml or config/_default/config.toml [^1] under params.ananke.social
  • in config/_default/params.toml under `ananke.social or
  • in config/$ENVIRONMENTNAME/* --- you know what you are doing

All samples in this documentation will refer to configuration in config/_default/params.toml and use the TOML format. If you have problems translating that into your configuration situation and format (JSON, YAML) please join us in the Discussion Forum.

  • ananke.social.share configures share buttons/links on single pages/posts
  • ananke.social.follow configures social network links in "follow us on social media" widgets
  • ananke.social.networks configures single networks. if user wants to extend, they add a new item to their local param section
  • ananke.social.$slugname is individual configuration for the networks defined in ananke.social.networks that is to be set for the implementing site in the individual configuration

Configure social media follow links

Set up global options

You can setup the display of your follow links with these options:

[ananke.social.follow]
new_window_icon = false
networks = [
  "facebook",
  "bluesky",
  "linkedin"
]
  • new_window_icon (default is false): add a small indicator of an outgoing link to the icon if this is set to true.
  • networks (required, no default): a list of slug parameters of the networks you wish to link to. You can either choose one or more of the included pre-configured networks or configure your own networks.

Set your profile or user name

In the simplest case, add a slug for the network, and below that, add your username in that network:

[params.ananke.social.linkedin]
username = "patrickkollitsch"

The theme will then create a profile link without intervention.

Override the profile link

If you wish to override the profile link for the follow link then set the parameter profilelink:

[params.ananke.social.linkedin]
username = "patrickkollitsch"
profilelink = "https://th.linkedin.com/in/patrickkollitsch/"

Setting the username in that case might make sense if you want to use the username with the share link (for instance in networks that link to your user profile).

Override the label of the social network

Each social network is already set up with a proper label. If the user wishes to override the profiles network name they can do this via the label attribute:

[params.ananke.social.linkedin]
label = "Linked In"

This will override the globally set up label.

rel attributes on follow links

All social follow links use by default the attribute rel="noopener" to keep the privacy of people clicking on it. In some cases you wish to add other items to these links (like me to verify your ownership of the social media profile or your website). In that case you may add a rel parameter to this setup:

[params.ananke.social.linkedin]
username = "patrickkollitsch"
profilelink = "https://th.linkedin.com/in/patrickkollitsch/"
rel = "me"

Having multiple rel parameter separated by space is valid usage of this attribute. This will be extended by the noopener attribute in any case.

Configure social media share links

Set up sharing networks

Setup sharing the ananke.social.share section:

[ananke.social.share]
icons = true
sharetext = true
networks = [
  "email",
  "facebook",
  "bluesky",
  "linkedin"
]
  • networks (required): To set your preferred networks and their order you define them in the networks parameter
  • icons (optional, default true): show icons for each network
  • sharetext (optional, default false): show share text for each network

Disable sharing partially or globally

By default shareing links on each single page are enabled. To disable this behaviour set disable_share in your pages front matter to true:

---
disable_share: true
---

You can disable this feature completely by setting ananke.social.share.disable_share to true in your configuration:

[ananke.social.share]
disable_share: true

Setup individual new networks

[NOTE] The information in this section is for developer that want to extend the capabilities of Ananke above the pre-configured networks. Ignore this if you work only with the available networks.

It is fairly easy to extend the pre-configured networks with the following setup (for example for LinkedIn, which is already pre-configured):

[ananke.social.linkedin]
username = "patrick.kollitsch"

[[ananke.social.networks]]
slug = "linkedin"
label = "LinkedIn"
color = "#0077b5"
profile = "http://linkedin.com/in/%s"
icon = "linkedin" # font awesome brand icon name
link = "https://www.linkedin.com/shareArticle"
#separator = "&"
[ananke.social.networks.particles]
url = "permalink"
title = "title"
summary = "description"
source = "permalink"
params = "mini=true"

Every new network requires an entry in the [[ananke.social.networks]] table. The entries below that can be:

  • slug (required): lower case alphanumerical string naming the network. use the networks name. if you want to add two profiles for one single network, you can achieve that by adding a slug like linkedin2 and configure the profile in your local config with this slug.
  • label (required): Title of the network (will be printed out in strings)
  • color (optional): Color for the icon of this network
  • profile (required): Either false, to disable the listing of this network in the follow section, or a string containing the link to the network profile. A %s marks the place that will be replaced with the users set up username under ananke.social.$SLUGNAME (in our case ananke.social.linkedin).
  • icon (required): icon name under assets/ananke/socials/ without .svg. The icon is part of Fontawesome Brand Icons and you can find it more convenient on their page.
  • share (optional, default is true): marks if this network functionality.
  • link (required, if share is true): The start of the share link for this network

Then in ananke.social.networks.particles you can add as much as required parts that will be rendered as parameters in the share URL. The format for this system is this:

[ananke.social.networks.particles]
url = "permalink"
title = "title"
summary = "description"
source = "permalink"
params = "mini=true"

This will result in the following share link:

https://www.linkedin.com/shareArticle?url=%PERMALINK&title=%TITLE&summary=%DESCRIPTION&source=%PERMALINK&mini=true

Long story short: on the the label on the left is included as is, followed by = and the replaced value of the setting you name in the particle. This works pretty much like the page variables in GoHugo:

  • permalink is replaced with the permalink of the page (urlencoded)
  • title is replaced with the title of the page (urlencoded)
  • description is replaced with the frontmatter description
  • username is replaced with the configurad username for that network (under the ananke.social.$NETWORKSLUG section)

Adding to that everything in params is added blindly to the resulting link.

This way you can create a share for nearly any network.

I am writing "nearly" because some networks do not like adding parameters the "normal" way. This is where the separator parameter comes into play:

separator = ";"

Using this parameter in the configuration above would result in our example URL looking like this:

https://www.linkedin.com/shareArticle?url=%PERMALINK;title=%TITLE;summary=%DESCRIPTION;source=%PERMALINK;mini=true

To override any of the existing networks add the full configuration row (including it's particles) into your local configuration and override the values you want to change.

To override the icon for a network add your own copy to your local assets/ananke/socials/ directory.

Available networks

This is a list of slugs for already configured networks in the theme. You can add missing networks without much hassle (see Configure social media follow links). If you experience issue doing that feel free to reach out in our Forum.

Slug profile share Notes
bluesky ✅ ✅ Read notes about configuring networks with multiple hosts
email ❌ ✅
facebook ✅ ✅
github ✅ ❌
gitlab ✅ ❌
hackernews ✅ ✅
instagram ✅ ❔
keybase ✅ ❌
linkedin ✅ ✅
medium ✅ ❔
mastodon ✅ ❌ Read notes about configuring networks with multiple hosts
pinterest ✅ ✅
reddit ✅ ✅
rss ✅ ❌ add profilelink to link to your RSS feed
slack ✅ ❔ add profilelink to your slack channel
stackoverflow ✅ ❌ your username is your profile's ID
telegram ✅ ✅
tiktok ✅ ✅
tumblr ✅ ✅
twitter ✅ ✅
whatsapp ❌ ✅
xing ✅ ✅
x-twitter ✅ ✅
youtube ✅ ❔

Legend: ✅ --- feature configured ❌ --- feature not configured and not available ❔ --- feature not configured, but might be available

[^1]: If your configuration still lives in a config.toml file please change its name to hugo.toml (or .yml, or .json). Until version ### Hugo configuration lived in config.toml, for a while now it's hugo.toml. You could also choose one of the more fragmented (and more clearly laid out) methods of configuration file layouts available.

Migrate from versions before v2.11

Take your existing configuration under params.ananke_social and apply them to the new structure under params.ananke.social (note that ananke and social are two subsections now, not one combined label).

Follow the instructions under Configure social media follow links to configure your social media links.

params.ananke_social (the old configuration with the underscore) can then be removed from your configuration.

TLDR:

Old config:

[[ananke_socials]]
name = "twitter"
url = "https://twitter.com/theNewDynamic"

New config:

[[ananke.social.twitter]]
username = "theNewDynamic"
profilelink = "https://twitter.com/theNewDynamic" # (optional, this would be covered by the username above)

Development changes

  • all functions in partial/func/socials are removed

  • If you were using the following partials anywhere:

    {{ partial "social-follow.html" . }}
{{ partial "social-share.html" . }}

    you should be able to replace the functionality with this change

    {{ partial "social/follow.html" . }}
{{ partial "social/share.html" . }}

Notes

Font Awesome

This project uses Font Awesome brand icons, which are licensed under the Creative Commons Attribution 4.0 International License (CC BY 4.0). For more information, visit Font Awesome.

Customize Icons

This theme comes with Font Awesome brand icons. If you wish to use your own icon set you can override all icons by copying them into your own repository under assets/ananke/socials. Icons need to be in the SVG format with a .svg extension. Their name needs to match the slug parameter in the ananke.social.networks setup for the selected network.

Configuring networks with multiple hosts

Due to the nature of Mastodon and Bluesky instances there is no way to configure all networks without too much noise. Configuration, for now, requires a profilelink parameter with the full URL to your profile. username can be ignored in that case.

Clone this wiki locally