Social Share

[Dax (Daniela)]

This component only works on public sites.
Share icons will be automatically disabled on private sites when site setting login required is active.

	Summary	Social Share allows you to easily add extra social providers to the share button on posts…
	Preview	Preview on theme-creator.discourse.org
	Repository Link	https://github.com/discourse/discourse-social-share
	New to Discourse Themes?	Beginner’s guide to using Discourse Themes

Install this theme component

Samples

Settings:

Some providers & Links:

English Social Media

Tumblr. https://www.tumblr.com/share/link?url=
Pinterest: https://pinterest.com/pin/create/button/?url=
Linkedin: https://www.linkedin.com/shareArticle?mini=true&url=
Reddit: https://reddit.com/submit?url=
AddThis: https://www.addthis.com/bookmark.php?url=
GetPocket: https://getpocket.com/edit?url=
Evernote: https://www.evernote.com/clip.action?url=
HackerNews: https://news.ycombinator.com/submitlink?u=
StumbleUpon https://www.stumbleupon.com/submit?url= Replaced with mix.com
Digg: https://digg.com/submit?url=
FlipBoard: https://share.flipboard.com/bookmarklet/popout?v=2&title=
InstaPaper:https://www.instapaper.com/edit?url= (currently European users can not access because of the GDPR)
Flattr: https://flattr.com/submit/auto?user_id={user_id}&url=
Diaspora: https://share.diasporafoundation.org/?title={title}&url=
Viber: viber://forward?text=
Mastodon: https://mastodonshare.com/?url=

Non-English Social Media

QzSahre:http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url= (chinese)
Weibo: http://service.weibo.com/share/share.php?url= (chinese)
Douban: https://www.douban.com/recommend/?url= (chinese)
RenRen: http://widget.renren.com/dialog/share?resourceUrl= (chinese)
Vk: https://vk.com/share.php?url= (russian)
OKru: https://connect.ok.ru/dk?st.cmd=WidgetSharePreview&st.shareUrl= (russian)
Xing: https://www.xing.com/app/user?op=share&url= (german)
SurfingBird: http://surfingbird.ru/share?url=

Phone/Audio-Based Social Media

SMS: sms:{phone_number}?body=
Telegram: https://telegram.me/share/url?url=
LineMe: https://lineit.line.me/share/ui?url=
Skype: https://web.skype.com/share?url=
WhatsApp: https://wa.me/?text=
WhatsApp Web: https://web.whatsapp.com/send?text= (read also Social share component with WhatsApp Web - #11 by Dax)

This guide is a wiki, if you have other providers, maybe specific for your country, just add them to the list.

You will find the share URL in the documentation for the developers.

[Dax (Daniela)]

Premise: I do not use, nor have I ever used Instagram but, I do not believe that Instagram have a share button at all, for sure there is a “follow” button that you can add if you want it.

Something like this should work (maybe)

instagram,instagram,follow me on instagram,https://www.instagram.com/your-instagram-username/?ref=

[cogdog (Alan Levine)]

In the Component Settings:

social share links: LinkedIn, fab-linkedin, Share to LinkedIn, https://www.linkedin.com/shareArticle?mini=true&url=

svg-icons: fab-linkedin

I think I had to do force-refresh in the browser to nudge it.

[Kuro22]

Hey! I saw in your post that you added weixin sharing. I’d like to add this too. Could you share with me the link? Thanks in advance!

weixin://dl/moment??

[Dax (Daniela)]

It’s

weixin://dl/moments

but please note that it’s a unofficial deep linking URL so it may stop working if Wechat should change/remove it.

More info at

Is there any method to share text from mobile web to wechat by sharing button?

Anyway, if you configure it correctly and works, add it to the list in the first post of this topic.

[Kuro22]

Thanks for your response. Unfortunately, it doesn’t work. On clicking the sharing button, WeChat was called up but with no more reaction.

I searched “wechat url scheme” on Chinese Internet, the results indicate that WeChat doesn’t support this kind of deep link any more since 2 or 3 years ago.

[Decorbuz]

I think the changes that were made to the share dialog a couple months back might’ve broken this #theme-component. It doesn’t appear to be working.

[Victor_Ashiedu]

I installed this plugin but it is not showing in my plugin list.

1. I added the plugin to my app.yml (- git clone GitHub - discourse/discourse-social-share)
2. Then I rebuilt the container (cd /var/discourse, ./launcher rebuild app)

I am not sure why the plugin is not showing up on the list

[Moin]

This is a theme-component.
So you need to follow How do I install a Theme or Theme Component?

[Victor_Ashiedu]

Thanks @Moin. I will try that

[Dax (Daniela)]

@Decorbuz

It doesn’t appear to be working.

The component still works, but only on public sites. Some time ago we disabled the ability to share posts and topics on social providers when the sites are private.

I just updated the OP accordingly.

[Decorbuz]

@Dax

The component still works, but only on public sites. Some time ago we disabled the ability to share posts and topics on social providers when the sites are private.

@Dax

I just updated the OP accordingly.

Thanks a bunch! The #plugin was causing a bunch of conflicting issues with my forum. Now I know why!

[busfactor]

hmm, using on a public site and still not showing correctly…

[Brandon007 (Brandon)]

This looks great, but how do we add custom icons that are not found on Font Awesome?

Oh, I may have found something:

Replace Discourse's default SVG icons with custom icons in a theme

You can replace a Discourse’s default SVG icons individually or as a whole with your own custom SVG and override them within a theme or theme component. Step 1 - Create an SVG Spritesheet To get started, you must create an SVG Spritesheet. This can contain anything from a single additional custom SVG icon up to an entire replacement set of hundreds. The spritesheet should be saved as an SVG file. In principle, you are nesting the <svg> tag contents from the original SVG icon file into <symbol>…

[volanar]

What is the difference between this component and the built-in share function?

[awesomerobot (Kris)]

The built-in share function only supports a limited number of options like twitter/facebook and email, this component allows any link to be added.

[volanar]

That is, this module complements the built-in share function, but does not replace it.

[Brandon007 (Brandon)]

This is fantastic, thanks so much! It’s a great addition and I love the customization we’re able to add.

I did notice an issue or perhaps a misconfiguration on my part. When highlighting text to share as a quote, the mini tool bar wants to list every custom share icon I added and it won’t fit. I tried to scroll and arrow over, but it’s just cut off. Not a show stopper, but maybe of interest to the devs.

I jumped over to share quote buttons but it doesn’t look like I can add or remove anything there.

Tip:

For anyone that wants to implement this, but with social networks not on the list. Make sure you read Replace Discourse's default SVG icons with custom icons in a theme and How to overrule a color variable for one theme only? - #7 by smrtey which will walk you through configuring about.json, that’s key so you can add the icons-sprite.svg file!

If you want to replace share icons, this thread is your friend, Use standard share icon for share post (instead of link icon) - #9 by bquast

[cogdog (Alan Levine)]

Woot! Was able to add a Share to Mastodon link using

https://mastodonshare.com/?url= - popup asks for instance, then creates the proper setup to post.