ozdemirburak / Jquery Floating Social Share
Licence: mit
Social media share buttons with counters.
Stars: ✭ 57
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Jquery Floating Social Share
Socialify
💞 Socialify your project. 🌐 Share with the world!
Stars: ✭ 750 (+1215.79%)
Mutual labels: sharing, hacktoberfest
Www Rpcs3
This is a responsive website designed to house and promote the progress of RPCS3, an open-source PlayStation 3 emulator and debugger written in C++. This repository is regularly updated.
Stars: ✭ 164 (+187.72%)
Mutual labels: hacktoberfest, jquery
Water Monitoring System
Water Monitoring System is an IOT based Liquid Level Monitoring system that has mechanisms to keep the user alerted in case of liquid overflow or when tank depletes.
Stars: ✭ 122 (+114.04%)
Mutual labels: hacktoberfest, jquery
Laravel Datatables Buttons
jQuery DataTables Buttons Plugin for Laravel.
Stars: ✭ 192 (+236.84%)
Mutual labels: hacktoberfest, jquery
Laravel Datatables
jQuery DataTables API for Laravel 4|5|6|7|8
Stars: ✭ 4,134 (+7152.63%)
Mutual labels: hacktoberfest, jquery
Server
☁️ Nextcloud server, a safe home for all your data
Stars: ✭ 17,723 (+30992.98%)
Mutual labels: sharing, hacktoberfest
Laravel Datatables Html
Laravel DataTables HTML Builder Plugin
Stars: ✭ 188 (+229.82%)
Mutual labels: hacktoberfest, jquery
Domjudge
DOMjudge programming contest jury system
Stars: ✭ 484 (+749.12%)
Mutual labels: hacktoberfest, jquery
Blaze
⚡ File sharing progressive web app built using WebTorrent and WebSockets
Stars: ✭ 991 (+1638.6%)
Mutual labels: sharing, hacktoberfest
React Filemanager
JavaScript File Manager Material Design Folder Explorer Navigator Browser Manager in React and Redux with Mobile support (with backends for Local Files and FTP)
Stars: ✭ 57 (+0%)
Mutual labels: hacktoberfest
Bikedeboa
A (Progressive) Web App to find, map and review bike parkings in the cities of Brazil.
Stars: ✭ 54 (-5.26%)
Mutual labels: hacktoberfest
Aws Iot Device Sdk Js V2
Next generation AWS IoT Client SDK for Node.js using the AWS Common Runtime
Stars: ✭ 57 (+0%)
Mutual labels: hacktoberfest
Aws C Io
This is a module for the AWS SDK for C. It handles all IO and TLS work for application protocols.
Stars: ✭ 56 (-1.75%)
Mutual labels: hacktoberfest
Go Tiled
Go library to parse Tiled map editor file format (TMX) and render map to image
Stars: ✭ 57 (+0%)
Mutual labels: hacktoberfest
Mue
Fast, open and free-to-use new tab page for modern browsers
Stars: ✭ 56 (-1.75%)
Mutual labels: hacktoberfest
Ng Bootstrap Form Validation
An Angular Module for easy data driven (reactive) form validation
Stars: ✭ 57 (+0%)
Mutual labels: hacktoberfest
jQuery Floating Social Share
Simple jQuery floating social media sharer plugin. Currently supported platforms are Facebook, Pinterest, Reddit, Tumblr, VK and Odnoklassniki with counter feature; Twitter, Linkedin, Mail, Telegram, Viber, and Whatsapp without counter feature.
You can check the plugin live in here: https://onlinealarmkur.com/en/
Getting Started
Install via npm:
npm install --save jquery-floating-social-share
Or install via zip, then include jQuery and the plugin on a page.
<link rel="stylesheet" type="text/css" href="dist/jquery.floating-social-share.min.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="dist/jquery.floating-social-share.min.js"></script>
Finally, call the floatingSocialShare
method on body with your custom options.
$("body").floatingSocialShare({
buttons: ["facebook", "twitter"],
text: "share with:"
});
To make the social share buttons appear next to the specific content, instead of the body, reference with selector.
$(".content").floatingSocialShare({
buttons: ["facebook", "twitter"],
text: {
'facebook': 'Share on Facebook',
'twitter': 'Share on Twitter'
},
place: "content-left"
});
Options
-
place:
String
(top-left
by default) Set the position of the box. Currently:content-left
,content-right
,top-left
andtop-right
are available. -
counter:
Boolean
(true
by default) Set tofalse
to hide counters that appear below the buttons. -
facebook_token:
String
(null
by default) To show the Facebook share count, obtain an access token. -
buttons:
Array
(["facebook", "twitter"]
by default) Sets the social buttons for sharing. Available ones aremail
,facebook
,linkedin
,odnoklassniki
,pinterest
,reddit
,telegram
,tumblr
,twitter
,viber
,vk
, andwhatsapp
. -
title:
String
(document.title
by default) Sets the title for the share message. -
url:
String
(window.location.href
by default) Sets the url for the share message. -
text:
Object | String
({'default': 'share with:'} by default) Sets the share title for the social buttons. If properties are not assigned specifically, will use the default one appended with the button tag, for instance share with facebook. -
text_title_case:
Boolean
(false
by default) Converts share text to title case, for instance, share with facebook will become Share With Facebook when set to true. -
description:
String
($('meta[name="description"]').attr("content")
by default) Sets the description for the share. -
media:
String
($('meta[property="og:image"]').attr("content")
by default) Sets the media for the Pinterest share. -
target:
Boolean
(true
by default) Opens page sharer links, for instance Twitter intent page, in a new tab. -
popup:
Boolean
(true
by default) Opens links in a popup when set true. When it is false, links are opened in a new tab. -
popup_width:
Number
(400
by default) Sets the sharer popup's width. -
popup_height:
Number
(300
by default) Sets the sharer popup's height. -
extra_offset:
Number
(15
by default) Adds an extra offset formargin-left
if the selected place iscontent-right
orcontent-left
.
Full Example
$("body").floatingSocialShare({
place: "top-left", // alternatively content-left, content-right, top-right
counter: true, // set to false for hiding the counters of buttons
facebook_token: null, // To show Facebook share count, obtain a token, see: https://stackoverflow.com/questions/17197970/facebook-permanent-page-access-token/43570120#43570120
buttons: [ // all of the currently available social buttons
"mail", "facebook", "linkedin", "odnoklassniki",
"pinterest", "reddit", "telegram", "tumblr", "twitter",
"viber", "vk", "whatsapp"
],
title: document.title, // your title, default is current page's title
url: window.location.href, // your url, default is current page's url
text: { // the title of tags
'default': 'share with ',
'facebook': 'share with facebook',
'twitter': 'tweet'
},
text_title_case: false, // if set true, then will convert share texts to title case like Share With G+
description: $('meta[name="description"]').attr("content"), // your description, default is current page's description
media: $('meta[property="og:image"]').attr("content"), // pinterest media
target: true, // open share pages, such as Twitter and Facebook share pages, in a new tab
popup: true, // open links in popup
popup_width: 400, // the sharer popup width, default is 400px
popup_height: 300 // the sharer popup height, default is 300px
});
Generating Minified Files
Install node and npm following one of the techniques explained within this link and run the commands below.
$ npm install --global gulp-cli
$ npm install
$ gulp
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].