We're evolving to serve you better! This current forum has transitioned to read-only mode. For new discussions, support, and engagement, we've moved to GitHub Discussions.

Telegram-styled share button

November 2, 2020 at 11:15 am #4355

[anonymous]

Hi, I like the share button of the ‘Simple’ theme. How can I add a Telegram share button with the same characteristics?

November 2, 2020 at 11:19 am #4356
Bob
Hi,

You should update a few files in the following location (‎⁨Documents ▸ ⁨Publii⁩ ▸ ⁨sites⁩ ▸ ⁨YOUR_SITE ▸ ⁨input⁩ ▸ ⁨themes⁩ ▸ ⁨YOUR_THEME)
- /assets/svg/svg-map.svg
- /assets/js/svg-map.js
- /partials/share-buttons.hbs
and for styling use the Customs CSS Tool.

To preserve the custom code changed from being overwritten the next time your theme is updated, please make sure you have created override files, which are essentially copies of the existing theme files and are stored separately → https://getpublii.com/dev/theme-overrides/
November 2, 2020 at 11:25 am #4357

[anonymous]

Ok thanks, so there’s no “easier” way to do it for someone who’s not really into HTML and CSS. I’ll see what I can do 🙂

November 2, 2020 at 11:34 am #4358

Bob

It is not too difficult, just look at the existing part of the code and “duplicate it”.
You can also consider using our paid service https://getpublii.com/customization-service/

November 2, 2020 at 11:39 am #4359

[anonymous]

Okay thank you again. One last thing: what if I don’t have /assets/js/svg-map.js ? Should I create it? Thank you very much for the support

November 2, 2020 at 11:47 am #4360

Bob

If you use our themes, there should be this file, in general, this file is not needed for the website, you only need it for local site preview due to security rules that prevent loading external URLs from a different domain.

December 10, 2020 at 10:34 am #4770
[anonymous]
[anonymous] wrote:

It is not too difficult, just look at the existing part of the code and “duplicate it”.

I have the same perception while it come to cybersecurity and adding a rules in IPFW, it is very easy google and cut and paste. 😛

Sadly, since an hour I try to have a icon for messenger, o i clean the original svg than add it to maps.svg and the js file and it appear on the site, but I’m unable to match the style.

if anyone would like to help me to match the style it would be great

here the original facebook messenger svg

than here my current code
```
<symbol id="messenger" viewBox="0 0 224 226">
 <defs>
   <linearGradient id="a" y1="6.76%" x2="50%" x1="50%" y2="95.6%">
     <stop stop-color="#00C6FF" offset="0"/>
     <stop stop-color="#0068FF" offset="1"/>
   </linearGradient>
 </defs>
 <path fill="url(#a)" d="m41.255 185.52v40.2l37.589-21.37c10.478 3.02 21.616 4.65 33.156 4.65 61.86 0 112-46.79 112-104.5 0-57.714-50.14-104.5-112-104.5-61.856 0-112 46.786-112 104.5 0 32.68 16.078 61.86 41.255 81.02z"/>
 <path fill="#fff" d="m100.04 75.878l-60.401 63.952 54.97-30.16 28.721 30.16 60.06-63.952-54.36 29.632-28.99-29.632z"/>
 </symbol>
```
```
"#messenger": {
    "viewbox": "0 0 224 226",
    "content": "<defs><linearGradient id=\"a\" y1=\"6.76%\" x2=\"50%\" x1=\"50%\" y2=\"95.6%\"><stop stop-color=\"#00C6FF\" offset=\"0\"/><stop stop-color=\"#0068FF\" offset=\"1\"/></linearGradient></defs><path fill=\"url(#a)\" d=\"m41.255 185.52v40.2l37.589-21.37c10.478 3.02 21.616 4.65 33.156 4.65 61.86 0 112-46.79 112-104.5 0-57.714-50.14-104.5-112-104.5-61.856 0-112 46.786-112 104.5 0 32.68 16.078 61.86 41.255 81.02z\"/><path fill=\"#fff\" d=\"m100.04 75.878l-60.401 63.952 54.97-30.16 28.721 30.16 60.06-63.952-54.36 29.632-28.99-29.632z\"/>"
}
```
December 10, 2020 at 12:16 pm #4773
[anonymous]
@Krusty

I figured it is easier with a flaticon

my trick is to go at flaticon.com, search for the icon and be sure to not clicking on the sponsored one, which give me this for telegram

than I open the file with a text editor such as VS-Codium or Atom, …

than you copy the viewBox and path property in ./assets/svg/svg-map.svg and ./assets/js/svg-map.js which are located in your override theme directory.

example for svg-map.svg you add this code just before the </svg> which is
```
<symbolid="telegram"viewBox="0 0 24 24">
<pathd="m5.491 11.74 11.57-4.461c.537-.194 1.006.131.832.943l.001-.001-1.97 9.281c-.146.658-.537.818-1.084.508l-3-2.211-1.447 1.394c-.16.16-.295.295-.605.295l.213-3.053 5.56-5.023c.242-.213-.054-.333-.373-.121l-6.871 4.326-2.962-.924c-.643-.204-.657-.643.136-.953z"fill="#fff"/>
</symbol>
```
for the js file it is a little bit tricker since you have to escape the special character ” inside the propriety of content
so ever time you see a “ in the path you have to add \ in front of it

example for svg-map.js you add this code just before the }; which is
```
,
    "#telegram": {
        "viewbox": "0 0 24 24",
        "content": "<path d=\"m5.491 11.74 11.57-4.461c.537-.194 1.006.131.832.943l.001-.001-1.97 9.281c-.146.658-.537.818-1.084.508l-3-2.211-1.447 1.394c-.16.16-.295.295-.605.295l.213-3.053 5.56-5.023c.242-.213-.054-.333-.373-.121l-6.871 4.326-2.962-.924c-.643-.204-.657-.643.136-.953z\" fill=\"#fff\" />"
    }
};
```
be sure to add a , after the }, of whatsapp since it is not the last entry.
```
"#whatsapp": {
    "viewbox": "0 0 32 32",
    "content": "<path d=\"M24.09,19.64c0.1,0.17,0.1,0.96-0.23,1.88c-0.33,0.93-1.92,1.77-2.69,1.88c-0.69,0.1-1.55,0.14-2.51-0.16c-0.58-0.18-1.32-0.43-2.27-0.83c-3.99-1.72-6.6-5.72-6.8-5.98c-0.2-0.26-1.63-2.15-1.63-4.1c0-1.95,1.03-2.91,1.39-3.31c0.36-0.4,0.8-0.5,1.06-0.5s0.53,0,0.76,0.01c0.24,0.01,0.57-0.09,0.9,0.68c0.33,0.79,1.13,2.74,1.23,2.94c0.1,0.2,0.17,0.43,0.03,0.69c-0.13,0.26-0.2,0.43-0.4,0.66s-0.42,0.52-0.6,0.69c-0.2,0.2-0.41,0.41-0.17,0.81c0.23,0.4,1.03,1.69,2.21,2.74c1.52,1.35,2.8,1.77,3.2,1.97c0.4,0.2,0.63,0.17,0.86-0.1c0.23-0.26,1-1.16,1.26-1.55c0.27-0.4,0.53-0.33,0.9-0.2c0.36,0.13,2.32,1.09,2.72,1.29C23.73,19.37,23.99,19.47,24.09,19.64z M32,15.87c0,8.74-7.15,15.86-15.93,15.86c0,0,0,0,0,0h-0.01c-2.67,0-5.29-0.67-7.61-1.93L0,32l2.26-8.22c-1.39-2.4-2.13-5.13-2.13-7.93C0.14,7.11,7.28,0,16.07,0c4.26,0,8.26,1.65,11.27,4.65C30.35,7.65,32,11.63,32,15.87z M29.31,15.87c0-3.52-1.37-6.83-3.88-9.32c-2.5-2.49-5.83-3.86-9.36-3.87c-7.3,0-13.25,5.91-13.25,13.18c0,2.49,0.7,4.92,2.02,7.01l0.31,0.5l-1.34,4.86l5.01-1.31l0.48,0.29c2.03,1.2,4.36,1.84,6.74,1.84h0.01C23.37,29.05,29.31,23.13,29.31,15.87z\" />"
},
```
note: obviously, as Bob mention, you have to understand how to override a theme