Social Media buttons

[Ston3y1]

As well as the Facebook and Twitter links that appear by the individual posts, it would be good to be able to add the main icon buttons for Facebook, Twitter and other social media to the pages of the forum. Ones which link through to our own accounts on those platforms rather than share buttons for members to repost. Can we do this in Cloud and control where on the page they are placed?

Thank you

[Wayne Luke]

You can do this with an HTML module as seen on the front-page of this site. I'll have to look up the instructions on how I did that though. I don't have them readily available.

[Ston3y1]

Wayne Luke have you been able to dig around for this at all?

[Wayne Luke]

The code used in the HTML Module here is this:

<div style="text-align:center">
    <a href="http://www.facebook.com/vbulletin" alt="Visit us on Facebook"><span class="b-icon b-icon__facebook-24">&nbsp;</span></a>
    <a href="http://www.twitter.com/vbulletin" alt="Visit us on Twitter"><span class="b-icon b-icon__twitter-24">&nbsp;</span></a>
</div>

The page/account I link to is hardcoded. It uses images that already exist in vBulletin's default sprite. You can use your own images by uploading them via the vBCloud File Manager in your AdminCP.

[Ston3y1]

That's great, thank you.

[Ston3y1]

Wayne Luke : The page/account I link to is hardcoded. It uses images that already exist in vBulletin's default sprite. You can use your own images by uploading them via the vBCloud File Manager in your AdminCP.

I have saved some images for social media buttons and tried to load the HTML module with them but it came up blank. I obviously broke the code trying to include the core/css/.png files name for the button. Can you let me know how/where I should include the file name from File Manager instead of the element that links to the vBulletin images?

I had just assumed it would go where I've bolded, but with it being a File Manage png reference, it might be different?

<a href="http://www.facebook.com/vbulletin" alt="Visit us on Facebook"><span class="b-icon b-icon__facebook-24">&nbsp;</span></a>

[Ston3y1]

No worries, I tried a few more things and found the <img src="core/css... coding worked.

[Wayne Luke]

The Facebook and Twitter links on that site do not use traditional images (PNG, GIF, JPEG). They are background SVG images provided in the standard SVG template that comes with vBulletin. SVG is an XML schema that tells the browser how to draw images. The SVG instructions are stored as text.

Facebook and Twitter are the only social media SVG images provided by default. That is because the images are used for the third-party logins that are provided with the software. Custom images will either need their own custom SVG & CSS or the use of the <img> tag.

[Ston3y1]

No it's fine, I created my own images, loaded them to File Manager and used an <img src code to link each hyperlink to them. Thanks for all your help with this.