SumoMe Share Alternative Mobile Friendly Floating Social - DevSeries

CCarter

CCarter

Final Boss ®
Moderator
BuSo Pro
Boot Camp
Digital Strategist
Joined
Sep 15, 2014
Messages
4,201
Likes
8,658
Degree
8
Alright the fulfillment of the second special request in the DevSeries from @Krass:

The social share floats in the left-hand of the screen, but when on mobile it will be fixed to the bottom of the screen so it's out of the way. Also you do not have to edit the urls, titles, or description section, it pulls all that information dynamically from javascript/jQuery. So you can plug the css line and js file into wordpress if you want and it will work without you needing to edit anything in the javascript. It works within any CMS or non-CMS. I'm using it on a static CMS at the moment. It's pure plug-in and play.

Also note you will need Font-Awesome for this version to work. Here is the CSS code for the hotlink:

Code: 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

If you guys want a non-font awesome version let me know. I just don't feel like coding a bunch of stuff people won't even bother needing. I'm thinking a css-sprite or png versions of the social icons could work.

I was working off of Burak Ozdemir's jQuery Floating Social Share plugin, but that one didn't auto adjust from sidebar to bottom of the frame when in mobile, so I had to edit the CSS to get that to work.

Afterwards the way the clicks where being done I couldn't click on the links on my iPhone so I just deleted everything in his javascript and rewrote the thing so it appends to the body. Here are some thing to consider: I've got 5 default ones going, Twitter, Facebook, Reddit, Linkedin, and email, Check it out in these screenshots:

Desktop version:

LQXXXLN.jpg


Mobile version:

FS8s6j2.jpg


--

You can have in addition to the 5 options, StumbleUpon, Tumblr, Google Plus, and Pinterest, check it out:

Desktop version:

xivjuPU.jpg


Mobile version:

ZoODD4D.jpg


--

I DO NOT recommend more than 5 though, cause it'll look congested and desparate in my opinion. So select the ones that make sense for YOUR audience. It's as simple as going into the javascript and commenting and uncommenting things out. I like to stick to the 3 big social players, Twitter, FB, Linkedin, and definitely email, but then the wildcard for me is reddit. You may want to remove Linkedin and Reddit and substitute two others I mentioned. Test and make a decision based on YOUR TARGETED audience's usage.

Now in the version I forked, the author does have a "counter" enabled, but I stripped that completely out, so there are no http request going out. I MAY add it later on, and come back with an updated version of this based on feedback and my experience using this. There are working versions all over SERPWoo's blog at the moment, I can't say whether they will stay or not forever, but here is a working example for you folks in the traditional manner of DevSeries - Floating Social Share (mobile friendly).

Here is the raw css code from the file (I've attached a downloadable zip of all this in the end) - goes inside the <head></head> tags in html:
Code: 
*{
   box-sizing: border-box;
}

#floatingShare{
  position: relative;
  text-align: center;
   z-index: 100;
  cursor: pointer;
}

#floatingShare a{
  position: relative;
  width:42px;
  height: 48px;
  cursor: pointer;
}

#floatingShare a,#floatingShare a:focus,#floatingShare a:hover {
  color: #fff;
  cursor: pointer;
}
#floatingShare a,#floatingShare a:visited,#floatingShare a:focus,#floatingShare a:active,#floatingShare a:hover {
  outline: 0 none !important;
   padding-top: 6px;
   pdding-bottom: 6px;
  cursor: pointer;
}

/* icon sizes */
#floatingShare i{
  line-height: inherit;
  font-size: 24px;
  text-align: center;
}

@media (min-width: 769px) {
#floatingShare .top-left{
  position: fixed;
  top: 20%;
  left:0;
}

#floatingShare .top-right{
  position: fixed;
  top: 20%;
  right:0;
}

#floatingShare a{
  display:list-item;
  list-style-type: none;
}

}
@media (max-width: 768px) {
#floatingShare{
   width: 100%;
   height: 48px;
   display: block;
   /* display: none; */
   position: fixed;
   bottom: 0px;
   left: 0px;
}

#floatingShare .top-left, #floatingShare .top-right{
  bottom: 0;
  right:0;
}

#floatingShare a{
  position: relative;
  width: 20%;
   min-width: 20px;
  height: 48px;
  display: inline-block;
}

}

/* facebook */

#floatingShare .facebook{
  background-color: #3b5998;
}

/* twitter */

#floatingShare .twitter{
  background-color: #00aced;
}

/* google plus */

#floatingShare .google{
  background-color: #4CAF50;
}

/* linkedin */

#floatingShare .linkedin{
  background-color: #007bb6;
}

/* envelope */

#floatingShare .mail{
  background-color: #726C6C;
}

/* pinterest */

#floatingShare .pinterest{
  background-color: #c92228;
}

/* reddit */
#floatingShare .reddit{
   background-color: #ff4500;
}

/* stumble upon */

#floatingShare .stumbleupon{
  background-color: #eb4924;
}

/* tumblr */

#floatingShare .tumblr{
  background-color: #36465d;
}

.shareCount{
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  color: #dddddd;
  font-size:  10px;
}

.mtop5{
  margin-top: 5px;
}

--

javascripts/jQuery right BEFORE the closing </body> tag:

Code: 
<script type="text/javascript">
/*!
* jQuery Floating Share v0.0.1 (basically good luck!)
*
* http://www.MoneyOverEthics.com
*
* 2016 CCarter - <@MercenaryCarter>
* forked from https://github.com/ozdemirburak/jquery-floating-social-share
* Released under the MIT license
*/
   $(document).ready(function() {

  title = document.title;
  url = window.location.href;
  final_html = '';
  total_buttons = 0;
  description =  $("meta[name='description']").attr("content");

  //detects mobile
  var isMobile = window.matchMedia("only screen and (max-width: 760px)");

  var networks = {
  "twitter": { className: "twitter", url:"http://twitter.com/share?text={title}&url={url}&via=SERPWoo", url_mobile:"twitter://post?message={url}%20via%20@SERPWoo" },
  "facebook" : { className: "facebook", url:"https://www.facebook.com/sharer/sharer.php?u={url}&t={title}", url_mobile:"https://www.facebook.com/sharer/sharer.php?u={url}&t={title}" },
  "reddit":  { className: "reddit", url: "http://www.reddit.com/submit?url={url}", url_mobile:"http://www.reddit.com/submit?url={url}" },
  "linkedin":  { className: "linkedin", url: "https://www.linkedin.com/shareArticle?mini=true&url={url}&title={title}&description={description}", url_mobile:"https://www.linkedin.com/shareArticle?mini=true&url={url}&title={title}&summary={description}" },
  "envelope":  { className: "mail", url: "mailto:?body={url}&subject={title}", url_mobile:"mailto:?body={url}&subject={title}" },
//  "stumbleupon": { className: "stumbleupon", url: "https://www.stumbleupon.com/submit?url={url}&title={title}", url_mobile: "https://www.stumbleupon.com/submit?url={url}&title={title}" },
//  "tumblr": { className: "tumblr", url: "https://www.tumblr.com/share/link?url={url}&name={title}&description={description}", url_mobile: "https://www.tumblr.com/share/link?url={url}&name={title}&description={description}" },
//  "google-plus": { className: "google", url: "https://plus.google.com/share?url={url}", url_mobile:"https://plus.google.com/share?url={url}" },
//  "pinterest":  { className: "pinterest", url: "https://pinterest.com/pin/create%2Fbutton/?url={url}", url_mobile:"https://pinterest.com/pin/create%2Fbutton/?url={url}" },
  };

$.each( networks, function( k, v ) {

  if (isMobile.matches) {
  var _href = v.url_mobile;
  }else {
  var _href = v.url;

  }

  _href = _href.replace('{url}', url).replace('{title}', title).replace('{description}', description);
  final_html = final_html + "<a href='" + _href + "' class='" + v.className + "' target='_blank'><i class='mtop5 fa fa-" + k + "'></i></a>";

  total_buttons++;
   });

  //alert(total_buttons);
  $("body").append("<div id='floatingShare'><div class='top-left'>" + final_html + "</div></div>");

  //adjusts the width of the mobile version's buttons according to the amount of buttons (default is 20% for 5 buttons = 100%)
  if (isMobile.matches) {
  total_buttons = 100 / total_buttons;
  $('#floatingShare a').css('width', total_buttons + '%');
  }

   });
</script>
<!-- End of require mated - @MercenaryCarter -->

--

Here are direct links for now (I'm away and don't have access to my MOE domain so just download the hotlinks for now, I'll comeback and add a zip file to download later on this week:

1. floating-share.css
2. MOE-Social-Share.js

Recall, you will need jQuery also, so you can use the following hotlinks as well if you are downloading the files above onto your server:

Code: 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

--

2NE0GN6.gif


Anymore requests just let us know.

- CCarter

Edit: I forgot to mention, this does have the capability to use mobile URLs that call the mobile App like twitter and normal URLs. It will detect the mobile or desktop and show the URL accordingly. I only have the "twitter:" one going, but you can play around with it by using this native user social interaction mobile guide.
 
Last edited:
wow, this is awesome! It looks really pretty too. But the plugin I was talking about works a bit differently. It enables any specific image in the post to be shared, and it will link to the original post. It's really good for people who buy traffic to their sites to increase viral activity.

here's a link to how it works and example post:
http://www.appsumo.com/image-sharer/
 
Krass said:
wow, this is awesome! It looks really pretty too. But the plugin I was talking about works a bit differently. It enables any specific image in the post to be shared, and it will link to the original post. It's really good for people who buy traffic to their sites to increase viral activity.

here's a link to how it works and example post:
http://www.appsumo.com/image-sharer/
Click to expand...

A link to to the plugin would have helped cause sumome has this social share plugin as well. I'll look into the image sharing one and see how it works.
 
This is awesome AF, now I can get rid of the shitty plugin I have.

Is there anyway to hide it on pages and only display on posts?
 
CCarter said:
A link to to the plugin would have helped cause sumome has this social share plugin as well. I'll look into the image sharing one and see how it works.
Click to expand...

yeah sorry about that. I forgot to add the link to the specific plugin. But it's really cool for viral type sites where you use tons of images for posts.
 
built said:
Is there anyway to hide it on pages and only display on posts?
Click to expand...
Yeah use the is_single(). If you have a specific template for posts within your theme its best to just do that. Here is a sample code:

Code: 
<?php if ( is_single() ) {
   echo '<script type="text/javascript" src="/js/moe-social-share.js"></script>';
}
?>

Reference: is_singular() and is_single()
 
Krass said:
yeah sorry about that. I forgot to add the link to the specific plugin. But it's really cool for viral type sites where you use tons of images for posts.
Click to expand...

I research it on Twitter - it cannot be done unless the plugin goes through a central location, SumoMe App in this case, since the only way to post an image through twitter intent is with a twitter card, and there is only one image allowed per page. That's why the Twitter and Facebook options require the user to "authorize" SumoMe to post on your timeline with an image.

Screen_Shot_2016_02_10_at_11_12_01_AM.png


You can send users a url to tweet text or urls, but when it comes to images that one needs authorization:

Screen_Shot_2016_02_10_at_10_57_54_AM.png


--

But regarding Pinterest it's extremely easy:

Code: 
https://pinterest.com/pin/create/button/?url=[img]&description=[description]

I might make just a Pinterest version. Honestly though this could be a nice little SAAS for $1-$5 a month with no branding on it for someone that wants to take on SumoMe. It's just the App creation process for Twitter and Facebook that would take about a week or two of coding to get it done, then all the people that don't want to mess with SumoMe or their branding you'll be able to target and generate a nice monthly income from. The Twitter App details are extremely easy too: https://dev.twitter.com/rest/reference/post/statuses/update

Basically this is a semi-serious project since it's not simply less than 100 lines of code to do like the others.
 
wow yeah i've been using the plugin for my site. It was just a random thought when you guys were doing these alternative series. The concept is simple enough, but apparently the implementation is a bit complex. I haven't tracked results yet with these but you can imagine DIY or recipe sites getting insane shares implementing this
 
Krass said:
wow yeah i've been using the plugin for my site. It was just a random thought when you guys were doing these alternative series. The concept is simple enough, but apparently the implementation is a bit complex. I haven't tracked results yet with these but you can imagine DIY or recipe sites getting insane shares implementing this
Click to expand...
Worked well with infographics, I've noticed a big drop in pins since I removed the plugin I had
 
This is happening a lot to me when I'm testing it out. Any ideas on whats causing it?

social_share.jpg
 
That looks like a CSS z-index issue. This has to do with the 3rd spatial dimension on the screen where stuff stacks on top of each other.

What you have to do is establish a base z-index (usually zero, this seems to be what's missing from the OP info), maybe on the main wrapper of the website, or on the body tag even. Then on that floating social bar, you give its wrapper a higher z-index, like 1 or 99 even.

JmlIR65.png


It's used like this:

Code: 
.base {
    z-index: 0;
}

.top {
    z-index: 1;
}

You can create new Classes and add them to HTML tags or you can add the z-index attribute to the existing classes.

If it's not a z-index issue then I just wasted a lot of time :D no ragerts
 
  • Like
Reactions: Nat
@Ryuzaki as always, you are so generous with your time. I've been tinkering with this for several minutes now, haven't gotten it to work and I have a few other things to take care of right now, but I'm going to put some more time into this tomorrow and will update if I fix it... Has no issues showing up on mobile or wide screen, but the middle media sizes seem to be the issue, so I may need to add this to a media request or something.
 
You must log in or register to reply here.
Back