12 Nov 2011
Slick Social Share Buttons for Blogger
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="http://3.bp.blogspot.com/-rFEb1cxZA4Y/Tr6w0EiCaeI/AAAAAAAABcU/ujxV1FR4zz4/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 != ""'>
<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
Til next time,
Prayag Verma
at 19:04
