Sabit Açılır Sosyal Kutular

Daha geniş kitlelere ulaşmak isteyen blog yazarları için sosyal medya bulunmaz bir nimet.Bu yüzden çoğumuzun Facebook, Twitter ve Google+ gibi sosyal platformlarda hesabı var.Sosyal medyada takipçi sayımızı arttırdıkça okuyucu kitlemiz genişleyecek ve yazılarımız daha çok kişiye ulaşacaktır.Bu yüzden bloglar için sürekli sosyal medya eklentileri geliştiriliyor.

 

 

Daha önce paylaştığım sabit açılır Facebook beğen kutusunu hatırlıyor musunuz? Bu yazıda, o eklentinin Twitter ve Google+ versiyolarını da paylaşacacğım.Üstelik üçünü aynı anda kullanabileceksiniz.Eklentinin nasıl çalıştığını görmek için videoyu izleyeblirsiniz.

 

 

Eklentiyi blogunuzda kullanmak için aşağıdaki kodları HTML/Javacscript gadget olarak eklemeniz yeterli.

 

<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_GB/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<script src="http://widgets.twimg.com/j/2/widget.js"></script>

<script>
if (typeof (jQuery) == 'undefined') {
    //output the script (load it from google api)
    document.write("<scr" + "ipt type=\"text/javascript\" src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js\"></scr" + "ipt>");
}
</script>
<style type="text/css">
.fblbCenterOuter *, .fblbReset * {
    clear: none;
    margin: 0;
    padding: 0;
    border: 0;  
    font-size: 100%;
    line-height: 18px;
}
.fblbCenterOuter {
    position: fixed;
    top: 0;
    height:100%;
    display:table;
    vertical-align:middle;
    z-index: 10000;
}
.fblbCenterInner {
    position:relative;
    vertical-align:middle;
    display:table-cell;
}
/* Fixed top */
.fblbCenterOuter.fblbFixed {
    position: fixed;
    top: 0;
    height: auto;
    display: block;
    vertical-align: top;
    z-index: 10000;
}
.fblbFixed .fblbCenterInner {
}

.fblbWrap {
    font-family: Arial, Helvetica, sans-serif;
    text-align: left;
    position: relative;
}
.fblbRight .fblbForm {
    /* margin-left: 60px;*/
}
.fblbHead {
    position: absolute;
    z-index: 9999;
    top: 50%;
    display: block;
    text-indent: -9999em;
    overflow: hidden;
    cursor: pointer;
}
.fblbForm {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
.fblbInner {
    min-height:150px;
    position: relative;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.fblbHeader {
    font-size: 12px;
    line-height: 16px;
    font-weight: bold;
    margin-bottom: 15px;
    text-transform: uppercase;
}
/*
.fblbInnerlight {
    background: #fff;
}
.fblbInnerdark {
    background: #333;
}
.fblbTheme0 .fblbForm {
    background: #3b5998;
}
*/
/* Tabs */
.fblbCenterOuterFb.fblbRight .fblbTab7 .fblbHead {
    width: 28px;
    height: 90px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLmJgH3-DVdi9_oqocRWj27otrWkdJ9UQyCFPJUkJWJkEqAZUFfKM-XwVjSnfvTApp_mbrbBOo9-2l6Hz8Grta_fkP_WOvo_ah4Y9C2dhg9Ndb_C5k_-3-_hEkbLZLAkg_FzJkPAH04dsT/s90/fb7-right.png);
}
.fblbCenterOuterTw.fblbRight .fblbTab7 .fblbHead {
    width: 28px;
    height: 90px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCdE3BcYxYHOBwO3cUyFoPpr92aALVvFXFFeCHbURddQ2nB9DhNbj2veBfnFIan1VxKG485ByY644ehOiotPZ5xWxtCvn-uKi0bgFMqjPlbdziKBzvl1HnZWsF1T9reCzeu2ppYTPHvRDv/s90/tw7-right.png);
}
.fblbCenterOuterGp.fblbRight .fblbTab7 .fblbHead {
    width: 28px;
    height: 90px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisopd8jTYzfaM_dcFfRT5MfjnXY5fnWO-KqeF_wnFd7Ib1Htsw6Um8E-Us46gR6dlxtunrAJO0ghXzoW3DELlW7pwSS_Xu2HJn2rEJ4vxZN_tfAyhOlHGuaKIQ99Qg3aJy_eQksVhNAtiH/s90/gp7-right.png);
}
</style>
<script type="text/javascript">
//Setting_begin
var Fb_Url='http://www.facebook.com/bloghocam';
var Tw_Url='bloghocam';
var Gp_Url='https://plus.google.com/108761595756468128383';
var Tab_Style=7;
var Fix_Right=true;
var Fb_En=true;
var Tw_En=true;
var Gp_En=true;

//Setting_end

////Hidden widget to display as plugin
////and pre load media for not delay when user hover other image
document.write('<div class="bitp3pots-achor-hook" style="display:none"></div>');
$('.bitp3pots-achor-hook').parents('.widget').each(function(){
        $(this).children('h2').remove();                   
        $(this).attr('class','bitp3pots-plugin');
        $(this).attr('style','margin:0!important;padding:0!important;width:0!important;height:0!important;');                        
});

 

var Tp_Fb = '<div class="fblbCenterOuter fblbCenterOuterFb fblbFixed '+((Fix_Right) ? 'fblbRight':'fblbLeft')+'" style="margin-top: 50px;  '+((Fix_Right) ? 'right':'left')+': -305px;z-index: 1000;"><div class="fblbCenterInner"><div class="fblbWrap fblbTheme0 fblbTab1 fblbTab'+Tab_Style+'"><div class="fblbForm" style="background: #3b5998; height: 350px; width: 300px; padding: 5px 0 5px 5px";"><h2 class="fblbHead" style="margin-top: -175px; '+((Fix_Right) ? 'right':'left')+': 305px;">Facebook</h2><div class="fblbInner" style="background: #ffffff;"><div class="fb-like-box" data-href="'+Fb_Url+'" data-width="292" data-height="350" data-show-faces="true" data-stream="false" data-header="true"></div></div></div></div></div></div>';

var Tp_Tw = '<div class="fblbCenterOuter fblbCenterOuterTw fblbFixed '+(Fix_Right? 'fblbRight':'fblbLeft')+'" style="margin-top: 250px;  '+((Fix_Right) ? 'right':'left')+': -305px;z-index: 1000;"><div class="fblbCenterInner"><div class="fblbWrap fblbTheme0 fblbTab1 fblbTab'+Tab_Style+'"><div class="fblbForm" style="background: #33ccff; height: 400px; width: 300px; padding: 5px 0 5px 5px";"><h2 class="fblbHead" style="margin-top: -200px; '+((Fix_Right) ? 'right':'left')+': 305px;">Twitter</h2><div class="fblbInner"><script>new TWTR.Widget({version: 2,type: \'profile\',rpp: 3,interval: 30000,width: 300,height: 335,    theme: {shell: {background: \'#33ccff\',color: \'#ffffff\'},tweets: {background: \'#ffffff\',color: \'#000000\',links: \'#47a61e\'}},features: {loop: false,live: false,scrollbar: true,avatars: true,behavior: \'all\'}}).render().setUser(\''+Tw_Url+'\').start();<\/script></div></div></div></div></div>';

var Tp_Gp = '<div class="fblbCenterOuter fblbCenterOuterGp fblbFixed '+(Fix_Right? 'fblbRight':'fblbLeft')+'" style="margin-top: 150px;  '+((Fix_Right) ? 'right':'left')+': -305px;z-index: 1000;"><div class="fblbCenterInner"><div class="fblbWrap fblbTheme0 fblbTab1 fblbTab'+Tab_Style+'"><div class="fblbForm" style="background: #000000; height: 150px; width: 300px; padding: 5px 0 5px 5px";"><h2 class="fblbHead" style="margin-top: -75px; '+((Fix_Right) ? 'right':'left')+': 305px;">Google Plus</h2><div class="fblbInner" style="background: #000000; height: 150px;"><link href="'+Gp_Url+'" rel="publisher" /><script type="text/javascript">window.___gcfg = {lang: \'en-US\'};(function() {var po = document.createElement("script");po.type = "text/javascript"; po.async = true;po.src ="https://apis.google.com/js/plusone.js";var s = document.getElementsByTagName("script")[0];s.parentNode.insertBefore(po, s);})();<\/script><div class="g-plus" data-href="'+Gp_Url+'" data-size="badge"></div><div style="padding: 15px; overflow: auto; height: -16px;"></div></div></div></div></div></div>';

var Tp_Main = ((Fb_En) ? Tp_Fb : '') + ((Tw_En) ? Tp_Tw : '') + ((Gp_En) ? Tp_Gp : '');

 

 

 

document.write(Tp_Main);
</script>

<script type="text/javascript">
<!--
jQuery(document).ready(function(){
var fblbFbOrgRight=jQuery('.fblbCenterOuterFb').css('right');
var fblbFbOrgLeft=jQuery('.fblbCenterOuterFb').css('left');
jQuery('.fblbRight.fblbCenterOuterFb').find('.fblbForm').hover(
  function(){
   jQuery(this).parents('.fblbCenterOuterFb').stop(true,false).animate({
    right: -3
   }, jQuery('.fblbLeft.fblbCenterOuterFb').find('.fblbForm').width());
  },
  function(){
   jQuery(this).parents('.fblbCenterOuterFb').stop(true,false).animate({
    right: fblbFbOrgRight
   }, jQuery('.fblbLeft.fblbCenterOuterFb').find('.fblbForm').width());
});
jQuery('.fblbLeft.fblbCenterOuterFb').find('.fblbForm').hover(
  function(){
   jQuery(this).parents('.fblbCenterOuterFb').stop(true,false).animate({
    left: -3
   }, jQuery('.fblbLeft.fblbCenterOuterFb').find('.fblbForm').width());
  },
  function(){
   jQuery(this).parents('.fblbCenterOuterFb').stop(true,false).animate({
    left: fblbFbOrgLeft
   }, jQuery('.fblbLeft.fblbCenterOuterFb').find('.fblbForm').width());
});
var fblbTwOrgRight=jQuery('.fblbCenterOuterTw').css('right');
var fblbTwOrgLeft=jQuery('.fblbCenterOuterTw').css('left');
jQuery('.fblbRight.fblbCenterOuterTw').find('.fblbForm').hover(
  function(){
   jQuery(this).parents('.fblbCenterOuterTw').stop(true,false).animate({
    right: -3
   }, jQuery('.fblbLeft.fblbCenterOuterTw').find('.fblbForm').width());
  },
  function(){
   jQuery(this).parents('.fblbCenterOuterTw').stop(true,false).animate({
    right: fblbTwOrgRight
   }, jQuery('.fblbLeft.fblbCenterOuterTw').find('.fblbForm').width());
});
jQuery('.fblbLeft.fblbCenterOuterTw').find('.fblbForm').hover(
  function(){
   jQuery(this).parents('.fblbCenterOuterTw').stop(true,false).animate({
    left: -3
   }, jQuery('.fblbLeft.fblbCenterOuterTw').find('.fblbForm').width());
  },
  function(){
   jQuery(this).parents('.fblbCenterOuterTw').stop(true,false).animate({
    left: fblbTwOrgLeft
   }, jQuery('.fblbLeft.fblbCenterOuterTw').find('.fblbForm').width());
});
  
  
var fblbGpOrgRight=jQuery('.fblbCenterOuterGp').css('right');
var fblbGpOrgLeft=jQuery('.fblbCenterOuterGp').css('left');
jQuery('.fblbRight.fblbCenterOuterGp').find('.fblbForm').hover(
  function(){
   jQuery(this).parents('.fblbCenterOuterGp').stop(true,false).animate({
    right: -3
   }, jQuery('.fblbLeft.fblbCenterOuterGp').find('.fblbForm').width());
  },
  function(){
   jQuery(this).parents('.fblbCenterOuterGp').stop(true,false).animate({
    right: fblbGpOrgRight
   }, jQuery('.fblbLeft.fblbCenterOuterGp').find('.fblbForm').width());
});
jQuery('.fblbLeft.fblbCenterOuterGp').find('.fblbForm').hover(
  function(){
   jQuery(this).parents('.fblbCenterOuterGp').stop(true,false).animate({
    left: -3
   }, jQuery('.fblbLeft.fblbCenterOuterGp').find('.fblbForm').width());
  },
  function(){
   jQuery(this).parents('.fblbCenterOuterGp').stop(true,false).animate({
    left: fblbGpOrgLeft
   }, jQuery('.fblbLeft.fblbCenterOuterGp').find('.fblbForm').width());
});
  
// ===================
jQuery('.fblbCenterOuter').find('.fblbForm').hover(
  function(){
   //jQuery('.fblbCenterOuter').not(jQuery(this).parents('.fblbCenterOuter')).hide();
   jQuery('.fblbCenterOuter').not(jQuery(this).parents('.fblbCenterOuter')).css('z-index', parseInt(jQuery('.fblbCenterOuter').not(jQuery(this).parents('.fblbCenterOuter')).css('z-index'))-100);
  },
  function(){
   //jQuery('.fblbCenterOuter').not(jQuery(this).parents('.fblbCenterOuter')).show();
   jQuery('.fblbCenterOuter').not(jQuery(this).parents('.fblbCenterOuter')).css('z-index', parseInt(jQuery('.fblbCenterOuter').not(jQuery(this).parents('.fblbCenterOuter')).css('z-index'))+100);
});
});
-->
</script>

 

Değiştirmeniz gereken yerler şunlar:

• var Fb_Url='http://www.facebook.com/bloghocam'; (Facebook sayfanızın adresini yazın)
• var Tw_Url='bloghocam'; (Twitter kullanıcı adınızı yazın)
• var Gp_Url='https://plus.google.com/108761595756468128383'; (Google+ adresinizi yazın)