New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

data attributes #60

Closed
chrisvanpatten opened this Issue Dec 5, 2013 · 4 comments

Comments

3 participants
@chrisvanpatten

chrisvanpatten commented Dec 5, 2013

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

This comment has been minimized.

Show comment
Hide comment
@julien51

julien51 Dec 6, 2013

Member

@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.

Member

julien51 commented Dec 6, 2013

@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

This comment has been minimized.

Show comment
Hide comment
@julien51

julien51 Dec 9, 2013

Member

Ok, I think that's now implemented :) in 6c7b4a1 and 0dbbdb8

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:

  • data-subtome-resource
  • data-subtome-feeds
  • data-subtome-suggested-service-name
  • data-subtome-suggested-service-url

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!

Member

julien51 commented Dec 9, 2013

Ok, I think that's now implemented :) in 6c7b4a1 and 0dbbdb8

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:

  • data-subtome-resource
  • data-subtome-feeds
  • data-subtome-suggested-service-name
  • data-subtome-suggested-service-url

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

This comment has been minimized.

Show comment
Hide comment
@lloydwatkin

lloydwatkin Dec 9, 2013

@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 0dbbdb8 locally and its working just great. (Only using data-subtome-feeds though).

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

lloydwatkin commented Dec 9, 2013

@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 0dbbdb8 locally and its working just great. (Only using data-subtome-feeds though).

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

@julien51

This comment has been minimized.

Show comment
Hide comment
@julien51

julien51 Dec 9, 2013

Member

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!

Member

julien51 commented Dec 9, 2013

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment