XF 2.3 Social Media Share icons in the header. How?

[Levina]

I'm working on a new site and would like to move the Social Media Share icons to the header, the way Macrumors has it. I just have no idea how to accomplish this. I thought I'd ask ChatGPT but his code nearly broke my new site! I'd be grateful for some help.

Here's a screenshot. I really like how this looks, clean without any borders.

 

[Deleted member 184953]

You can use the header ads position,

 

[Levina]

Ah, I would have never thought of that. Thanks very much, Nick.

So, I tried different things and got the best results with the share_tooltip template. After playing with the code a bit I went from this:


to this:



The icons look exactly right, except they're vertical and I lost the Copy link. I don't know how to fix either. And maybe using the code from that template is not the correct way to do this anyway? I could use a bit more help.

 

[Deleted member 184953]

Can you share the code you used?

 

[Levina]

Here's the code:

 

[Levina]

Still no success with this. Anybody any idea on how to get those share icons in the header like this?

 

[Deleted member 184953]

Wait a minute...

 

[Deleted member 184953]

Use this code:

<xf:macro id="share_page_macros::buttons" arg-iconic="{{ true }}" />

Then in extra.less template:

.shareButtons--iconic
{
    min-width: 300px;
}

Sure there is a better way but it works...

 

[mjda]

Use this code:

<xf:macro id="share_page_macros::buttons" arg-iconic="{{ true }}" />

Then in extra.less template:

.shareButtons--iconic
{
    min-width: 300px;
}

Sure there is a better way but it works...

I do the same thing with the HTML, in the header ad, except here's my extra.less:

.p-header-inner
{
    .shareButtons-buttons
    {
        display: block;
    }
}

 

[Levina]

Oh my, that worked.

The second extra.less code worked best with the HTML in the header ad as it positions the icons a bit better.

It looks great now. Thank you both very much!

 

[Levina]

Guys, I have a problem!

I love the share buttons in the header but they seem to be messing with the editor on my iPad and iPhone in that it is now inaccessible.

Everything is fine on my desktop but on iPhone/iPad there is no "Write your reply..." placeholder and no way to type any text. I can only type something after clicking the Reply or Quote button.

What's really weird is that guests do have a normal functioning editor (I am allowing guests to reply) but as soon as I log in, nope. I thought maybe the buttons were too big, so I made them smaller but that made no difference.

I have disabled the code for now and the editor is okay again but I really like those buttons in the header. Any idea how to fix this?

 

[Gemma]

Have you tried using this addon?

[cXF] Icons in Header

Sep 20, 2017

Add social, RSS and/or contact icons to your header.

• BassMan
• Add-ons [2.x]

 

[Levina]

Have you tried using this addon?

[cXF] Icons in Header

Sep 20, 2017

Add social, RSS and/or contact icons to your header.

• BassMan
• Add-ons [2.x]

Ah, thank you. I will check it out.

EDIT: Yes, I now remember seeing that add-on before. I didn't like the big square borders around the icons.
This is what I have now, with the guys' code. I think it looks much nicer.