Bookmarklets for #Indieweb Favorites and Retweets

It has been almost 2 years since I reconfigured this site to make it part of the Indieweb. I recently redesigned the site mostly for the purposes of learning more about WordPress template creation. There are lots of great templates but I like knowing more about how all the pieces fit together and it is a nice way for me to give myself a crash course in PHP, CSS, Microformats and other things.

As I’ve been hacking away at the site I’ve also been giving some thought to making Retweeting and Favoriting Tweets a little easier. It does take a few more clicks than just simply clicking the favorite button in your Twitter client. I thought that I might as well make it worth while and have the Tweet embedded as part of the post on my site.

I’ve created 2 bookmarklets that grab the URL of the Tweet and generate the embed code. This is put in a pop up that you then copy from and it will open your new post form so you can paste it in and add anything else you like. I like this because then when I’m looking at my site it gives more context to the Favorites and Retweets.

The two are ready to go but to get full advantage of them, you need to edit the bits at the end that says URL_TO_YOUR_NEW_POST_PAGE. In that location you’d put the URL to what ever the New Post page is on your site. This way, wen you copy your text from the pop up and click OK, you’ll be brought to you new post page so you can simply paste in the code.

Here is an example of a retweet. My bookmarklet puts in the text of the tweet which, depending on your connection speed, you may see before the embed shows up. This has the secondary effect of the tweet text being part of the post so that it later shows up in searches should I want to remember what I retweeted or favorited.

Drag this link up to your bookmark bar then make the edits I mentioned above.
Indieweb Favorite

Bookmarklet code to Favorite a tweet:

javascript:void(prompt('To make an Indieweb FAVORITE of this tweet\nCopy the code below and paste it to a new entry on your site:','<a class="u-bridgy-omit-link" href="https://www.brid.gy/publish/twitter"></a><p>Liked this <a class="u-like-of" href="'+location.href+'">tweet:</a></p><blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">'+document.title+'<a href="'+location.href+'"></a></blockquote><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>'));window.open('URL_TO_YOUR_NEW_POST_PAGE');

Drag this link up to your bookmark bar then make the edits I mentioned above.
Indieweb Retweet

Bookmarklet to Retweet a tweet:

javascript:void(prompt('To make an Indieweb RETWEET of this tweet\nCopy the code below and paste it to a new entry on your site:','<a class="u-bridgy-omit-link" href="https://www.brid.gy/publish/twitter"></a><p>Retweeted this <a class="u-repost-of" href="'+location.href+'">tweet:</a></p><blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">'+document.title+'<a href="'+location.href+'"></a></blockquote><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>'));window.open('URL_TO_YOUR_NEW_POST_PAGE')

I’ve tested these in Chrome. Let me know if you make any improvements or have other bookmarklets you like.

07AUG16: Made a few edits to the code as it wasn’t quite working as expected.

5 comments or webmentions

  1. Are you sure you copied the code correctly? After making the changes, I get most of the post I expect, but instead of the embedded tweet, I get a blockquote with the text “+document.title+” instead of the tweet text. I was testing this in chrome as well.

    I’m suspecting that the code portion about brid.gy uses bridgy to cross-post the like/retweet to Twitter, but without including a URL link back to the permalink of the post on WordPress?

Leave a Reply

Your email address will not be published. Required fields are marked *