How to make your own button to share a post in a social network for any page of the site?

Question

JavaScript

Hello. There are social media buttons with their own design. I want to make it so that when you click on each button, a person can share a post with other users on their page. What do I need to do?

<div>
<p>Какой-то текст</p>
<p>Поделиться</p>
<div class="social_icons_holder">
  <ul class="social_icons clearfix">
    <li class="facebook">
      <span class="tool-tip">Facebook</span>
      <a target="_blank" href="http://www.facebook.com"><i class="fa fa-facebook"></i></a>
    </li>
    <li class="instagram">
      <span class="tool-tip">Instagram</span>
      <a target="_blank" href="http://instagram.com"><i class="fa fa-instagram"></i></a>
    </li>
    <li class="vk">
      <span class="tool-tip">Vkontakte</span>
      <a target="_blank" href="https://www.vk.com/"><i class="fa fa-vk"></i></a>
    </li>
    <li class="foursquare">
      <span class="tool-tip">Foursquare</span>
      <a target="_blank" href="https://ru.foursquare.com/"><i class="demo-icon icon-foursquare-1"></i></a>
    </li>
  </ul>
  <!--/ .social-icons-->
</div>
</div>

Answer 1

look for api in social networks. as a rule, each has its own addresses for this.
For example:

<a href="http://vkontakte.ru/share.php?url=ВАШ_URL&image=АДРЕС_КАРТИНКИ" target="_blank" title="Поделиться ВКонтакте"></a>
<a href="https://www.facebook.com/sharer/sharer.php?u=ВАШ_URL" target="_blank" title="Поделиться в Facebook"></a>

In fact, these tags can be styled however you like.

Answer 2

It is much easier to choose a good design option from here: share.pluso.ru or from here: https://tech.yandex.ru/share/ If you dig into the API, some of them allow you to insert your own pictures.
If you really want your own solution, then you are tired. How many social networks, so many different APIs, and some of them are terrible.