superfeedr / subtome

A universal Subscribe/Follow button.
http://subtome.com
MIT License
167 stars 32 forks source link

data attributes #60

Closed chrisvanpatten closed 10 years ago

chrisvanpatten commented 10 years ago

Per my conversation last night with @julien51, I think it'd be cool for someone to experiment with HTML5 data attributes for subtome.

I'm wholly unskilled when it comes to JavaScript, so unfortunately that person isn't me... but I wanted to share the idea here anyway.

The current SubToMe code for publishers looks like so:

<input type="button" onclick="(function(){var z=document.createElement('script');z.src='https://www.subtome.com/load.js';document.body.appendChild(z);})()" value="Subscribe">
<script>window.subtome = {suggestedUrl: 'http://www.newsblur.com/?url={url}', suggestedName: 'NewsBlur'}; </script>

I'd love to see this evolve to something more like this:

<a href="https://subscribe.chrisvanpatten.com/chrisvanpatten" onclick="(function(){var z=document.createElement('script');z.src='https://www.subtome.com/load.js';document.body.appendChild(z);})()" data-subtome-suggestedname="NewsBlur" data-subtome-suggestedurl="http://www.newsblur.com/?url={url}">Subscribe</a>

I think this approach, instead of using custom javascript, is easier for publishers to understand and customize. I think it would also open the door for other cool customizations, like letting users specify the desired subscription URL, like so:

<a href="http://randomblog.com/feed/" onclick="(function(){var z=document.createElement('script');z.src='https://www.subtome.com/load.js';document.body.appendChild(z);})()" data-subtome-url="http://randomblog.com/feed/">Subscribe to my favourite site</a>

In this way, users can easily create follow buttons for their favourite or recommended websites, overriding SubToMe's default URL detection.

(Worth noting that I made my revised examples use the a tag instead of a button, but that's teeeechnically another issue entirely.)

julien51 commented 10 years ago

@chrisvanpatten Data attributes should definitely be a way this is used. The only 'problem' at this point is finding which DOM element was clicked and triggered the load of the modal.

Also, using a a tag is perfectly fine :) Any DOM element can be used to load SubToMe, as long as you can attach a event listener to it (onclick) here.

julien51 commented 10 years ago

Ok, I think that's now implemented :) in 6c7b4a1e98e3729f6d869b53005e6336f59c998f and 0dbbdb8bbd3d4e991b6745e2e4cd5a5c8d4ecf5d

I need to update the docs now, but you can do something like:

<input type="button" onclick="(function(btn){var z=document.createElement('script');document.subtomeBtn=btn;z.src='https://www.subtome.com/load.js';document.body.appendChild(z);})(this)" value="Subscribe" data-subtome-resource="http://blog.superfeedr.com" data-subtome-feeds="http://blog.superfeedr.com/atom.xml" data-subtome-suggested-service-name="FeedBin"  data-subtome-suggested-service-url="https://feedbin.me/?subscribe={feed}" >

As you can see the <input> tag now has several data-* attributes:

They're obviously all optional, but both suggested-service- should be used together. I'll update the docs on the site, and hopefully the WP plugin too so that these are completely configurable thru the short code for example!

lloydwatkin commented 10 years ago

@julien51 script location in example can not be http://subtome.com/load.js (this doesn't redirect as you'd expect). Needs to be https://www.subtome.com/load.js. Maybe that's just an oversight in your example, but it would be better if subtome.com also redirected as expected.

Have checked out https://github.com/superfeedr/subtome/commit/0dbbdb8bbd3d4e991b6745e2e4cd5a5c8d4ecf5d locally and its working just great. (Only using data-subtome-feeds though).

Do you have any thoughts on when it will be live?

julien51 commented 10 years ago

Ha, example fixed, sorry about that. This is actually already live, but since we use Appcache and have pretty aggressive caching it may take a couple hours to be visible to you. You can flush Appcache in your browser to see it as it is now!