Continuing the discussion from How can I custom share button?:
I have added new post menu items for sharing to Facebook and Twitter.
They do not have any functionality yet though. I was looking to hopefully piggy back on action of the original share actions for facebook and twitter but I am struggling with doing so.
I was also looking at the api documentation for adding a new share source, but it has not helped.
https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/lib/sharing.js.es6#L7
What do I need to do to copy the share
action of the current facebook and twitter buttons and place them on the post menu items I have created.
2 Likes
For anyone interested in the super hacky way I completed this:
-
I added two post menu buttons as per the screen shot in my original post (one for twitter and one for facebook).
-
using api.attachWidgetAction
I wired the button up to link to the appropriate share url, opening in a popup
api.attachWidgetAction('post-menu', 'facebook-share', () => {
const link = window.location.href + '?u=' + currentUser.username;
const url = "http://www.facebook.com/sharer.php?u=" + encodeURIComponent(link) + '&t=' + encodeURIComponent(title);
window.open(url, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,width=600,height=' + 315);
});
api.attachWidgetAction('post-menu', 'twitter-share', () => {
const link = window.location.href + '?u=' + currentUser.username;
const url = "http://twitter.com/intent/tweet?url=" + encodeURIComponent(link) + "&text=" + encodeURIComponent(title);
window.open(url, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,width=600,height=' + 265);
});
So here I set the link and url. The link is the current topic a user is on (I will need to add some JS to include the specific post number a user tries to share).
UPDATE: No hacky JS needed to get the post number. When you make the post menu button add data
as a property like so:
api.addPostMenuButton('twitter-share', (attrs) => {
return {
action: 'twitter-share',
icon: 'twitter',
className: 'twitter-share',
title: I18n.t('share.twitter'),
data: {
'share-url': attrs.shareUrl,
'post-number': attrs.post_number
},
position: 'first' // can be `first`, `second`, `last` or `second-last-hidden`
};
});
This will result in the follow html for the button tag:
data-share-url="/t/privacy-policy/6?u=stevenpslade" data-post-number="1"
The url is the twitter or facebook share url, which is taken from discourse/app/assets/javascripts/discourse/initializers/sharing-sources.js.es6
.
I also set the title
by getting the .json
of the current topic:
var title;
$.getJSON(window.location.href + '.json', function (data) {
var json = data;
title = json.title;
});
The urls open in a pop up, and the size of the pop up is dependant on if it is Facebook or Twitter (again taken from sharing-sources.js.es6
).
The reason I share this hacky method is in the hopes that someone has a way, way better idea. Ideally, I would want to just extend the current sharing logic and place it on the new post menu buttons
5 Likes