I want to move the Facebook and Twitter share buttons to post menu

dev
1

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
2

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 :thinking:

5 Likes