HTML code for linking social network account to your website (tutorial)

You might have noticed the sweet icons given above, in our website. Each of these icons links to our respective social network accounts. We are ready to share our beloved html code to our dearest visitors.

As it is an HTML code, it is not limited to wordpress.com websites. You may also use it on your any self hosted website hosted outside wordpress.

Additionally, here is an article that teaches about – how to place it on the widget area of your wordpress.com website -> https://postboard.in/2020/04/26/add-widgets-to-your-wordpress-com-website-tutorial/

The HTML master code

Copy the code below,

<div>

<a href="YOUR WHATSAPP LINK HERE">
<img title="Whatsapp" alt="Whatsapp" src="https://postboardhome.files.wordpress.com/2020/04/hiclipart.com-1.png" width="35" height="35" />
</a>

<a href="YOUR FACEBOOK LINK HERE">
<img title="Facebook" alt="Facebook" src="https://postboardhome.files.wordpress.com/2020/04/imgbin_social-media-facebook-logo-computer-icons-png_rkzk8d4z.png" width="35" height="35" />
</a>

<a href="YOUR INSTAGRAM LINK HERE">
<img title="instagram" alt="instagram" src="https://postboardhome.files.wordpress.com/2020/04/pngfuel.com-8.png" width="35" height="35" />
</a>

<a href="YOUR YOUTUBE LINK HERE">
<img title="Youtube" alt="Youtube" src="https://postboardhome.files.wordpress.com/2020/04/pngfuel.com-2.png" width="35" height="35" />
</a>

<a href="mailto:YOUR EMAIL ADDRESS HERE">
<img title="Email" alt="Email" src="https://postboardhome.files.wordpress.com/2020/04/pngfuel.com-3.png" width="35" height="35" />
</a>

<a href="YOUR TWITTER LINK HERE">
<img title="twitter" alt="twitter" src="https://postboardhome.files.wordpress.com/2020/04/pngfuel.com-7.png" width="35" height="35" />
</a>

<a href="YOUR TUMBLR LINK HERE">
<img title="tumblr" alt="tumblr" src="https://postboardhome.files.wordpress.com/2020/04/pngfuel.com-5.png" width="35" height="35" />
</a>

<a href="YOUR LINKEDIN LINK HERE">
<img title="Linkedin" alt="Linkedin" src="https://postboardhome.files.wordpress.com/2020/04/pngfuel.com-4.png" width="35" height="35" />
</a>

</div>

Now edit the code as mentioned below,

Replace YOUR WHATSAPP LINK HERE with your whatsapp group invite link.

Replace YOUR FACEBOOK LINK HERE with your facebook page link.

Replace YOUR INSTAGRAM LINK HERE with your instagram link.

Replace YOUR YOUTUBE LINK HERE with your youtube page link.

Replace YOUR EMAIL ADDRESS HERE with your email address.

Replace YOUR TWITTER LINK HERE with your twitter link.

Replace YOUR TUMBLR LINK HERE with your tumblr link.

Replace YOUR LINKEDIN LINK HERE with your linkedin link.

Now your links will be completely functional.

Please note, when you add links, do not forget to add https://
Otherwise, your website will become unsecure due to mixed content.
For more info about mixed content, -> https://postboard.in/2020/02/19/only-enter-secure-websites-https-insecure-websites-http-make-you-vulnerable-to-hackers/

For eg, here is how we use the code

<div>

<a href="https://chat.whatsapp.com/HV8BkmzPaPe1YUEqWS700P">
<img title="Whatsapp" alt="Whatsapp" src="https://postboardhome.files.wordpress.com/2020/04/hiclipart.com-1.png" width="35" height="35" />
</a>

<a href="https://www.facebook.com/PostBoard-111222360383196/">
<img title="Facebook" alt="Facebook" src="https://postboardhome.files.wordpress.com/2020/04/imgbin_social-media-facebook-logo-computer-icons-png_rkzk8d4z.png" width="35" height="35" />
</a>

<a href="https://www.instagram.com/postboard.in/">
<img title="instagram" alt="instagram" src="https://postboardhome.files.wordpress.com/2020/04/pngfuel.com-8.png" width="35" height="35" />
</a>

<a href="https://www.youtube.com/channel/UC7Thq8DwZNsu0lq1VFafZtQ/">
<img title="Youtube" alt="Youtube" src="https://postboardhome.files.wordpress.com/2020/04/pngfuel.com-2.png" width="35" height="35" />
</a>

<a href="mailto:https://postboard.in@gmail.com">
<img title="Email" alt="Email" src="https://postboardhome.files.wordpress.com/2020/04/pngfuel.com-3.png" width="35" height="35" />
</a>

<a href="https://twitter.com/manurahim666">
<img title="twitter" alt="twitter" src="https://postboardhome.files.wordpress.com/2020/04/pngfuel.com-7.png" width="35" height="35" />
</a>

<a href="https://postboardin.tumblr.com/">
<img title="tumblr" alt="tumblr" src="https://postboardhome.files.wordpress.com/2020/04/pngfuel.com-5.png" width="35" height="35" />
</a>

<a href="https://www.linkedin.com/in/manu-rahim-ba094582/detail/recent-activity/">
<img title="Linkedin" alt="Linkedin" src="https://postboardhome.files.wordpress.com/2020/04/pngfuel.com-4.png" width="35" height="35" />
</a>

</div>

Change icon (optional)

For any reason, if you want to change the icon or else if you don’t trust us, you can host your icon your own. But we promise you that our site will host these icons lifelong.

To download free png icons without login -> https://www.pngfuel.com/

To download png icons we used,

After you upload these to your website,
Copy the web address of each png file and replace it with ICON LINK in code.
For eg:

For whatsapp change – https://postboardhome.files.wordpress.com/2020/04/hiclipart.com-1.png

For facebook change – https://postboardhome.files.wordpress.com/2020/04/imgbin_social-media-facebook-logo-computer-icons-png_rkzk8d4z.png

For instagram change – https://postboardhome.files.wordpress.com/2020/04/pngfuel.com-8.png

For youtube change – https://postboardhome.files.wordpress.com/2020/04/pngfuel.com-2.png

For email change – https://postboardhome.files.wordpress.com/2020/04/pngfuel.com-3.png

For twitter change – https://postboardhome.files.wordpress.com/2020/04/pngfuel.com-7.png

For tumblr change – https://postboardhome.files.wordpress.com/2020/04/pngfuel.com-5.png

For linkedin change – https://postboardhome.files.wordpress.com/2020/04/pngfuel.com-4.png

.

To add an extra icon and account link,

Add the code given below between </a> and </div>
Or between </a> and <a href


<a href="YOUR ACCOUNT LINK HERE">
<img title="NAME" alt="NAME" src="YOUR ICON LINK HERE" width="35" height="35" />
</a>

Similarly, as we have done before – replace YOUR ACCOUNT LINK HERE and YOUR ICON LINK with yours.

To delete an icon and its account link from the code,

Identify which social network link and icon is not required and delete it.
For eg, to delete youtube link and icon, delete the below given portion from the master code –

<a href="https://www.youtube.com/channel/UC7Thq8DwZNsu0lq1VFafZtQ/">
<img title="Youtube" alt="Youtube" src="https://postboardhome.files.wordpress.com/2020/04/pngfuel.com-2.png" width="35" height="35" />
</a>


IMPORTANT : Do not delete <div> or </div> from the master code at any cost. Otherwise, your code won’t work. ie, the master code should start with <div> and end with </div>

For further queries or assistance -> https://postboard.in/join-us/
We are happy to help.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.