Jiathis的使用

Jiathis的使用

9月 05, 2017     liumwei

国内社会化分享工具比较出名的有Jiathis、Bshare和Passit。本篇主要讨论Drupal下的Jiathis使用和优化。

1. 安装jiathis

drush dl jiathis -y && drush en jiathis -y

2. 基本设置

进入Drupal后台admin/config/services/jiathis,配置jiathis显示方式:

JiaThis Share Button block(采用区块固定显示Jiathis按钮):

先进入admin/config/services/jiathis/block,进行Jiathis按钮外观设置:

随后进入区块配置(admin/structure/block),找到Jia this对应的区块。然后设置,使其在指定页面的某个区域固定显示出来即可。

JiaThis Share Button page(为每个页面生成Jiathis按钮,admin/config/services/jiathis/page):

注意:要想其在相应Node页面显示,需要在Display the button on these content types和Display the button in these view modes中进行正确的勾选。

3. 权限设置

进入权限设置(admin/people/permissions),使其对应的用户可见:

4. 优化显示和配置

经过上面的设置,可以看到Jiathis在相应的页面出现了。但是似乎,还不够,能不能配置指定某些按钮优先显示呢?当然可以,不过,此时可能需要修改相应的代码(sites/all/modules/jiathis/jiathis.module)了。

找到如下的代码行:

  if ($size == 4) {
    $b = '<div class="jiathis_style">
            <span class="jiathis_txt">分享到:</span>
            <a class="jiathis_button_icons_1"></a>
            <a class="jiathis_button_icons_2"></a>
            <a class="jiathis_button_icons_3"></a>
            <a class="jiathis_button_icons_4"></a>
            <a href="http://www.jiathis.com/share" class="jiathis jiathis_txt jtico jtico_jiathis" target="_blank"></a>';
  } elseif ($size == 3) { //small icon
    $b = '<div class="jiathis_style">
            <a class="jiathis_button_qzone"></a>
            <a class="jiathis_button_tsina"></a>
            <a class="jiathis_button_tqq"></a>
            <a class="jiathis_button_renren"></a>
            <a class="jiathis_button_kaixin001"></a>
            <a href="http://www.jiathis.com/share" class="jiathis jiathis_txt jtico jtico_jiathis" target="_blank"></a>';
  } elseif ($size == 2) { //medium icon
    $b = '<div class="jiathis_style_24x24">
            <a class="jiathis_button_qzone"></a>
            <a class="jiathis_button_tsina"></a>
            <a class="jiathis_button_tqq"></a>
            <a class="jiathis_button_renren"></a>
            <a class="jiathis_button_kaixin001"></a>
            <a href="http://www.jiathis.com/share" class="jiathis jiathis_txt jtico jtico_jiathis" target="_blank"></a>';
  } else { //large icon && default
    $b = '<div class="jiathis_style_32x32">
            <a class="jiathis_button_qzone"></a>
            <a class="jiathis_button_tsina"></a>
            <a class="jiathis_button_tqq"></a>
            <a class="jiathis_button_renren"></a>
            <a class="jiathis_button_kaixin001"></a>
            <a href="http://www.jiathis.com/share" class="jiathis jiathis_txt jtico jtico_jiathis" target="_blank"></a>';
  }

  return $items;
}

可以看见,如上的代码所在位置,定义了默认优先显示的分享按钮。可如下进行修改:

  if ($size == 4) {
    $b = '<div class="jiathis_style">
            <span class="jiathis_txt">分享到:</span>
            <a class="jiathis_button_icons_1"></a>
            <a class="jiathis_button_icons_2"></a>
            <a class="jiathis_button_icons_3"></a>
            <a class="jiathis_button_icons_4"></a>
            <a href="http://www.jiathis.com/share" class="jiathis jiathis_txt jtico jtico_jiathis" target="_blank"></a>';
  } elseif ($size == 3) { //small icon
    $b = '<div class="jiathis_style">
           <a class="jiathis_button_weixin">微信</a>
            <a class="jiathis_button_cqq">QQ</a>
            <a class="jiathis_button_tsina">新浪</a>
            <a class="jiathis_button_twitter">推特</a>
            <a class="jiathis_button_fb">脸书</a>
            <a class="jiathis_button_googleplus">谷歌+</a>
            <a class="jiathis_button_tqq">腾讯微博</a>
            <a href="http://www.jiathis.com/share" class="jiathis jiathis_txt jtico jtico_jiathis" target="_blank"></a>';
  } elseif ($size == 2) { //medium icon
    $b = '<div class="jiathis_style_24x24">
            <a class="jiathis_button_weixin">微信</a>
            <a class="jiathis_button_cqq">QQ</a>
            <a class="jiathis_button_tsina">新浪</a>
            <a class="jiathis_button_twitter">推特</a>
            <a class="jiathis_button_fb">脸书</a>
            <a class="jiathis_button_googleplus">谷歌+</a>
            <a class="jiathis_button_tqq">腾讯微博</a>
            <a href="http://www.jiathis.com/share" class="jiathis jiathis_txt jtico jtico_jiathis" target="_blank"></a>';
  } else { //large icon && default
    $b = '<div class="jiathis_style_32x32">

            <a href="http://www.jiathis.com/share" class="jiathis jiathis_txt jtico jtico_jiathis" target="_blank"></a>';
  }

  return array($count,$b,$iconstyle);
}

保存修改的jiathis.module,在刷新node页面,优化的效果出来了。如下的图片显示

 

说明:上面的代码仅仅修改了很小一部分。例如  <a class="jiathis_button_googleplus">谷歌+</a> 该代码,仅仅添加了Google+的按钮类:class="jiathis_button_googleplus,在具体的修改中,完全可以进行根据自己的喜好来进行调整。按钮类,其实http://v3.jiathis.com/code/css/jiathis_share.css有定义,如下:

#jiathis_style_32x32 .jtico_tsina{background-position:0px 0px}
#jiathis_style_32x32 .jtico_qzone{background-position:0px -32px}
#jiathis_style_32x32 .jtico_renren{background-position:0px -64px}
#jiathis_style_32x32 .jtico_gmail{background-position:0px -96px}
#jiathis_style_32x32 .jtico_fav{background-position:0px -128px}
#jiathis_style_32x32 .jtico_tieba{background-position:0px -160px}
#jiathis_style_32x32 .jtico_kaixin001{background-position:0px -192px}
#jiathis_style_32x32 .jtico_douban{background-position:0px -224px}
#jiathis_style_32x32 .jtico_hi{background-position:0px -256px}
#jiathis_style_32x32 .jtico_qingbiji{background-position:0px -288px}
#jiathis_style_32x32 .jtico_t163{background-position:0px -320px}
......