DEV Community

Ben Halpern for The DEV Team

Posted on

Announcing off-platform "Share to DEV" functionality

I'm excited to share a pretty cool new feature with you!

We have shipped the functionality that allows anyone to create "Share to DEV" buttons with pre-filled DEV posts.

repl.it, a browser-based coding platform, has already implemented this in a really slick way! It's already live.

Here it is in action:

example of replit to DEV

DEV users have been able to embed repl.it instances for a while using a liquid tag: {% replit @benhalpern/HelplessAdvancedKillerwhale %}, but that functionality is now more seamless than ever.

That tag will result in this interactive repl:

(Apologies for the contrived example ๐Ÿ˜„)

repl.it users can take what they've been working on, and generate a pre-filled DEV post in a snap. This makes it incredibly seamless for folks in the repl.it community to share with DEV and the broader software community. repl.it itself is a fascinating tool and this integration make collaboration and community easier and more powerful than ever.

We are also in touch with a few other platforms that are working on integrating the functionality.

The coolest part (IMO) is how extensible it is

It works in a similar fashion to the โ€œShare to Twitterโ€ links you see around the web. It's a simple URL which accepts parameters readable as a GET request โ€” for example, here's the Twitter button for a DEV post:

https://twitter.com/intent/tweet?text=%22Announcing%20off-platform%20%22Share%20to%20DEV%22%20functionality%22%20by%20@bendhalpern%20%23DEVcommunity%20https://dev.to/devteam/announcing-off-platform-share-to-dev-functionality-57j9

Our endpoint, however, accepts arbitrary markdown. So as long as it is typed in properly, you can "pre-fill" anything. For example, here's the DEV prefill for this post:

https://dev.to/new?prefill=---%0Atitle%3A%20Wow,%20Share%20to%20DEV%20is%20really%20cool!%0Apublished%3A%20true%0Atags%3Ameta%0A---%0A%0ANice%20stuff%20DEV%20Team!%0A%0A%7B%25%20link%20devteam%2Fannouncing-off-platform-share-to-dev-functionality-57j9%20%25%7D

This URL could be made easily available as a button:

Share this post

FYI: The URL must escape characters including linebreaks (\n).

Click that link and you'll be taken to a page with some pre-filled content. Any client can serve different versions of pre-fills.

Going forward, I'd like to use this API to build internal features for easily "quoting" comments, etc. on the site.

We could also build browser extensions for adding "Share to DEV" to Twitter, and perhaps GitHub, as we already have rich embeds enabled from each of those platforms. (That is assuming they don't build the functionality natively like repl.it and others are doing ๐Ÿ˜„)

We actually already have a Twitter browser extension that still works, but we have not touched in years. PRs welcome.

GitHub logo forem / DevTwitter

Bringing dev.to headlines to your Twitter browsing experience.

DevTwitter Chrome Extension

Bringing dev.to headlines to your Twitter browsing experience.

Alt text

Installing

Go to The Chrome Store to download the extension.

To access development releases, simply download or clone this code and load as an unpacked extension.

Unpacked Extension

  • If you downloaded the code, unzip the file.
  • Open (chrome://extensions/) or select hamburger menu > More Tools > Extensions in the menu.
  • Enable the developer mode at top right.
  • Click Load unpacked extension... and select the chrome-extension folder.

Features

  • Display dev.to links on the sidebar of the Twitter desktop browser under other trends, bringing a bit more dev life into your Twitter browsing experience. Simple, eh?

Future features

Twitter is a great way to connect and collaborate with other developers, and it would be fun to build in features that did that. The dev.to team will be thinking of ways to do this, but contributions are super welcome.

It is importantโ€ฆ

The bottom line is that this functionality builds awesomely on top of the markdown/liquid tag groundwork we've laid, and should make interacting online as a software developer that much more fluid.

If you would like to implement "Share to DEV" functionality on your platform, be our guests. Depending on your use case, you may need to add a relevant liquid tag to our codebase. Feel free to open an issue or pull request related to any additional functionality you may need.

GitHub logo forem / forem

For empowering community ๐ŸŒฑ


Forem ๐ŸŒฑ

For Empowering Community

Build Status Build Status GitHub commit activity GitHub issues ready for dev GitPod badge

Welcome to the Forem codebase, the platform that powers dev.to. We are so excited to have you. With your help, we can build out Foremโ€™s usability, scalability, and stability to better serve our communities.

What is Forem?

Forem is open source software for building communities. Communities for your peers, customers, fanbases, families, friends, and any other time and space where people need to come together to be part of a collective See our announcement post for a high-level overview of what Forem is.

dev.to (or just DEV) is hosted by Forem. It is a community of software developers who write articles, take part in discussions, and build their professional profiles. We value supportive and constructive dialogue in the pursuit of great code and career growth for all members. The ecosystem spans from beginner to advanced developers, and all are welcome to find their placeโ€ฆ

Happy coding!

Update: The button is now live on CodePen as well!

Top comments (9)

Collapse
 
theodesp profile image
Theofanis Despoudis

awesome no more static code

Collapse
 
jackharner profile image
Jack Harner ๐Ÿš€

Update: The button is now live on CodePen as well!

I was just coming to ask if it was coming to CodePen! Looks great!

Collapse
 
jackharner profile image
Jack Harner ๐Ÿš€

Just tried the CodePen Share To Dev button and it looks like the embed liquid tag is hard coded to https://codepen.io/natastro/pen/vPqErg.

Collapse
 
ben profile image
Ben Halpern

Yikes, I'll try giving them the heads up.

Collapse
 
healeycodes profile image
Andrew Healey

I love how extensible this is. I'll definitely be trying it out ๐Ÿ˜Š.

Collapse
 
diek profile image
diek

I used it in one of my replies! IT REALLY ROCKS!

Collapse
 
subsr97 profile image
Subramanian ๐Ÿ˜Ž • Edited

I'm trying to embed this repl to this post.

But I keep getting invalid repl.it Id error.

Collapse
 
biros profile image
Boris Jamot โœŠ /

It sounds great !
Could it be used to cross post from a blog ?

Collapse
 
ianrathbone profile image
Ian Rathbone

Excellent idea!

Any plans to bring in some Keybase verification / functionality?