feat: add some new social share buttons

public/src/modules/share.js

@@ -3,12 +3,11 @@
 
 define('share', ['hooks'], function (hooks) {
 	const module = {};
-
-	module.addShareHandlers = function (name) {
 	const baseUrl = window.location.protocol + '//' + window.location.host;
 
+	module.addShareHandlers = function (name) {
 		function openShare(url, urlToPost, width, height) {
-			window.open(url + encodeURIComponent(baseUrl + config.relative_path + urlToPost), '_blank', 'width=' + width + ',height=' + height + ',scrollbars=no,status=no');
+			window.open(url, '_blank', 'width=' + width + ',height=' + height + ',scrollbars=no,status=no');
 			hooks.fire('action:share.open', {
 				url: url,
 				urlToPost: urlToPost,
@@ -32,11 +31,36 @@ define('share', ['hooks'], function (hooks) {
 		});
 
 		addHandler('[component="share/twitter"]', function () {
-			return openShare('https://twitter.com/intent/tweet?text=' + encodeURIComponent(name) + '&url=', getPostUrl($(this)), 550, 420);
+			const postUrl = getPostUrl($(this));
+			const twitter_url = `https://twitter.com/intent/tweet?text=${encodeURIComponent(name)}&url=${encodeURIComponent(postUrl)}`;
+			return openShare(twitter_url, postUrl, 550, 420);
 		});
 
 		addHandler('[component="share/facebook"]', function () {
-			return openShare('https://www.facebook.com/sharer/sharer.php?u=', getPostUrl($(this)), 626, 436);
+			const postUrl = getPostUrl($(this));
+			const facebook_url = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(postUrl)}`;
+			return openShare(facebook_url, postUrl, 626, 436);
+		});
+
+		addHandler('[component="share/whatsapp"]', function () {
+			const postUrl = getPostUrl($(this));
+			const message = encodeURIComponent(name) + ' - ' + encodeURIComponent(postUrl);
+			const whatsapp_url = config.useragent.isMobile ?
+				`whatsapp://send?text=${message}` :
+				`https://wa.me/?text=${message}`;
+			return openShare(whatsapp_url, postUrl, 626, 436);
+		});
+
+		addHandler('[component="share/telegram"]', function () {
+			const postUrl = getPostUrl($(this));
+			const telegram_url = `https://t.me/share/url?text=${encodeURIComponent(name)}&url=${encodeURIComponent(postUrl)}`;
+			return openShare(telegram_url, postUrl, 626, 436);
+		});
+
+		addHandler('[component="share/linkedin"]', function () {
+			const postUrl = getPostUrl($(this));
+			const linkedin_url = `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(postUrl)}`;
+			return openShare(linkedin_url, postUrl, 626, 436);
 		});
 
 		hooks.fire('action:share.addHandlers', { openShare: openShare });
@@ -48,7 +72,8 @@ define('share', ['hooks'], function (hooks) {
 
 	function getPostUrl(clickedElement) {
 		const pid = parseInt(clickedElement.parents('[data-pid]').attr('data-pid'), 10);
-		return '/post' + (pid ? '/' + (pid) : '');
+		const path = '/post' + (pid ? '/' + (pid) : '');
+		return baseUrl + config.relative_path + path;
 	}
 
 	return module;

src/meta/configs.js

@@ -178,7 +178,7 @@ async function processConfig(data) {
 	if (data.minimumUsernameLength > data.maximumUsernameLength) {
 		throw new Error('[[error:invalid-data]]');
 	}
-
+	require('../social').postSharing = null;
 	await Promise.all([
 		saveRenderedCss(data),
 		getLogoSize(data),

src/social.js

@@ -18,12 +18,27 @@ social.getPostSharing = async function () {
 		{
 			id: 'facebook',
 			name: 'Facebook',
-			class: 'fa-facebook',
+			class: 'fa-brands fa-facebook',
 		},
 		{
 			id: 'twitter',
-			name: 'Twitter',
-			class: 'fa-twitter',
+			name: 'X (Twitter)',
+			class: 'fa-brands fa-x-twitter',
+		},
+		{
+			id: 'whatsapp',
+			name: 'Whatsapp',
+			class: 'fa-brands fa-whatsapp',
+		},
+		{
+			id: 'telegram',
+			name: 'Telegram',
+			class: 'fa-brands fa-telegram',
+		},
+		{
+			id: 'linkedin',
+			name: 'LinkedIn',
+			class: 'fa-brands fa-linkedin',
 		},
 	];
 	networks = await plugins.hooks.fire('filter:social.posts', networks);

src/views/admin/settings/general.tpl

@@ -300,7 +300,7 @@
 						<div class="form-check form-switch mb-3">
 							<input type="checkbox" class="form-check-input" id="{./id}" data-field="post-sharing-{./id}" name="{./id}" {{{ if ./activated }}}checked{{{ end }}} />
 							<label for="{./id}" class="form-check-label">
-								<i class="fa fa-fw {./class}"></i> {./name}
+								<i class="fa-fw {./class}"></i> {./name}
 							</label>
 						</div>
 						{{{ end }}}