Ari Bader-Natal

New Code - wp-pressthis-button

Filed under:

Updated on 7/16/2017: Project description modified and screenshots added to reflect recent improvements to the UX.


WP Reblog Button

Every WordPress instance ships with a bookmarklet-based tool (Press This) that authors can use to easily create a new WordPress post that quotes selected text from any other website with attribution, onto their own WordPress blog.

This open-source project (code at https://github.com/aribn/wp-pressthis-button) creates an alternate interface for this quote-and-reblog functionality, packaging it as a button that a page author can add to the ubiquitous set of social sharing buttons. This way, readers are provided with a way to easily share quotes from the page author's page onto their own WordPress site.

Something like this reblog functionality already exists within the wordpress.com network reader, but I'm not aware of any comparable functionality that also supports self-hosted Wordpress sites. This project supports all up-to-date WordPress instances, regardless of where they are hosted.

Demo

I added the Reblog button to every page on my blog, so feel free to try it on any post, including this one. The clip below shows me reblogging a post about the "fixed-effort" bicycle concept to a self-hosted Wordpress blog at favorites.aribadernatal.com:

It's worth noting two bits of polish that streamline usage:

  1. Text can be selected either before or after clicking the Reblog button.
  2. Once you enter your WP blog URL once, the URL will be saved for that domain, so you won't need to retype it the next time.

Taking advantage of both of these, it's a bit easier and faster to use:

Usage

Simply add this to your HTML in the same way you would any other "Share" embed.

<div id="reblog-this-button" unselectable="on" class="unselectable"></div>
<script type="text/javascript">var wpPressThisButtonServer="";!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src=wpPressThisButtonServer+"/wp-pressthis-button.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"reblog-btn-js");</script>

Self-hosting

If you'd rather self-host this than load it from the CloudFront CDN, upload the contents of the src directory from the aribn/wp-pressthis-button repository on Github to any web-accessible location. Update the wpPressThisButtonServer variable in the code snippet above to match this root location.

Developing

If you'd like to modify the code, you can easily run it locally. Check out the aribn/wp-pressthis-button repository. cd src && python -m SimpleHTTPServer 8000 to start the server locally, then point your browser at http://localhost:8000/ to get started with a functional demo.

License

As this builds on the Press This code from Wordpress, it also uses the GPLv2 license.

Motivation

I built this as a proof-of-concept of an idea mentioned in a tweet to Mike Caulfield.