How to add sharing buttons to Contact and Odnoklassniki in a specific template?

Question

JavaScript

Good evening everyone.
I am not a programmer, I make a personal blog on WordPress and on a ready-made template. Actually, everything triples in the template, only the little things have to be finalized with a file.
And so the question arose: how can I add sharing buttons for VKontakte and Odnoklassniki the same as in the template?
I use this template: zatolab.com/airashi/how-to-setup-cozy-workspace - round buttons at the end of each article. Icons from FontAwesome use.
I found the code in the files for them like this:

<!-- SOCIAL SHARE - data-via="subrotoazhari"  -->
          <div class="links">
            <a href="#" data-type="twitter" data-url="<?php the_permalink(); ?>" data-description="<?php echo substr(get_the_title(), 0,140); ?>" class="prettySocial fa fa-twitter"></a>
            <a href="#" data-type="facebook" data-url="<?php the_permalink(); ?>" data-title="<?php the_permalink(); ?>" data-description="<?php echo get_the_excerpt(); ?>" data-media="<?php echo esc_attr($img_url); ?>" class="prettySocial fa fa-facebook"></a>
            <a href="#" data-type="googleplus" data-url="<?php the_permalink(); ?>" data-description="<?php echo get_the_excerpt(); ?>" class="prettySocial fa fa-google-plus"></a>
            <a href="#" data-type="pinterest" data-url="<?php the_permalink(); ?>" data-description="<?php echo get_the_excerpt(); ?>" data-media="<?php echo esc_attr($img_url); ?>" class="prettySocial fa fa-pinterest"></a>
            <a href="#" data-type="linkedin" data-url="<?php the_permalink(); ?>" data-title="<?php the_permalink(); ?>" data-description="<?php echo get_the_excerpt(); ?>" data-media="<?php echo esc_attr($img_url); ?>" class="prettySocial fa fa-linkedin"></a>
          
          </div>

Contact through his site offers to place a button with a more cumbersome code, and in the template right here neatly like this - a couple of lines in total. Enlighten, how to add the desired buttons also concisely? Or maybe I didn’t find it at all and a lot of nuances? If you need to attach a file to understand where to look - tell me, I'll post it.
I will be grateful for help.
UPD Slightly modified code from Marat

<a href="https://connect.ok.ru/dk?st.cmd=WidgetSharePreview&st.shareUrl=<?php the_permalink(); ?>" target="_blank" class="prettySocial fa fa-odnoklassniki" title="Опубликовать ссылку в Одноклассники" onclick="window.open(this.href, 'Опубликовать ссылку в Одноклассники', 'width=800,height=300'); return false"></a>
<a href="https://vk.com/share.php?url=<?php the_permalink(); ?>" class="prettySocial fa fa-vk" title="Опубликовать ссылку во ВКонтакте" onclick="window.open(this.href, 'Опубликовать ссылку во Вконтакте', 'width=800,height=300'); return false"></a>

and in style.css it was necessary to add

.links a:hover.fa-odnoklassniki {
  background: #F6881F
}

.links a:hover.fa-vk {
  background: #5B7FA6
}

to be like other icons in the template.

Answer 1

<a href="https://connect.ok.ru/dk?st.cmd=WidgetSharePreview&st.shareUrl=<?php the_permalink(); ?>" target="_blank" class="ok" title="Опубликовать ссылку в Одноклассники" onclick="window.open(this.href, 'Опубликовать ссылку в Одноклассники', 'width=800,height=300'); return false"></a>
<a href="https://vk.com/share.php?url=<?php the_permalink(); ?>" class="vkontakte" title="Опубликовать ссылку во ВКонтакте" onclick="window.open(this.href, 'Опубликовать ссылку во Вконтакте', 'width=800,height=300'); return false"></a>