Ticker

6/recent/ticker-posts

Use the web share API easily with web components

I’m keen on the web percentage API however I became no longer satisfied with my initial implementation of the API. It turned into all a bit complex for what is a totally simple API. I desired some thing extra declarative and easier to use with a extra familiar fallback for whilst the proportion API became no longer available.

I’ve been gambling about with web additives on and off over the past year and I desired to see if I may want to make a issue that would make the usage of the internet proportion API without a doubt easy. I assume I’ve completed it and I hope you like it.


I’ve built a web thing called . It is a wrapper because it is supposed to wrap around any current elements which you may already be the use of as percentage buttons to numerous social networks and replace them with a unmarried detail that uses the web share API.

If you are the usage of Chrome on Android (the simplest modern-day browser that supports the net proportion API) then you can check out the in action. Either scroll to the bottom of this newsletter and click the percentage link or take a look at the examples within the repo.

There are commands for using the inside the readme on GitHub but here’s a quick example.


If the net share API isn't available, the above HTML will just be a hyperlink to share the venture thru a Twitter tweet intent. If the internet proportion API is available, then the net factor will kick in and update the hyperlink with a button that, whilst clicked, will invoke the web percentage API. The button textual content is provided with the aid of the textual content attribute, the sharetext characteristic sets the frame of the share and the shareurl sets the hyperlink to proportion.

The button is injected into the normal DOM, not the shadow DOM, so you can fashion it the usage of ordinary CSS.

Getting fancy with templates

If a plain button isn’t your fashion, the also supports using HTML templates. Instead of the usage of the textual content characteristic to set the button textual content, use a template characteristic to factor to the id of a on the web page and the will hydrate that and insert it in area of the content.

For example, the following code will use an in place of a :



Again, you could style the contents of the template anyway you want. The examples in the repo show a fancier button with an icon.

The web thing is published to Bower and you can set up it to a assignment with:

bower installation --save net-proportion-wrapper

I am investigating other approaches of publishing this web element as, whilst webcomponents.Org seems to favour publishing to Bower, this doesn’t look like the first-rate long time plan for a mission. Support for npm looks like the most vital next step.

What do you watch?

You can now use the net share API declaratively, with just a single internet factor. I’d love to recognise your mind on how this has been applied and whether you suspect it’s a great idea.

ASP.NET Web API is a framework for building HTTP services that can be consumed by a broad range of clients including browsers, mobiles, iphone and tablets. It is very similar to ASP.NET MVC since it contains the MVC features such as routing, controllers, action results, filter, model binders, IOC container or dependency injection.

Post a Comment

0 Comments