XF 2.1 create widget with social icon

[Luca.M]

salche can someone help me create simple social icons with respective links?
I need telegram facebook and youtube
thank you

 

[Russ]

You could just create a simple HTML widget using the share button HTML with a slight modification:

<div class="shareButtons shareButtons--iconic">
<div class="shareButtons-buttons">
    <a class="shareButtons-button shareButtons-button--brand shareButtons-button--facebook" href="FACEBOOKURL">
        <i aria-hidden="true"></i>
        <span>Facebook</span>
    </a>
    <a class="shareButtons-button shareButtons-button--brand shareButtons-button--twitter" href="TWITTERURL">
        <i aria-hidden="true"></i>
        <span>Twitter</span>
    </a>
    <a class="shareButtons-button shareButtons-button--brand shareButtons-button--reddit" href="REDDITURL">
        <i aria-hidden="true"></i>
        <span>Reddit</span>
    </a>
    <a class="shareButtons-button shareButtons-button--brand shareButtons-button--pinterest" href="PINTERESTURL">
        <i aria-hidden="true"></i>
        <span>Pinterest</span>
    </a>
    <a class="shareButtons-button shareButtons-button--brand shareButtons-button--tumblr" href="TUMBLRURL">
        <i aria-hidden="true"></i>
        <span>Tumblr</span>
    </a>
</div>
</div>

Result:

 

[spk100]

It's a long time to bump this thread. But I was thinking why Instagram is not in this list? How can I add that?

 

[Jeremy P]

Instagram doesn't offer this functionality, though native web share should surface it where supported.

 

[spk100]

Instagram doesn't offer this functionality, though native web share should surface it where supported.

I used the above code to show the link to my social pages. But to the css, when I added Instagram, the icon did not appear. Hence wondered.

 

[Jeremy P]

Oh, I glossed over that this is for custom links rather than sharing.

You could probably add an Instagram button like this:

<a class="shareButtons-button shareButtons-button--brand" href="...">
    <xf:fa icon="fab fa-instagram" />
    <span>Instagram</span>
</a>

...but you'd have to add custom styling for the hover effect.

 

[spk100]

Thank you.

 

[Oersted]

Oh, I glossed over that this is for custom links rather than sharing.

You could probably add an Instagram button like this:

<a class="shareButtons-button shareButtons-button--brand" href="...">
    <xf:fa icon="fab fa-instagram" />
    <span>Instagram</span>
</a>

...but you'd have to add custom styling for the hover effect.

Anyone know how to add the custom styling for the hover effect?

 

[Jeremy P]

Just some standard LESS. Add a class to your link, like shareButtons-button--instagram. Then in your extra.less template, add something like:

.shareButtons-button--instagram:hover
{
    background-color: rgb(245, 0, 0);
}