https://github.com/jwebcoder/socialshare
JavaScript plugin to create sharing buttons
https://github.com/jwebcoder/socialshare
Last synced: about 1 year ago
JSON representation
JavaScript plugin to create sharing buttons
- Host: GitHub
- URL: https://github.com/jwebcoder/socialshare
- Owner: JWebCoder
- Created: 2013-08-20T19:06:53.000Z (almost 13 years ago)
- Default Branch: master
- Last Pushed: 2014-02-20T14:35:00.000Z (over 12 years ago)
- Last Synced: 2025-02-05T08:08:31.162Z (over 1 year ago)
- Language: JavaScript
- Homepage: http://jwebcoder.github.io/SocialShare/
- Size: 977 KB
- Stars: 4
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
SocialShare
===========
JavaScript plugin to create sharing buttons
SocialShare 0.93 javascript plugin
-----------
In our days, everyone wants to share their website content to the most used Social Networks.
With this in mind, i’ve created a new JavaScript Plugin called SocialShare.
The objective is to simplify the process of sharing your content to the Social Networks, by calling only one function in JavaScript and let it do the rest.
Version 0.93 supports
-----------
For now, the plugin supports twelve Social Networks:
* Facebook
* Twitter
* Linkedin
* Google +
* Google bookmarks
* Pinterest
* Tumblr
* Delicious
* Reddit
* Tapiture
* Stumbleupon
* Newsvine
And the new feature Themes
This is how it works
-----------
First we need to create the object in JavaScript:
var sharer = new SocialShare();
Simple right?
### Now let’s share something to facebook:
![]()
Here we have five attributes:
* data-type - the social network to share too.
* data-url - the link you want to share.
* data-image - the image you want as a thumbnail.
* data-title - the title of the share.
* data-summary - the summary of the share.
Same thing happens with the other Social Networks.
### For twitter we have:
![]()
The attributes are:
* data-type - the social network to share too.
* data-text - the text that will be tweeted.
* data-url - the link you want to share.
### For linkedIn:
The attributes are:
* data-type - the social network to share too.
* data-url - the link to share.
* data-title - the title to share.
* data-summary - the summary of the share.
### For google +:
The attributes are:
* data-type - the social network to share too.
* data-url - the link to be shared.
### For google bookmarks:
The attributes are:
* data-type - the social network to share too.
* data-url - the link to be shared.
* data-title - the title to share.
* data-summary - the summary of the share.
### For pinterest:
The attributes are:
* data-type - the social network to share too.
* data-url - the link to be shared.
* data-image - the image you want as a thumbnail.
* data-summary - the summary of the share.
### For tumblr:
The attributes are:
* data-type - the social network to share too.
* data-url - the link to be shared.
* data-title - the title to share.
* data-summary - the summary of the share.
* data-share-type - the type of share
* photo - to share a photo
* normal - to share a link
### For delicious:
The attributes are:
* data-type - the social network to share too.
* data-url - the link to be shared.
* data-title - the title to share.
* data-summary - the summary of the share.
### For reddit:
The attributes are:
* data-type - the social network to share too.
* data-url - the link to be shared.
* data-title - the title to share.
### For tapiture:
The attributes are:
* data-type - the social network to share too.
* data-url - the link to be shared.
* data-title - the title to share.
* data-image - the image you want as a thumbnail.
* data-image-title - the image title you want as a thumbnail.
* data-image-width - the thumbnail width.
* data-image-height - the thumbnail height.
### For stumbleupon:
The attributes are:
* data-type - the social network to share too.
* data-url - the link to be shared.
* data-title - the title to share.
### For newsvine:
The attributes are:
* data-type - the social network to share too.
* data-url - the link to be shared.
* data-title - the title to share.
The data-type attribute
--------
This is where we set where we want to share.
For now, the possible values are:
* facebook
* twitter
* linkedin
* googleplus
* googlebookmark
* pinterest
* tumblr
* delicious
* reddit
* tapiture
* stumbleupon
* newsvine
Themes
--------
In order to use the themes, we need to pass some data when we create the object.
var sharer = new SocialShare({
"imageManager":"shareButton",
"themeUrl":"SSThemes",
"theme":"default"
});
This will enable the theme manager, and create the mouse over effect on the chosen share links.
The values:
* imageManager - a class used in all the share links.
* themeUrl - the relative path to the theme folder (default value : SSThemes).
* theme - the default theme (default value : default).
Now all we need is to add the class we set in the constructor in the share link. Using twitter has example, we have this: