tabalinas/jssocials

Social Network Sharing jQuery Plugin

jssocials's Issues

Share for Tumblr

Hi, this plugin is great, but I need some help.
Can you show me how to implement Tumblr in this plugin. (sorry, my english is not so good).
Thank you.

new release?

Maybe it's time for a new release?

social buttons doesn't work

Hi there,

Nothing works, it's there but it doesn't respond and it's not attached to the left side but more in the middle.
How can I make it work??

https://212.199.114.168/~drummer/index.php

Thanks

Customizing output

Hi!

1. How can i divide 8 logos output to two rows with 4 logos on each?
   I anderstand its possible to make throw div1.jsSocials and div2.jsSocials but in large screen i need 2 rows in phones 1 row..
2. And when a minimize screen - icons not aligned by cell - one icon not exactly under up icons.
3. And one more q: how can i add to class jssocials-share my own classes?

How added Telegram Social...

#1) On jssocials.js

telegram: { label: "Telegram", logo: "fa fa-paper-plane", shareUrl: "tg://msg?text={url} {text}", countUrl: "", shareIn: "self" },

on css :

.jssocials-share-telegram .jssocials-share-link{background:#2CA5E0} .jssocials-share-telegram .jssocials-share-link:hover{background:#076D9F}

Regards

linkedin share doesn't work

linkedin share doesn't work.
please check

I want facebook send to inbox

I want icon facebook send link into inbox (via message)

do you know how i can use php code for the pintrest image

image: " ",

can this be used as the image for pintrest so that it share the image from the product i am on. ect.

if you could tell me how i would be most grateful.

Any built-in support for copy text share?

Is there any built-in support for copy text share?
If not how can I implement it?

Can't get email adress on email share

I can 'r get the mail adress to be merged into the mailto querystring on the email share

Here is the script I've tried.

Can anybody help?

     <div id="shareIcons" style="text-align: right"></div>
                <script>
                    $("#shareIcons").jsSocials({
                        url: "http://www.rampelys.dk",
                        text: "Rampelys Silkeborg",
                        showLabel: false,
                        showCount: false,
                        shares: [{ share: "email", label: "[email protected]", text: "besked fra rampelys.dk", url:"" }, "facebook", "googleplus"] });

                    //$("#shareIcons").jsSocials("shareOption", "email", "text", "Besked fra www.rampelys.dk:");
                    //$("#shareIcons").jsSocials("shareOption", "email", "E-mail", "[email protected]");
                    //$("#shareIcons").jsSocials("shareOption", "email", "mailto", "[email protected]");
                    //$("#shareIcons").jsSocials("shareOption", "email", "url", "");


                </script>

`

Doesn't work with gulp and main-bower-files plugin

I can't get this to work with gulp and main-bower-files plugin. I have checked bower.json all main files are there, but for some reason they doesn't get in the pipe.

This is snippet from my gulpfile.js:

var gulp = require('gulp'),
    bower = require('main-bower-files'),
    concat = require('gulp-concat'),
    uglify = require('gulp-uglify'),
    plumber = require('gulp-plumber');

gulp.task('js', [], () => {
    var src = bower(['**/*.js']).concat([
        // Add custom files
    ]);
    return gulp.src(src)
        .pipe(plumber())
        .pipe(uglify())
        .pipe(concat('all.min.js'))
        .pipe(gulp.dest('dist/assets/js'));
});

Am I missing something?
Thanks

Any way to display it vertically?

Is there any way to do it currently?

Populate count from element data

I'm looking for a way to populate count directly through HTML.

Something like
<div class="share" data-facebook-count="2" data-pinterest-count="4"> etc.

Any ideas appreciated.. I don't really want to modify the jssocials.js to do this, but I think there is no other way?
It would be nice if there was some function I could override to achieve this.

Thanks a lot for any help!

how to view by popup like facebook share ?

when click on any share btn it open on new page at browser how can i use it by popup not new page

Instagram sharing: How to?

Instagram sharing: How to?

Mobile devices detection > private messaging > whatsapp

Hi, really love your script and I am currently working with it in a Joomla website.
I am currently investigating to implement private messaging (e.g. whatsapp).
This is possible with your script, but one functionality is missing that could come in handy.

Whatsapp is only available on mobile devices, so it would be really cool if it didn't show up on eg tablet or desktop.

Not sure if mobile device detection should be part of your script but maybe this is an idea that you could work with? Love to hear your thoughts on this!

Thanks a lot for sharing your amazing work with the world :)

Youtube embedded web page is not able to share

I have a page having youtube link iframe. am trying to share this on social medias using this jssocial i couldnt share. please some body help me to figure out.

facebook preview not showing correctly

Hi Artem,

I integrated jssocials plugin in the website conceptcradle.com. When I try to share in facebook the preview is only showing the title and the url. How can I display the image and description in the facebook preview? Is there a way to control the previews for facebook and google plus?

Thanks,

Con

Adding "share via email"

Hi there,
Great plugin, very well done!
I would like to know though, is it possible to add an extra option to share pages via email?
Thanks :)

Do not package the .sass-cache dir

Disclaimer: I do not use the package, this was found during automated npm packages downloading.

Your current package size is 1.1 KiB packed, 6.2 MiB unpacked. 5.9 MiB of that are inside the .sass-cache dir. I suspect that this probably got packed to the release by mistake.

You could add that dir to the .gitignore.

Title of page coming with white space and new lines as share text

I am getting this strange behaviour, If my page title as some white space and new line, its picking up those and.

  <title>      My cool title with location, New Delhi India 
     &middot; AppName</title>

Now when I am sharing it its showing it like this

  My cool title with location, New Delhi India 
     · AppName http://localhost:8000/AppName

Since title is generated from PHP backend I am not able to keep it in single line, if jssocial can clean the text a lil will be good

 92.         return $.extend({ url: this.url, text: this.text }, share, shareConfig);

I thing adding .trim() on desct or title should do it

whatsapp issue on some mobile browsers

Hi,
more and more people are using my Joomla plugin that displays the jssocials buttons on Joomla content pages.
Thats is good news... but I recently ran into an issue with a user where the whatsapp button didn't work.
As it turned out this user was running a specific browser for android and clicking the button resulted in a page not found error.
At first I thought it was an issue with his specific browser as using stock browser or firefox on his device did work.
Then he provided me with a website with whatsapp button that worked perfectly for his browser...

Did some digging and found the culprit in the way jssocials constructs the href for whatsapp (and for all buttons as that is a generic function)

According to whatsapp documentation (https://www.whatsapp.com/faq/nl/android/28000012) the url should be constructed as follows:

<a href="whatsapp://send?text=Hello%20World!">Hello, world!</a>

The way jssocials constructs this url is with target="_blank"

That is when it goes wrong... when omitting the target part from _createShareLink: function(share)
It works okay, but then there is the issue that the buttons (twitter, linkedin, facebook, etc.) do not open in a new window but override the current window.
For twitter, facebook, etc a new browser window should be opened as that is where the action takes place, for whats app a new window should not be opened: clicking the url kicks off the start of the app.

As I am not a JavaScript hero :) I was wondering if the target="_blank" part could be configured / toggled?

Facebook closes

Hi everything is working perfectly except facebook which opens and closes imediatly
Please if you have a way to solve this, please help me out

dynamic share url support

Thanks for great plugin, I have a list of thumbnails and all have the jsSocials attached to them, but I want to make the url of individual thumbnail not the hole page url. Here is my html it has a data-url which i wanted to use as share link.

     <div class="sharing" data-url="http://localhost:8000/post/167">
          <img ... />
     </div>

     <div class="sharing" data-url="http://localhost:8000/post/147">
          <img ... />
     </div>

I have initialise plugin like this

    $(".sharing").jsSocials({
        url : $(this).data('url'),
        showLabel : false,
        shares: ["facebook", "twitter", "pinterest", "googleplus"]
    });

Please help how can I do it.

Updating a pinterest "media" option doesn't refresh the links

Following issue #25 not all options are updated.

"_passOptionToShares" limits the options to Url & Text, whereas it should be unlimited to allow for custom social networks options.

jsSocials share to Pinterest image_url error

http://stackoverflow.com/questions/31212526/jssocials-share-to-pinterest-image-url-error

PopUp not working

http://game2mena.com/oldcss/full-program

please look when load more post it's not working and i also use

<script> $(function() { var url = "http://google.com"; var text = "Some text to share"; $("#shareInPopup").jsSocials({ url: url, text: text, shareIn: "popup", showCount: "inside", shares: ["twitter", "facebook", "googleplus", "linkedin"] }); }); </script>

Twitter not show count (count.json)

Hi, twitter not show count.

Can you help me.
Thank you.

Error: Failed to load resource: the server responded with a status of 404 (Not Found)
/**/jQuery11110980863899923861_1448271148530({"errors":[{"message":"Sorry, that page does not exist","code":34}]});

https://cdn.api.twitter.com/1/urls/count.json?url=urltest&callback=jQuery11110980863899923861_1448271148530&_=1448271148531

Long page loading

Hi

Is it possible to call the countUrl globally (in eg: http://share-counters.rhcloud.com/?url={url}&callback=?) just once and then load getCount to shorten page load?

Uncaught TypeError: $ is not a function

I get this about that :

<script>
        $("#share").jsSocials({
            shares: ["email", "twitter", "facebook", "googleplus", "linkedin", "pinterest", "whatsapp"]
        });
    </script>

Pulling in Data to facebook

When I use your script I can not get the data to display in the popout window for facebook. Here is my code

$(".social-share-block").jsSocials({ url: window.location.href, text: {TEXT HERE}, showCount: false, showLabel: false, shares: [ "email", "twitter", "facebook", "googleplus" ] });

When I use this, the facebook screen just displays the url and nothing else, the twitter popout includes url and text.

Dynamically setting share text and url

How can I dynamically change the share url and text without needing to recreate the widget?

Add the Telegram button

It would be possible to implement by adding the button to share on telegram?
Thank you

getCount for new StumbleUpon

Hi,
I am working on new share: StumbleUpon, I cannot seem to get the share counter right :(

         stumbleupon: {
            label: "StumbleUpon",
            logo: "fa fa-stumbleupon",
            shareUrl: "http://www.stumbleupon.com/submit?url={url}&title={title}",
            countUrl:  "https://www.stumbleupon.com/services/1.01/badge.getinfo?url={url}",
            getCount: function(data) {
                return parseFloat((data.match(/\"views\":([.0-9E]+)/) || [])[1]);
            }

when I do https://www.stumbleupon.com/services/1.01/badge.getinfo?url=https://www.google.com
this is what is returned:

{"result":{"url":"https:\/\/www.google.com\/","in_index":true,"publicid":"1krtS0","views":14834,"title":"Google","thumbnail":"http:\/\/cdn.stumble-upon.com\/mthumb\/647\/5593647.jpg","thumbnail_b":"http:\/\/cdn.stumble-upon.com\/bthumb\/647\/5593647.jpg","submit_link":"http:\/\/www.stumbleupon.com\/badge\/?url=https:\/\/www.google.com\/","badge_link":"http:\/\/www.stumbleupon.com\/badge\/?url=https:\/\/www.google.com\/","info_link":"http:\/\/www.stumbleupon.com\/url\/https%253A\/\/www.google.com\/"},"timestamp":1455201235,"success":true}

What is de function / regex to get the views out of this response?
I'm really lacking Javascript knowledge :(
If I get this working and confirmed by a user I will do a PR for the changes :)

Add new function in shares

hello there!

i am new in doing web programming. Can i know is that anyway to add in new function into the shares. Say, when i click on the facebook button, i want to save something into my database or just simply alert something.

Thanks :)

Adding multiple js-social instances on one page

I'm trying to add js-social multiple times on a page but only one instance shows. Is there a way to display more than one instances?

WhatsApp question(s)

Hi, been trying to get whatsapp as part of one of the buttons and run into the following 'issue'.
the whatsapp url only has 1 parameter: 'text', but sending only text is not usefull when you are sharing a webpage :)

I have the following code in the jssocials.js:

        whatsapp: {
            label: "WhatsApp",
            logo: "fa fa-whatsapp",
            shareUrl: "whatsapp://send?text={text}",
            countUrl: ""
        },

What I want to do is sent the text AND the url, but your script doesn't parse that correctly...
shareUrl: "whatsapp://send?text={text} {url}", > doesn't work > result is "this is my article text {url}"
shareUrl: "whatsapp://send?text={text} ={url}", > doesn't work > result is "this is my article text ={url}"
shareUrl: "whatsapp://send?text={text}&url={url}", > url gets constructed, but whatsapp chokes on it :( > result is "this is my article text&url=https://...."

what I am now doing as a workaround is to construct the text + url in php and parse this to the jssocials script
{ share: "whatsapp", text: "this is my article text https://andthismyurl"},

so the question is, is it possible to parse the url via the jssocials.js script without the "&url="?

question 2: can I do a PR for my changes to the .css and .js files for adding whatsapp?

Updating an option doesn't refresh the links

When I'm updating an option with the so called method, the social links don't get refreshed.

$social.jsSocials("option", "url", newUrl);

The refresh method does refresh the code, but as the new option value is not pushed to the "shares" object, the shared link doesn't get refreshed.

A working option method looks likes this for me.

option: function(key, value) {
    if(arguments.length === 1) {
        return this[key];
    }

    this[key] = value;

    $.each(this.shares, function(idx, share) {
        share[key] = value;
    });

    this.refresh();
}

Comments are welcome.

Get total count

Is there any way to get total count ? :-)

Facebook and Google Plus on IE9

Hi, the counter for facebook and google plus not working in IE9, sorry but I need this.
Can you help me. Thank you.

Google + does not work

Google + does not work, it's response 400. That’s an error.

Update the Font-awesome on demo page

please update the font-awesome version for the demo site.

Twitter count endpoint

As described in the following post, the urls count endpoint is not available anymore since 20th November. So there's no way to show tweets of the url.

https://blog.twitter.com/2015/hard-decisions-for-a-sustainable-platform

Popup instead new page

It is possible to configure popup on click instead of opening in share in new page (tab)?

Thank you in advance

sharing to Facebook doesn't take into account specified text

Following this example, Facebook doesn't set the text of the share dialog to "Google Search Page"

 $("#shareIconsCountInside").jsSocials({
     url: "http://www.google.com",
     text: "Google Search Page",
     showLabel: false,
     showCount: "inside",
     shares: ["twitter", "facebook", "googleplus", "linkedin", "pinterest", "stumbleupon", "whatsapp"]
 });

WhatsApp link generation broken?

First off - love the plugin - this is the first issue I've run across on the newer version.

I've tried the Whatsapp link from a webpage on a desktop in chrome, or on my ipad in safari - neither link works.

In safari I get a popup "Safari cannot open the page because the address is invalid".

If I try the whatsapp link from http://js-socials.com/ - in firefox it errors "The address wasn't understood" and this is in the addressbar whatsapp://send?text=http%3A%2F%2Fjs-socials.com%2F%20Simple%20Social%20Network%20Sharing%20Plugin

Any ideas for a quick patch? Will this even work from a desktop browser?

Thanks!

Facebook Like instead of Share Link

Is the anyway in which the Facebook link can implement a Facebook Like instead of Facebook Share ?

Accessibility

Hi,
I have integrated a little into jssocials, to make it usable for disabled person, especially for blind people and people with motoric disability.
a) I integrated in the definition of the shares in the .js file, a "title" like:

   ... whatsapp: {
           label: "WhatsApp",
           logo: "fa fa-whatsapp",
            shareUrl: "whatsapp://send?text={url} {text}",
            countUrl: "",
            **title**: "WhatsApp"
        }, ...

b) In the html definition I integrated a "tabindex" like:

      ... shares: [{
                 share: "facebook",
                 logo: "images/socials/fb_icon.png",
                 ** tabindex**: 19
              }, ...

c) in the function : _createShareLink: function(share)
I added following changes:

            var shareZiel = getOrApply(share.title, share)
            var $result = $("<a>").addClass(this.shareLinkClass)
                .attr({ href: this._getShareUrl(share), target: "_blank" })
                .attr({ alt: "Button, um Webseite zu teilen über "+shareZiel} )
                .attr({ title: "Button:"+shareZiel} )
                .attr({ tabindex: share.tabindex } )
                .append(this._createShareLogo(share));

Its german text - for the website I used jssocials.
Now, every Button has an "alt" and an "title" text for blind users and can be reached by the given "tabindex" with the keybord by users who have to use the keybord, to reach and click a link.

Thanks for your code tabalinas!!

Use JsSocials theme icons with renderer functions

Hi How do I use JsSocials Theme-icons with the renderer functions?

Adding SVG base 64 support

Hi

First of all thank you very very much for this wonderful and easy to use social sharing plugin. After searching for days I can say this is the best plugin ever.

I did some minor changes to the core files to add base64 svg support for social logos.

In jssocial.js file I changed line 16 to the following:

var IMG_SRC_REGEX = /(\.(jpeg|png|gif|bmp|svg\+xml)$|^data:image\/(jpeg|png|gif|bmp|svg\+xml);base64)/i;

I hope this could help some people who just like me prefer SVG icons to font icons when you only need 1 or 2 of them.