How do I add social media icons to my forum like help.forumotion does?

[Hardcore Gamer]

I use ModernBB. I'd like the exact same style on my forum as it looks to be the same style of the default toolbar (if your forum uses that). Is there a tutorial for this?

[SarkZKalie]

Could you please provide your forum URL?

[Hardcore Gamer]

Could you please provide your forum URL?

PM sent. Thanks. 

If anybody else wants a link to my forum, I'll send it through PM.

[Hardcore Gamer]

Bump.

[SarkZKalie]

Place this one wherever you want

Code:

<div id="social-network">
<span class="content">Follow us</span>
<a href="https://www.facebook.com/yourpage"><img src="https://your-image-link.png" alt="Facebook" ></a>
<a href="https://twitter.com/yourpage"><img src="https://your-image-link.png" alt="Twitter" ></a>
<a href="https://plus.google.com/yourpage"><img src="https://your-image-link.png" alt="Google Plus" ></a>
<a href="https://pinterest.com/yourpage"><img src="https://your-image-link.png" alt="Pinterest" ></a>
<a href="https://www.youtube.com/user/yourpage"><img src="https://your-image-link.png" alt="YouTube" ></a>
<a href="http://your-forum-URL.com/feed/?f=1"><img src="https://your-image-link.png" alt="Newsfeed" ></a>
</div>


CSS

Code:

#social-network a img {
opacity: 0.2;
max-width: 32px;
max-height: 32px;
}
#social-network a img:hover {
opacity: 1.0;
transition: .5s all ease;
}


[Hardcore Gamer]

Hi there, thanks for your reply. 

Is it possible to put your above code into my toolbar, and remove all of the "share" buttons? I would like to add my YouTube, Insta, FB, Google Plus, ect. buttons into the toolbar instead of the "Share" buttons. I'm trying to replace the Share buttons with my social media accounts/buttons for the forum. I would like to use the HTML buttons already in the toolbar but just replace the links they direct to and add a couple of more HTML buttons in like YouTube and Instagram -  I am not a fan of using normal PNG social media buttons in the toolbar. 

[skouliki]

Hi there, thanks for your reply. 

Is it possible to put your above code into my toolbar, and remove all of the "share" buttons? I would like to add my YouTube, Insta, FB, Google Plus, ect. buttons into the toolbar instead of the "Share" buttons. I'm trying to replace the Share buttons with my social media accounts/buttons for the forum. I would like to use the HTML buttons already in the toolbar but just replace the links they direct to and add a couple of more HTML buttons in like YouTube and Instagram -  I am not a fan of using normal PNG social media buttons in the toolbar. 

Hello 

Read and follow this tutorial Add more share buttons

[Hardcore Gamer]

Hi there, thanks for your reply. 

Is it possible to put your above code into my toolbar, and remove all of the "share" buttons? I would like to add my YouTube, Insta, FB, Google Plus, ect. buttons into the toolbar instead of the "Share" buttons. I'm trying to replace the Share buttons with my social media accounts/buttons for the forum. I would like to use the HTML buttons already in the toolbar but just replace the links they direct to and add a couple of more HTML buttons in like YouTube and Instagram -  I am not a fan of using normal PNG social media buttons in the toolbar. 

Hello 

Read and follow this tutorial Add more share buttons

Thanks! How do I add a HTML button in the style of these? I want to replace the RSS feed button/link and put my YouTube button/link there, but in the same style of the current HTML buttons in the toolbar.

[skouliki]

you have to design it or find a free icon that you like
you can also open a request in our graphic section, please first read the rules

[Hardcore Gamer]

you have to design it or find a free icon that you like
you can also open a request in our graphic section, please first read the rules

Thank you so much! I appreciate the tutorial, I will work on creating these toolbar edits tomorrow.

Also, I was just curious, is there a tutorial for this?

[skouliki]

just google ..add social media to your website.. and you will find many options along with instructions