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 Twitter Publish
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.
Once again, thanks a lot!
- 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
- 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.
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
Thank you very much. I’ll work with something of this sort.
@DavidDarnes – I’m going to impose a bit and ask how to incorporate the script you wrote into an HTML card.
I already have a click-to-tweet card set up:
<p style="font-size: 20px; margin-top: 6px; margin-bottom: 10px; margin-left: 20px; padding-left: 15px; border-left: 4px solid #1423DD;"><b><i>Politics ain't bean bag.</i></b></p>
<p align="right" style="font-size: 16px;"><i>– <a href="https://twitter.com/intent/tweet?url=https%3A%2F%2Fforwardky.com%2Ftest%2F&via=ForwardKY&text=This%20is%20some%20text%20I%20want%20to%20share.&hashtags=hashtag">Click to tweet</a></i></p>
To get the URL for the “Click to tweet” part, I go to a click-to-tweet generator at Twitter Tweet Intent Generator. But of course, I have to do that manually every time. Using your script would be much simpler.
So, would you mind showing how to put your script into my HTML card? Many thanks!
Is this a custom card or one of the standard cards? Regardless you’ll need a CSS selector for every type of card you’re wanting the link to appear on. Once you’ve got it you can use the script I made but replace blockquote with whatever selector you’ve got for the card in this line of the script:
document.querySelectorAll('blockquote')