Slick Social Share Buttons for Blogger

Share Image Slick Social Share Buttons is a Wordpress Plugin which adds floating social media Buttons to your blog. I have dismantled and then re-mantled  it so that it can be easily integrated with Blogger. Like many other side sharing Widgets ,you can add many different types of Share Buttons to it but its main feature is aesthetically pleasing On-click Sliding feature which shows these buttons only when the user wants and hides them when not required. It comes with a lot of customization possibilities which we will discuss through the post. I will be discussing the floating panel version here which is the more commonly used one.


See Demo




Adding the Side Floating Buttons


1. Login to your Blogger account.
2. Go to Design > Page Elements. (For New Blogger Interface Go to Layouts)
3. Click Add A Gadget.
4. In Add A Gadget window, select HTML/Javascript .
5. Copy the code below and paste it inside the content box. (See how to Copy Easily)


<style>
#nav-dcssb, #nav-dcssb li {
margin: 0; 
padding: 0; 
list-style: none;
}
#nav-dcssb {
}
#nav-dcssb li {
padding: 5px;
}
#nav-dcssb li.size-box {
text-align: center;
height: 60px;
}
#nav-dcssb li.size-small {
height: 30px;
}
/* Floater */
.dc-social-float .tab {
cursor: pointer;
height: 44px;
margin-left: -1px;
}
.dc-social-float .dc-social-float-content {
background: #fff;
border: 1px solid #bbb;
padding: 10px;
}
.dc-social-float .dc-social-float-content {
border-radius: 10px; -webkit-border-radius: 10px;
}

/* Slick */
.dc-social-slick .dc-social-slick-content {
padding: 10px;
background: #fff;
border: 1px solid #ccc;
}
.dc-social-slick.vertical .dc-social-slick-content {
width: 78px;
}
.dc-social-slick.horizontal.left #nav-dcssb li.size-small, .dc-social-slick.horizontal.right #nav-dcssb 

li.size-small {
height: 60px;
}

.dc-social-slick.top  {
top: 0;
}
.dc-social-slick.bottom  {
bottom: 0;
}
.dc-social-slick.right  {
right: 0;
}
.dc-social-slick.left {
left: 0;
}
.dc-social-slick.right, .dc-social-slick.left {
padding-top: 2px; 
background: url(images/bg_slick_top.png) repeat-x 0 0;
}

.dc-social-slick.right .dc-social-slick-content {
border-top: none;
border-right: none;
border-radius: 0 0 0 10px; -webkit-border-radius: 0 0 0 10px;
padding: 10px 10px 20px 10px;
}
.dc-social-slick.left .dc-social-slick-content {
border-top: none;
border-left: none;
border-radius: 0 0 10px 0; -webkit-border-radius: 0 0 10px 0;
padding: 10px 10px 20px 10px;
}
.dc-social-slick.left.horizontal .dc-social-slick-content, .dc-social-slick.right.horizontal .dc-social-

slick-content {
border-radius: 0; -webkit-border-radius: 0;
padding: 10px 10px 18px 10px;
}
.dc-social-slick.top.vertical .dc-social-slick-content, .dc-social-slick.bottom.vertical .dc-social-

slick-content {
border-top: none;
border-bottom: none;
}

.dc-social-slick .tab {
cursor: pointer;
}
.dc-social-slick.top .tab, .dc-social-slick.bottom .tab {
height: 46px;
}
.dc-social-slick.left .tab, .dc-social-slick.right .tab {
width: 46px;
}

.dc-social-slick.bottom .tab {
top: 1px;
}
.dc-social-slick.top .tab {
bottom: 1px;
}
.dc-social-slick.align-left .tab {
margin-left: -1px;
}
.dc-social-slick.align-right .tab {
margin-right: -1px;
}

.dc-social-slick.bottom.align-right.horizontal .dc-social-slick-content {
border-radius: 10px 0 0 0; 
-webkit-border-radius: 10px 0 0 0;
}
.dc-social-slick.bottom.align-left.horizontal .dc-social-slick-content {
border-radius: 0 10px 0 0; 
-webkit-border-radius: 0 10px 0 0;
}

.dc-social-slick.top.align-right.horizontal .dc-social-slick-content {
border-radius: 0 0 0 10px; 
-webkit-border-radius: 0 0 0 10px;
}
.dc-social-slick.top.align-left.horizontal .dc-social-slick-content {
border-radius: 0 0 10px 0; 
-webkit-border-radius: 0 0 10px 0;
}

.dc-social-slick.right .tab, .dc-social-slick.left .tab {
margin-top: -2px;
}
.dc-social-slick.right .tab {
left: 1px;
}
.dc-social-slick.left .tab  {
right: 1px;
}

.dc-social-slick.horizontal #nav-dcssb li {
float: left;
}
.clear {clear: both;}
</style>
<script type="text/javascript" src=" 

https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type='text/javascript' 

src='http://stylifyyourblog1.googlecode.com/svn/trunk/easingplusslickfloat.js'></script>


<div id="dc-dcssb">
<ul id="nav-dcssb" >
<li id="dcssb-twitter" class="size-box"><script src="http://tweetmeme.com/i/scripts/button.js" 

type='text/javascript'></script>
</li>
<li id="dcssb-facebook" class="size-box"><a name="fb_share" type="box_count" 

href="http://www.facebook.com/sharer.php">Share</a><script 

src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</li>
<li id="dcssb-plusone" class="size-box"><script type="text/javascript" 

src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="tall"></g:plusone>
</li>
<li id="dcssb-linkedin" class="size-box"><script src="http://platform.linkedin.com/in.js" 

type="text/javascript"></script>
<script type="IN/Share" data-counter="top"></script></li>
<li id="dcssb-stumble" class="size-box">
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
</li>
<li id="dcssb-digg" class="size-box">
<script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script>
<a class="DiggThisButton DiggMedium"></a>
</li>
</ul>
</div>
<script type="text/javascript">
jQuery(window).load(function() {
jQuery('#dc-dcssb').dcSocialFloater({
idWrapper : 'dcssb-float',
width: '98',
location: 'bottom',
align: 'right',
offsetLocation: 50,
offsetAlign: 50,
center: false,
centerPx: 0,
speedContent: 600,
speedFloat: 1000,
tabText: '<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4_KNh4XdKl4TqoO7dHzgnYbh_uwlBmEEwvBUyZ6iAB6eIg5S7OV_5jUBug1TeEPkMF8Ij__wOVo9e_y9X3qQ9WgBpVoNrIiJ4ljgFp4WqzUoyWgOVfltbbXOI0qUPWUuPPlm43N0CcYw/s1600/tab_bottom_floating.png" alt="Share" />',
autoClose: false,
loadOpen: false,
tabClose: true,
classOpen: 'dcssb-open',
classClose: 'dcssb-close',
classToggle: 'dcssb-link'
});
});
</script>


6. Save the gadget.
7. Drag the gadget and reposition it either Right sidebar or Left sidebar (Make it the First Gadget).
8. Click Save button on upper right corner.




Customizing:


1. Alignment & Speed
To change position of the widget , check Line 190-194 with each attribute having the usual meaning. To change the speed check the attribute namely speedContent and speedFloat (Time is in Microseconds).


2. Closed or Open
This widget has a option whether you want these buttons be visible when the page loads or let them remain in the Closed state. To change this option search for "loadOpen" attribute in the code (Line 200) .To let them be visible when the page loads set the option as true .


3. Adding /Removing Buttons
Buttons can be added or deleted easily .To delete any button remove the code in-between the li tags. To add buttons other than those present already just add a li tag with class attribute something like the following code:


<li class="size-box">

----The Button Code----

</li>


4. Making it Appear on Selective Page 
If you want this to appear on only Post pages then you will have to go to Design > Edit HTML (As per new Interface Go to Template > Edit HTML).Tick the "Expand Widget Templates" and Then search for the Title of Gadget (If you have not given any title then give a dummy title like "abcd" and search using CTRF+F for this term) . Now see the following code

<b:widget id='WidgetID' locked='false' title='abcd' type='HTML'>
<b:includable id='main'> 
PUT CONDITIONAL TAG HERE  
  <b:if cond='data:title != &quot;&quot;'> 
    <h2 class='title'><data:title/></h2> 
  </b:if> 
  <div class='widget-content'> 
    <data:content/> 
  </div> 
<b:include name='quickedit'/> 
<b:else/>
<style type='text/css'>
#WidgetID {display:none;}/*to hide empty widget box*/
</style>
</b:if> 
</b:includable> 
</b:widget>


List of conditional tags



Replace the "PUT CONDITIONAL TAG HERE" in the above code with any one of the thing.


1. Index (list) pages

Index pages include homepage, labels page and yearly archive page.
<b:if cond='data:blog.pageType == "index"'>


2. Post (item) page

<b:if cond='data:blog.pageType == "item"'>


3. Static Page

<b:if cond='data:blog.pageType == "static_page"'>


4. Archive page

<b:if cond='data:blog.pageType == "archive"'>


5. Homepage

<b:if cond='data:blog.url == data:blog.homepageUrl'>


6. Specific page/url

<b:if cond='data:blog.url == "PUT_URL_HERE"'>




Now after putting the conditional tag, Preview the code and then Save.


Having problems, feel free to ask


See Demo



Written by Prayag Verma

Find me on Twitter

Email Newsletter

Like what you read here in this post ?
Get new posts delivered straight to your inbox

Post a Comment

Nice tutorial. That's too much of a code for me.

rahul said...

I want your footer!

Unknown said...

Great Tutorial never saw such a descriptive article you really put a lot of efforts to make it possible..
thanks for this ..
and I am really agree with Rahul please let us know about your Footer...

@Vimal Dwivedi
Thanks for the compliments :) ,about the footer,its just a image of triangle which is repeated in the X-direction.Will do a tutorial soon.

Nice. Thanks.

psydex said...

need the exacyly same thing but:
1. NOT scrolling (fixed)
2. opening SIDEWAYS (when clicked)
3. a bit smaller button (32px height)

A URL where you have implemented it.

Hai Prayang... ^_^
how to add facebook like on the widget?
just like your

Add the following code just before the closing of unordered list ( </ul> )

<li id="dcssb-facebook" class="size-box">
<div class="fb-like" data-send="false" data-layout="box_count" data-width="10" data-show-faces="false"></div></li>

I checked your blog, it has AddThis share buttons , so this button will appear without any problem, if it doesn't then also add this script just inside the gadget

<div id='fb-root'></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=280482745302734";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

That's a great tool and gadget to share all the articles directly but what about a open sliding social bookmarking tool must check this out Open Heart Social

Hi Prayag , thanks for the excellent tut.

I have one question, how can I add something like this in the comment section like you have.

"JOIN THE DISCUSSION
Any feedback, questions or ideas are always welcome. In case you are posting Code ,then first escape it and then paste it in the comments"

regards

Just go to Settings > Comments and in the Comment Form Message add the message which will appear above the Comment section

Please ask the questions in the Forum which are unrelated to the Post.

Unknown said...

Hi, i think i followed everything quite correctly, the only problem i have add is that i am not able to get it as a side bar. rather it gets stuck at the point where i put the code in the widget[the right side] i changed the settings but it still is stuck there. any help?

Add the following CSS , it should solve the issue

#dcssb-float {left: 220px !important;}

Unknown said...

sorry i might sound stupid, i added the above line somewhere in the code. but it still is on the right side of the page, even though i changed to left. i am not an expert in all this by any means.
and also its coming at the centre, so when someone clicks on the share button to get the options they cant see 'Twitter' and Facebook badge. help?

Unknown said...

my issue is resolved now. thanks.

mrpbros said...

I'm using weebly, so no any plugin facility available there... So, this is something may work cause weebly has the option to insert java and html within its body tag.... Thank you so much for a great share... I'm going to give a try....

Unknown said...

That's a great tool and gadget to share all the articles directly but what about a open sliding social bookmarking tool must check this out Open Heart Social

olantino said...

nice it cool