How to make a "Click to tweet" plugin for Ghost Posts?

I would like to make a click to tweet link next to any selected text in the post.
While I can make the button with Twitter API, how can I get the final URL of the post during the editing stage to include in the link href?

And also will it be possible to integrate this into the Ghost Editor Toolbar? Where I select a text and a menu option inserts (click to tweet) href tag next to the text.

Something of the sort shown below

Thank you very much for the support!

Hi there, adding a customised tweet button can be done with the tools that Twitter themselves provide. Check out this page on embedding tweet buttons https://publish.twitter.com/?buttonType=TweetButton&widget=Button

There’s also a button to “set customisation options” so you can add your own text. Using this in conjunction with the custom HTML card would be ideal for your case.

Hi, thanks for the quick response!

But it would be cumbersome for the editors to do it multiple times for every post (assuming we have multiple texts tweet-worthy.)

So I was thinking in terms of automating it, one way to do it would be to generate the href as follows https://twitter.com/intent/tweet?text=url-encoded-selected-text+**URL**. I’m sorry if I was not clear earlier, but if I want to create a new button in the editor menu. Upon highlighting some text and clicking it on it, it automatically inserts a href with above url next to the text we highlighted.

  1. How do I go about creating new features in the Ghost Editor?
  2. Is there any way I can reference the final URL of the post so that handle bars can later fill in that variable on final client side rendering?

Once again, thanks a lot!

  1. How do I go about creating new features in the Ghost Editor?

This is not the sort of feature we’d build in or accept into core - it’s a very slippery slope to ending up with context menu buttons for everything under the sun with each serving very few people and everyone wanting them to work in a slightly different way. If you want to fork Ghost to add your own features the editor source code lives here https://github.com/TryGhost/Ghost-Admin/tree/master/lib/koenig-editor

  1. Is there any way I can reference the final URL of the post so that handle bars can later fill in that variable on final client side rendering?

Ghost does not have dynamic rendering in the way that you’re thinking so there’s no “short code” style feature available for that.

You’re much better off doing this via an HTML card as @DavidDarnes suggested or building something like into your theme for handling automatic creation of “tweet this” buttons.

1 Like

You could even use a little JavaScript and hook into elements you’d like to quote on Twitter, here’s a small example of how you could do it https://codepen.io/daviddarnes/pen/GVRdmK?editors=1010. This reduces the complexity a lot from creating specific UI and handling user interactions

1 Like

Thank you very much. I’ll work with something of this sort.