Specifications:
This is branded widget in its kind with addition of Pocket, LinkedIn and Buffer social plug-in. Pocket is an application which allows you to book mark something like a post, website, a special page etc. If a user finds any thing helpful then he easily book mark that page for future concerns. Similarly spreading information among professionals that are in your connection at LinkedIn this plug in gives you all in one package.
Buffer App:
Buffer is an application which allows to automate your content on all social pages. It is very easy and professionals recommend this app. It is also available in Chrome, Firefox extensions. However in order to minify complexity now you use it in social sharing floating bar as a button. Also in this present gadget after its installation your readers will be able to share content using buff. The method of this application is straightforward. Just press the button and it press the whole post with thumbnail and link. After completion post will be share on your connected social profiles.
How to add:
Go to dashboard > select Layout > add a gadget
Select a new widget then copy whole coding from here
<style type=”text/css”>
#tcm-floating-bar {
position:fixed;
bottom:15%;
margin-left:-721px; float:left;
background-color:#ddd; padding:0px 0px 0px 1px; z-index:10;
border-bottom-right-radius:1em;
border-top-right-radius:1em;
border-top:5px solid #E5E5DD;
border-left:5px solid #E5E5DD;
border-bottom:5px solid #E5E5DD;}
.tcm-share {
float:left;
clear:both;
margin:5px 5px 1px 2px;
}
</style>
<div id=’tcm-floating-bar’>
<div class=’tcm-share’ id=’like’ style=’margin-left:7px; margin-bottom:0px’>
<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”;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));</script>
<div class=”fb-like” data-send=”false” data-layout=”box_count” data-width=”40″ data-show-faces=”false”></div>
</div>
<br />
<div class=’tcm-share’ style=’margin-left:3px;’><a class=’twitter-share-button’ data-count=’vertical’
data-via=’technologymake’ expr:data-counturl=’data:blog.url’ href=’http://twitter.com/share’ rel=’nofollow’>Tweet</a>
<script src=’http://platform.twitter.com/widgets.js’; type=’text/javascript’></script>
<br />
<div class=’tcm-share’ id=’linkedin’ style=’margin-left:2px;width:48px’>
<script src=”//platform.linkedin.com/in.js” type=”text/javascript”>
lang: en_US
</script>
<script type=”IN/Share” data-counter=”top”></script>
</div>
<div class=’tcm-share’ id=’buffer’ style=’margin-left:3px;width:48px’>
<a href=”http://bufferapp.com/add” class=”buffer-add-button” data-count=”vertical”>Buffer</a>
<script type=”text/javascript” src=”https://d389zggrogs7qo.cloudfront.net/js/button.js”></script></div>
<div class=’tcm-share’ id=’pocket’ style=’margin-left:3px;width:48px’>
<a data-pocket-label=”pocket” data-pocket-count=”vertical” class=”pocket-btn” data-lang=”en”></a>
<script type=”text/javascript”>!function(d,i){if(!d.getElementById(i))
{var j=d.createElement(“script”);j.id=i;j.src=”https://widgets.getpocket.com/v1/j/btn.js?v=1″;
var w=d.getElementById(i);d.body.appendChild(j);}}(document,”pocket-btn-js”);</script>
</div>
<div class=’tcm-share’ style=’margin-left:3px;’ id=’gplusone’>
<!– Place this tag where you want the share button to render. –>
<div class=”g-plus” data-action=”share” data-annotation=”vertical-bubble” data-height=”60″></div>
<!– Place this tag after the last share tag. –>
<script type=”text/javascript”>
(function() {
var po = document.createElement(‘script’); po.type = ‘text/javascript’; po.async = true;
po.src = ‘https://apis.google.com/js/platform.js’;
var s = document.getElementsByTagName(‘script’)[0]; s.parentNode.insertBefore(po, s);
</div>
<div style=”clear: both;font-size: 9px;text-align:center;”>
<p style=” line-height:0px; font-size:10px; font-weight:bold; text-align:center;”>
<a style=”color:#D3D3D3;” href=”http://www.technologymake.com”>Widgets</a></p></div></div></div></script></div></div></div>
Save the gadget. You are done.
Customization:
The default setting according to blogger non customized templates. However if you are using other templates and social plug in not adjusted properly then change the margin-left:-721px; according to accurate resemblance.
Also if back ground colour of your blog is other then the colour of plug in then you can change it from this background-color:#ddd; highlighted piece of code.
Need help:
In case of don’t tackle or facing any error while adding this social floating bar you may ask us in comment section. We are ready to help you. 🙂
