https://github.com/rapidwebltd/direct-share-buttons

A pure HTML & CSS implementation of interacting with social networks without the need of heavy JavaScript widgets.
https://github.com/rapidwebltd/direct-share-buttons

css social-buttons social-media social-networks

Last synced: 7 months ago
JSON representation

A pure HTML & CSS implementation of interacting with social networks without the need of heavy JavaScript widgets.

• Host: GitHub
• URL: https://github.com/rapidwebltd/direct-share-buttons
• Owner: rapidwebltd
• License: mit
• Created: 2015-07-17T10:53:59.000Z (almost 11 years ago)
• Default Branch: master
• Last Pushed: 2016-12-15T15:52:15.000Z (over 9 years ago)
• Last Synced: 2025-10-13T11:46:08.734Z (9 months ago)
• Topics: css, social-buttons, social-media, social-networks
• Language: CSS
• Size: 14.6 KB
• Stars: 9
• Watchers: 8
• Forks: 4
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
Direct Share Buttons

===================

*Formerly known as Intent Social Icons*

A pure HTML & CSS implementation on allowing your end users to interact with social networks from your site without any need of loading in heavy JavaScript-based widgets.

## Installation

#### Dependencies

* [Font Awesome](http://fortawesome.github.io/Font-Awesome/)

* [Bower](http://bower.io/#install-bower)

### Via Bower

Simply run:

```

bower install direct-share-buttons

```

### Via Manually

First download the `direct-share-buttons.css` in this repository and include it at the top of your page with the font awesome CDN link:

```html

```

(Or where you have saved the `direct-share-buttons.css` file...)

Next view the demo.html page to find suitable social share buttons and copy the code and you're done! :)

## Examples & Usage

### Circle Icons

![Screenshot of Circle Direct Share Icons](http://i.imgur.com/xOxbDm3.png)

```html



  

  





  

  





  

  





  

  





   

   



```

### Square Icons

![Screenshot of Square Direct Share Icons](http://i.imgur.com/nsRLSLp.png)

```html



  

  





  

  





  

  





  

  





   

   



```

### Icons with Text

![Screenshot of Direct Share Icons with text label](http://i.imgur.com/yVAncsL.png)

```html

 Share

 Tweet

 Share

 Pin It

 Share

```

## Credits

[Font Awesome](http://fortawesome.github.io/Font-Awesome/) - For the Social Network Logos

[Danny van Kooten](https://dannyvankooten.com/add-plain-html-social-sharing-links-posts/) - For the insight into social network sharing

[Jeremy Mansfield](http://www.brandaiddesignco.com/insights/add-a-custom-pinterest-pin-it-button-to-your-website/) - For the insight into Pinterest functionality from URL

## License

MIT