How to Create social share buttons on wordpress without plugin

Update May 5, 2022
by  inkwp

You must hear that social share is a very important factor for SEO, but wordpress default doesn't have any social share function, you must add some social share plugins.

But the questions I met are after I had installed the social share plugin on my site, the code of the plugins will make my site slower than before, and more issues I found, the social share cannot customize as I want, such as design the float share on wordpress blog post.

Fortunately, I found the best ways to add social share on my wordpress site, anywhere, and totally 100% customized, so, just follow my steps and see the best ways to add social share on wordpress site without any plugins.

The best social share button for wordpress

My solution is to add the addtoany.com code to wordpress.

Addtoany is one of the wordpress social share plugins, but also this site supports custom code.

First step, we should click addtoany url and get the based social share button code.

And then click the “Any website” button.

Choose the social icon you want

Andtoany supports 12 kinds of sites, such as wordpress, joomla, tumblr etc.

We don’t click the wordpress button because that’s the plugin.

After we have clicked the any website button, we’ll get the new screen.

You can click the “Choose services” to decide which platforms you want to share.

Drag to the left to remove the icon and click on the left will add the social icon, and when finish, just click the “Done”, simple easy.

Change the language of the social share button

The default language of addtoany is English. If you want to change to another language such as French or Chinese, you can click the “More Options” link to change.

More than 50 languages to choose, very strong!

Get the social code

Finished all customized design, click “Get the Button Code”, we will get a code like this:

<!-- AddToAny BEGIN -->

<div class="a2a_kit a2a_kit_size_32 a2a_default_style">
<a class="a2a_dd" href="https://www.addtoany.com/share"></a>
<a class="a2a_button_facebook"></a>
<a class="a2a_button_twitter"></a>
<a class="a2a_button_linkedin"></a>
</div>
<script async src="https://static.addtoany.com/menu/page.js"></script>
<!-- AddToAny END -->

keep this code, next step we’ll open our wordpress site and paste this code.

Paste the code on wordpress

I suggest pasting the share code on the widget, so the button will display on all single posts.

Open the widget on wordpress dashboard, and add the HTML block to main sidebar, like photo below:

Display on the frontend like this:

How to set a vertical floating social icon for wordpress posts?

Add to any also support floating social icons, and just need to change the class attribute.

Remember the code we had copied on last section, just a2a_default_style to a2a_floating_style a2a_vertical_style, and add style="left:0px; top:150px;" after the class=”xxx”, and we’ll get new code like this:

<!-- AddToAny BEGIN -->
<div class="a2a_kit a2a_kit_size_32 a2a_floating_style a2a_vertical_style" style="left:0px; top:150px;" >
<a class="a2a_dd" href="https://www.addtoany.com/share"></a>
<a class="a2a_button_facebook"></a>
<a class="a2a_button_twitter"></a>
<a class="a2a_button_linkedin"></a>
</div>
<script async src="https://static.addtoany.com/menu/page.js"></script>
<!-- AddToAny END -->

The left:0px;top:150px means the icon position, you can change the number to edit the position.

Add social share Counters

Sometimes we need to add share counters to make the article have some social proof.

Addtoany has this function, add a2a_counter after each share icon class attribute and we’ll get the final share code:

<!-- AddToAny BEGIN -->
<div class="a2a_kit a2a_kit_size_32 a2a_floating_style a2a_vertical_style" style="left:0px; top:150px;" >
<a class="a2a_dd" href="https://www.addtoany.com/share"></a>
<a class="a2a_button_facebook a2a_counter "></a>
<a class="a2a_button_twitter a2a_counter "></a>
<a class="a2a_button_linkedin a2a_counter "></a>
</div>
<script async src="https://static.addtoany.com/menu/page.js"></script>
<!-- AddToAny END -->

At the End

So that’s all work to add a social share button to wordpress without any plugin, and it’s very easy, just try it yourself, and if you have any questions, comment let me know.

Leave a Reply

Your email address will not be published.

Copyright © 2022 inkwp.com