Adding Social Media: do I have to override json-ld.js and if yes how ?

[JOduMonT]

I searched for Instagram then cut and pasted the code for Instagram by Telegram in these 4 files by overriding my theme.

to keep it easy I even cut and past the Instagram svg code to make the test.

theme-override

• assets
  • css
    • main.css
  • svg
    • svg-map.svg
• partials
  • footer.hbs
• config.json

As expected; when I reload the Publii App, Telegram appears under the Theme - Footer and Theme - Share Buttons, but, obviously, it has a but, otherwise I would not write here ;) ...

When I preview the website: Telegram, nor Discord, nor even WhatsApp as Share Buttons appears :(

What I suspect is I also have to duplicate this part of the code contained in handlebars helpers for json-ld.
but, I simply don't understand how to override this file.

[bobmitro]

I suppose, that you want to add a follow button, so you need to add an icon and link.

Update only the following files:

• Footer
• SVG map
• Config, if you want to add a dedicated option for the link

[JOduMonT]

footer.hbs

      {{#if @config.custom.socialButtons}}
         <div class="footer__right">
            <div class="footer__social">
               {{#if @config.custom.socialDiscord}}
                  <a
                     href="{{@config.custom.socialDiscord}}"
                     aria-label="Discord"
                     class="discord">
                     <svg>
                        <use xlink:href="{{@website.assetsUrl}}/svg/svg-map.svg#discord"/>
                     </svg>
                  </a>
               {{/if}}
               {{#if @config.custom.socialTelegram}}
                  <a
                     href="{{@config.custom.socialTelegram}}"
                     aria-label="Telegram"
                     class="telegram">
                     <svg>
                        <use xlink:href="{{@website.assetsUrl}}/svg/svg-map.svg#telegram"/>
                     </svg>
                  </a>
               {{/if}}

svg-map.svg

I took the code from

• https://icons.getbootstrap.com/icons/discord/
• https://icons.getbootstrap.com/icons/telegram/
  I also tried with these SVG
• https://www.svgrepo.com/svg/353655/discord-icon
• https://upload.wikimedia.org/wikipedia/commons/8/82/Telegram_logo.svg

	<symbol id="discord" viewBox="0 0 16 16">
	  <path d="M13.545 2.907a13.2 13.2 0 0 0-3.257-1.011.05.05 0 0 0-.052.025c-.141.25-.297.577-.406.833a12.2 12.2 0 0 0-3.658 0 8 8 0 0 0-.412-.833.05.05 0 0 0-.052-.025c-1.125.194-2.22.534-3.257 1.011a.04.04 0 0 0-.021.018C.356 6.024-.213 9.047.066 12.032q.003.022.021.037a13.3 13.3 0 0 0 3.995 2.02.05.05 0 0 0 .056-.019q.463-.63.818-1.329a.05.05 0 0 0-.01-.059l-.018-.011a9 9 0 0 1-1.248-.595.05.05 0 0 1-.02-.066l.015-.019q.127-.095.248-.195a.05.05 0 0 1 .051-.007c2.619 1.196 5.454 1.196 8.041 0a.05.05 0 0 1 .053.007q.121.1.248.195a.05.05 0 0 1-.004.085 8 8 0 0 1-1.249.594.05.05 0 0 0-.03.03.05.05 0 0 0 .003.041c.24.465.515.909.817 1.329a.05.05 0 0 0 .056.019 13.2 13.2 0 0 0 4.001-2.02.05.05 0 0 0 .021-.037c.334-3.451-.559-6.449-2.366-9.106a.03.03 0 0 0-.02-.019m-8.198 7.307c-.789 0-1.438-.724-1.438-1.612s.637-1.613 1.438-1.613c.807 0 1.45.73 1.438 1.613 0 .888-.637 1.612-1.438 1.612m5.316 0c-.788 0-1.438-.724-1.438-1.612s.637-1.613 1.438-1.613c.807 0 1.451.73 1.438 1.613 0 .888-.631 1.612-1.438 1.612"/>
	</symbol>
	<symbol id="telegram" viewBox="0 0 16 16">
	  <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M8.287 5.906q-1.168.486-4.666 2.01-.567.225-.595.442c-.03.243.275.339.69.47l.175.055c.408.133.958.288 1.243.294q.39.01.868-.32 3.269-2.206 3.374-2.23c.05-.012.12-.026.166.016s.042.12.037.141c-.03.129-1.227 1.241-1.846 1.817-.193.18-.33.307-.358.336a8 8 0 0 1-.188.186c-.38.366-.664.64.015 1.088.327.216.589.393.85.571.284.194.568.387.936.629q.14.092.27.187c.331.236.63.448.997.414.214-.02.435-.22.547-.82.265-1.417.786-4.486.906-5.751a1.4 1.4 0 0 0-.013-.315.34.34 0 0 0-.114-.217.53.53 0 0 0-.31-.093c-.3.005-.763.166-2.984 1.09"/>
	</symbol>

config.json

        {
            "name": "shareDiscord",
            "group": "Share Buttons",
            "label": "Discord",
            "value": false,
            "type": "checkbox"
        },
        {
            "name": "shareTelegram",
            "group": "Share Buttons",
            "label": "Telegram",
            "value": false,
            "type": "checkbox"
        },

---

The result is

in Shared Buttons I see Discord and Telegram

and the option is also available in Footer -> Follow Buttons

and it appears in the code of rendered page

but the icons is not

but I could even hover the link

so how come my symbol id="telegram" does not appear ?

[bobmitro]

Does this issue occur only in the preview, or does it also happen on the live?