Choose from our various pricing plans. There is a package for everyone!


Add social media buttons to your forum [All Version]

View previous topic View next topic Go down

Tutorial Add social media buttons to your forum [All Version]

Post by Mati™ on Thu Jan 23, 2014 5:29 pm

This tutorial will show you how to add social media icons (twitter, youtube, facebook) icons in the header.

Step 1 - Go into your Administration Panel -> Modules -> Javascript codes management -> Create a new Javascript

Copy and paste the following code:
Title : what you wish
Placement : In all the pages

phpBB 2
Code:
$(function(){$('#i_logo').after('<div id="my_social">
        <a href="WebsiteAddressHere" target="_blank"><img src="ImageDirectLinkHere" alt="Facebook" /></a>
        <a href="WebsiteAddressHere" target="_blank"><img src="ImageDirectLinkHere" alt="Twitter" /></a>
        <a href="WebsiteAddressHere" target="_blank"><img src="ImageDirectLinkHere" alt="Youtube" /></a>
        </div>');
        });

phpBB 3
Code:
$(function(){$('#page-header .navbar').after('<div id="my_social">
        <a href="WebsiteAddressHere" target="_blank"><img src="ImageDirectLinkHere" alt="Facebook" /></a>
        <a href="WebsiteAddressHere" target="_blank"><img src="ImageDirectLinkHere" alt="Twitter" /></a>
        <a href="WebsiteAddressHere" target="_blank"><img src="ImageDirectLinkHere" alt="Youtube" /></a>
        </div>');
        });

PunBB
Code:
$(function(){$('#pun-navlinks').after('<div id="my_social">
        <a href="WebsiteAddressHere" target="_blank"><img src="ImageDirectLinkHere" alt="Facebook" /></a>
        <a href="WebsiteAddressHere" target="_blank"><img src="ImageDirectLinkHere" alt="Twitter" /></a>
        <a href="WebsiteAddressHere" target="_blank"><img src="ImageDirectLinkHere" alt="Youtube" /></a>
        </div>');
        });


Invision
Code:
$(function(){$('#submenu').after('<div id="my_social">
        <a href="WebsiteAddressHere" target="_blank"><img src="ImageDirectLinkHere" alt="Facebook" /></a>
        <a href="WebsiteAddressHere" target="_blank"><img src="ImageDirectLinkHere" alt="Twitter" /></a>
        <a href="WebsiteAddressHere" target="_blank"><img src="ImageDirectLinkHere" alt="Youtube" /></a>
        </div>');
        });

WebsiteAddressHere...this is the URL http address for each of YOUR websites like your facebook, twitter, youtube etc.

ImageDirectLinkHere...this is the Direct Link address from each image you need to add.

Then CSS :
Display -> Pictures and colors -> Colors -> CSS stylesheet

Code:
#my_social img {
    padding: 4px 0;
    margin-left: 3px;
    opacity: 0.6;
}
#my_social img:hover {
    opacity: 0.8;
}


Last edited by Mati™ on Sat Nov 08, 2014 5:46 pm; edited 2 times in total
avatar
Mati™
Administrator
Administrator

Age : 31
Posts : 2112
Join date : 2011-10-20
Forum Version : PhpBB3
Reputation : 147

View user profile http://fmfocus.forumotion.net/forum

Back to top Go down

Tutorial Re: Add social media buttons to your forum [All Version]

Post by Stallmp on Fri Jan 24, 2014 7:08 am

Good tutorial! Thanks Mati Smile
avatar
Stallmp
Member
Member

Age : 23
Posts : 227
Join date : 2014-01-10
Forum Version : PunBB
Reputation : 15

View user profile

Back to top Go down

Tutorial Re: Add social media buttons to your forum [All Version]

Post by amorist on Tue Dec 30, 2014 11:20 pm

Hi Mati,


I do this and it works very well. However, I want to have some changes.

- Please see below image. I want to get these button will not through over the widgets of both sides.

I need them always in the center of homepage.


- One more thing, how can I have these buttons exactly like this but they will be put at the bottom (Footer) of homepage?

Thank you!
Alex.

P.S. I do not know why I can not login to my name (AlexisMcDevin), So I have to register this account.
avatar
amorist
Member
Member

Age : 37
Posts : 12
Join date : 2014-12-30
Forum Version : PhpBB3
Reputation : 0

View user profile

Back to top Go down

Tutorial Re: Add social media buttons to your forum [All Version]

Post by Mati™ on Tue Dec 30, 2014 11:28 pm

Hello @amorist,

Please open a new topic.
avatar
Mati™
Administrator
Administrator

Age : 31
Posts : 2112
Join date : 2011-10-20
Forum Version : PhpBB3
Reputation : 147

View user profile http://fmfocus.forumotion.net/forum

Back to top Go down

Tutorial Re: Add social media buttons to your forum [All Version]

Post by amorist on Tue Dec 30, 2014 11:38 pm

Hi Mati,

Please disregard my request. I do not know how to open new topic. May new account can not do that.

Thank you for all!
Alex.
avatar
amorist
Member
Member

Age : 37
Posts : 12
Join date : 2014-12-30
Forum Version : PhpBB3
Reputation : 0

View user profile

Back to top Go down

Tutorial Re: Add social media buttons to your forum [All Version]

Post by Sponsored content


Sponsored content


Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum