New Code - wp-pressthis-button
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:
- Text can be selected either before or after clicking the Reblog button.
- 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.