Git Product home page Git Product logo

look-at-this's Introduction

LOOK AT THIS

Build Status NPM Version Bower Dependencies Development Dependencies Codacy Badge Donate

About

Just another social sharing plugin. Yeah o.O ... but here are the pros!

  • It is realy realy lightweight. (You only need a css and js file)
  • It is responsive.
  • Customizable link button CSS and template.
  • It works as stand-alone. No jQuery or other libs needed.
  • It respects the users privacy.
  • Any additional JavaScript and CSS code is optional.
  • Supported networks

Responsive showcase

Responsive showcase

Installation

  • npm install look-at-this or bower install look-at-this
  • Import the assets
  • Add a container for the icons called #social-icons

Take a look at examples at

Config networks order and visibility

To get an overview an available list is stored in window.socialIcons.networks (Array of string).
Simply set up a "data-networks" attribute at the #social-icons container to define order and visibilty of share buttons. For example data-networks="email,googleplus,facebook,github,hackernews"

Change share url, title and so on?

By default the settings are stored like this. Each property can be a function.

	// default configuration
	if (!window.socialIcons.setup){
		window.socialIcons.setup = {
			title 	: document.title,
			url 	: location.href,
			subject : "Look at this my friend",
			body 	: function(){
				return "Take a look at this website. It is awesome! " + window.socialIcons.setup.url;
			}
		};
	}

So you can set them to what you need. This informations are masked per social network in the url property at .scream.js for library build. The buildjob bundles them to window.socialIcons.list.

Custom style

There are only two CSS classes to style button layout .social-share-button and .social-icon.

Custom Template

The output of share buttons are base on a simple template. If you need a custom template add a script block like the following to your HTML code.

	<script type="text/html" id="social_icon_template">
	  <% for ( var i = 0; i < icons.length; i++ ) { %>
		<a class="social-share-button" href="#share/<%=icons[i].name%>" target="_blank">
	 		<div class="social-icon social-icon-<%=icons[i].name%>"></div>
		</a>
	  <% } %>
	</script>

Contributing

  • Fork it!
  • Create your feature branch: git checkout -b my-new-feature
  • Commit your changes: git commit -am 'Add some feature'
  • Run the tests: npm test
  • Push to the branch: git push origin my-new-feature
  • Submit a pull request :D

How to add a brand?

  • Install https://github.com/s-a/scream-js
  • Add a file to /ico folder
  • Add the file entry to /ico/.scream.js
  • execute scream .scream.js --build
  • execute node bundle.js
  • execute grunt build
  • execute npm test

Should I add a brand?

Indeed! You can help to make this repo a place containing a well equipped list of share links for social networks.

License

MIT and GPL

Legal

In short, the used logos are registered trademarks and represent only the Companies. They should not be used to represent your products. You may also read the official legal terms of each company.

Credits

Icon Pack by Dan Leech at Simple Icons

look-at-this's People

Contributors

s-a avatar

Stargazers

 avatar Ivo Bathke avatar MichaelPfuetze avatar Bogdan Teodoru avatar redaready avatar  avatar  avatar Walid Saad avatar

Watchers

James Cloos avatar  avatar  avatar

look-at-this's Issues

more sharing URLs

App.Net: https://alpha.app.net/intent/post?text=%{title}+%{url}
Delicious: https://delicious.com/save?url=%{url}&title=%{title}
Diigo: https://www.diigo.com/post?url=%{url}&title=%{title}
Flipboard: https://share.flipboard.com/bookmarklet/popout?v=2&title=%{title}&url=%{url}
Gmail for iOS: googlegmail:///co?subject=%{title}&body=%{url}
Hacker News: https://news.ycombinator.com/submitlink?u=%{url}&t=%{title}
Instapaper: http://www.instapaper.com/hello2?url=%{url}&title=%{title} 
Kippt: https://kippt.com/extensions/new/?url=%{url}&title=%{title}
LinkBoard: http://www.linkboard.org/addurl-ext.php?url=%{url}
Pinboard: http://pinboard.in/add?url=%{url}&title=%{title} 
Pinterest: http://pinterest.com/pin/find/?url=%{url}
Plurk: http://www.plurk.com/m?content=%{title}%20%{url}
Pocket: https://getpocket.com/save?url=%{url}&title=%{title}
Reddit: http://www.reddit.com/submit?url=%{url}&title=%{title}
App.net https://alpha.app.net/intent/post?text=${title}+${url}
Bookie https://bmark.us/{USERNAME}/new?description=${title}&url=${url}
Buffer http://bufferapp.com/add?url=${url}&text=${title}
Delicious https://delicious.com/save?&url=${url}&title=${title}
Douban http://www.douban.com/recommend/?url=${url}&title=${title}
Drafts drafts://x-callback-url/create?text=${title}+${url}
Email mailto:?subject=${title}&body=${url}
Evernote https://www.evernote.com/clip.action?url=${url}&title=${title}
Facebook http://www.facebook.com/sharer.php?u=${url}&t=${title}
Flipboard https://share.flipboard.com/bookmarklet/popout?v=2&title=${title}&url=${url}
Gmail for iOS googlegmail:///co?subject=${title}&body=${url}
Gmail Webmail https://mail.google.com/mail/?view=cm&su=${title}&body=${url}
Google+ https://plus.google.com/share?url=${url}
Huffduffer http://huffduffer.com/add?popup=true&page=${url}
Instapaper http://www.instapaper.com/hello2?url=${url}&title=${title}
Instapaper Text http://www.instapaper.com/text?u=${url}
Kippt https://kippt.com/extensions/new/?url=${url}&title=${title}
LinkedIn http://www.linkedin.com/shareArticle?title=${title}&url=${url}
LinkyWink http://linkywink.com/winkit/?url=${url}&title=${title}
Omnifocus omnifocus:///add?name=${title}&note=${url}
Pinboard https://pinboard.in/add?next=same&url=${url}&description=${title}&title=${title}
Pinboard (read later) https://pinboard.in/add?later=yes&url=${url}&title=${title}&description=${title}
Pinner pinner://bookmark?href=${url}&title=${title}&shared=0&toread=1
Pinterest http://pinterest.com/pin/find/?url=${url}
Plurk http://www.plurk.com/m?content=${url}+(${title})&qualifier=shares
Pocket https://getpocket.com/save?url=${url}&title=${title}
Pocket for iOS pocket://add?url=${url}
Quitter http://quitter.se/?action=newnotice&status_textarea=${title}${url}
Readability https://www.readability.com/save?url=${url}
Spillo spillo:///bookmark?url=${url}&title=${title}
The List http://thelist.io/posts/new?u=${url}&t=${title}
Things things:add?title=${title}&notes=${url}
Tumblr http://www.tumblr.com/share?v=3&u=${url}&t=${title}
Tweetbot tweetbot:///post?text=${title}%20${url}
Twitter https://twitter.com/intent/tweet?url=${url}&text=${title}
Twitter for Mac/iOS twitter://post?message=${title}%20${url}
Twitterrific twitterrific:///post?message=${title}%20${url}
Weibo http://service.weibo.com/share/share.php?url=${url}&title=${title}
Fastmail https://www.fastmail.fm/action/compose/?to=&subject=${title}&body=${url}

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.