wordpress如何实现长微博发送功能

不知你是否留意到,现在很多内容网站除了在文章下方放有很多社交分享按钮,还额外增加了一个新的分享功能——长微博发送。比如:数字尾巴、36氪、爱范儿等等网站,读者可以通过点击文章下方的“长微博发送”按钮直接将文章生成为一张图片,然后分享到各大社交平台,是不是觉得很方便呢?

现在讨论一下这个“长微博发送”功能的实现原理。

首先应该是处理每篇文章的JSON格式,供长微博生成工具调用。JSON数据里应包含有标题、发布时间、图片和文章内容之类的信息,然后进行排版,再用canvas截图生成图片,然后通过各大社交平台分享就不用说了。

本文只提供wordpress实现长微博发送功能的实现方法。

首先使用txt2img这个插件(后台搜索插件下载并安装),由于这个插件是用php文字转图片的方法实现长微博功能的,后台由管理员手动生成长微博图片,然后前台ajax调用分享。

编辑single.php,添加发送长微博的按钮,推荐放在后面,代码如下:

<div><a href="#" target="_blank">发送长微博</a></div>

JS代码:

$(function() {
    var aurl = $("#aurl").attr("href");
    var lwb = "你的插件图片文件夹路径/p-<?php echo $post->ID?>.png";
    var nolwb = "<?php bloginfo('stylesheet_directory'); ?>/img/nopic.png";
    $(document).on("click", ".cwb-close",
    function() {
        $(this).parent().removeClass("fuckup").addClass("fuckdown");
    });
    $(".cwb").click(function() {
        var ithis = $(this);
        $.ajax({
            url: lwb,
            dataType: "html",
            success: function() {
                var wb = "http://v.t.sina.com.cn/share/share.php?url=<?php the_permalink(); ?>&ralateUid=&appkey=3080107913&title=<?php the_title();?>&pic=" + lwb;
                var qq = "http://v.t.qq.com/share/share.php?url=<?php the_permalink(); ?>&title=<?php the_title();?>&appkey=&pic=" + lwb;
                $("body").append('<div id="cwb-box"><div></div><div><img src="' + lwb + '" /></div><div><div><a href="' + qq + '" target="_blank">腾讯微博</a><a href="' + wb + '"class="btn-wb target="_blank">新浪微博</a></div></div></div>');
            },
            error: function() {
                $("body").append('<div id="cwb-box"><div lass="cwb-close"></div><div><img src="' + nolwb + '" /></div><div><div>此功能开发中,谢谢关注。</div></div></div>');
            }
        });
        return false;
    });
});

css样式:

.sendwb{text-align:center;margin-bottom:10px}
.cwb{display:inline-block;*display:inline;*zoom:1;padding:4px 12px;margin-bottom:0;font-size:14px;line-height:20px;text-align:center;vertical-align:middle;cursor:pointer;color:#333;text-shadow:0 1px 1px rgba(255,255,255,.75);background-color:#f5f5f5;background-image:-moz-linear-gradient(top,#fff,#e6e6e6);background-image:-webkit-gradient(linear,0 0,0 100%,from(#fff),to(#e6e6e6));background-image:-webkit-linear-gradient(top,#fff,#e6e6e6);background-image:linear-gradient(to bottom,#fff,#e6e6e6);background-repeat:repeat-x;border-color:rgba(0,0,0,.1)rgba(0,0,0,.1)rgba(0,0,0,.25);border:1px solid #ccc;border-bottom-color:#b3b3b3;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(0,0,0,.05)}
.cwb:hover{background-color:#e6e6e6;*background-color:#d9d9d9}
.cwb-close{position:absolute;width:18px;height:18px;right:-15px;top:-15px;z-index:9;cursor:pointer;background:#000;border-radius:18px;background:url(img/close.png) 0 0 no-repeat\9;border:3px #fff solid;box-shadow:0 0 3px}
.cwb-player{height:514px}
.cwb-close:hover{background-color:#474747}
.cwb-close:before,.cwb-close:after{position:absolute;width:10px;height:2px;background:#fff;content:"";left:4px;top:8px;display:none\9}
.cwb-close:before{-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}
.cwb-close:after{-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg)}
.fuckup{-webkit-animation:bounceInDown 1s .2s ease both;-moz-animation:bounceInDown 1s .2s ease both}
.fuckdown{-webkit-animation:bounceOutDown 1s .2s ease both;-moz-animation:bounceOutDown 1s .2s ease both;display:none\9}
@-webkit-keyframes bounceOutDown{0%{-webkit-transform:translateY(0)}
20%{opacity:1;-webkit-transform:translateY(-20px)}
100%{opacity:0;-webkit-transform:translateY(2000px)}
}@-moz-keyframes bounceOutDown{0%{-moz-transform:translateY(0)}
20%{opacity:1;-moz-transform:translateY(-20px)}
100%{opacity:0;-moz-transform:translateY(2000px)}
}#cwb-box{padding:10px;background:#FFFFFF;box-shadow:0 0 15px;left:50%;margin-left:-250px;margin-top:-200px;position:fixed;top:50%;width:430px}
.cwb-success{height:300px;overflow-x:hidden;overflow-y:auto}
.sharebox-bot{background:none repeat scroll 0 0 #F2F2F2;height:60px;overflow:hidden}
.sharebox-bcon{color:#999999;font-size:12px;line-height:60px;text-align:center}
a.btn-wb,a.btn-qq{background:none repeat scroll 0 0 #D14836;color:#FFFFFF !important;margin:0 5px;padding:5px 15px}
@-webkit-keyframes bounceInDown{0%{opacity:0;-webkit-transform:translateY(-2000px)}
40%{opacity:1;-webkit-transform:translateY(30px)}
70%{-webkit-transform:translateY(-10px)}
100%{-webkit-transform:translateY(0)}
}@-moz-keyframes bounceInDown{0%{opacity:0;-moz-transform:translateY(-2000px)}
40%{opacity:1;-moz-transform:translateY(30px)}
70%{-moz-transform:translateY(-10px)}
100%{-moz-transform:translateY(0)}
}

添加图片,如果你不想加入图片这一步可以直接略过了,替换插件的txt2img_generater.php即可,关键地方插件的原作者已经注释,图片放在插件的img文件夹下。最好宽点,因为长微博图片的宽度不是固定的。

<?php
$font = "w.ttf";//字体文件
$pid = $_POST['txt2img_pid'];
$copy = imagecreatefrompng('http://' . $_SERVER['HTTP_HOST'] . dirname($_SERVER['REQUEST_URI']) . '/img/up.png');//顶部图片500x139
$footer = imagecreatefrompng('http://' . $_SERVER['HTTP_HOST'] . dirname($_SERVER['REQUEST_URI']) . '/img/footer.png');//底部图片500x72
$content = $_POST['txt2img_content'];
$input = str_replace("\r", "", stripcslashes($content)) . "\n\n\n \n \n";
$title = explode("\n\n", $input, 2);
$ary = imagettfbbox (12, 0, $font, $input);
$width = abs($ary[2] - $ary[0]) + 40;
$height = abs($ary[1] - $ary[7]) + 40;
$img = @imagecreatetruecolor($width, $height + 72);
$bgcolor = imagecolorallocate($img, '255', '255', '255');
imagefill($img, 0, 0, $bgcolor);
$bdcolor = imagecolorallocate($img, '230', '230', '230');
$color = imagecolorallocate($img, '0', '0', '0');
imagecopy($img, $copy , 0, 0, 0, 0, $width, 139);
imagettftext($img, 12, 0, 20, 180, $color, $font, $title[1]);
imagettftext($img, 14, 0, 20, 100, $color, $font, $title[0]);
imagecopy($img, $footer , 0, $height, 0, 0, $width, 72);

if(defined('SAE_TMP_PATH')) {
  //SAE is not able to write local file.
  $file = "p-" . $pid . ".png";
  $s = new SaeStorage();
  ob_start();
  imagepng($img);
  $imgstr = ob_get_contents();
  $s->write('upload',$file,$imgstr);
  ob_end_clean(); 
  imagedestroy($img);
  echo $s->getUrl( 'upload' , $file );
} else {
  $file = "img/p-" . $pid . ".png";
  imagepng($img, $file);
  imagedestroy($img);
  imagedestroy($copy);
  imagedestroy($footer);
  echo 'http://' . $_SERVER['HTTP_HOST'] . dirname($_SERVER['REQUEST_URI']) . '/' . $file;
}
?>
 
目前共有18条评论
你目前的身份是游客,评论请输入昵称和电邮!

  1. 很棒的代码 虽然看不懂
    龙华网站建设 2014.06.26 18:09 @
  2. 这个有什么用呀
    肉肉谜团 2014.06.23 22:07 @
  3. 没想到网站也能实现这个功能啊,挺牛的。
    梦轩丽人 2014.06.19 8:09 @
  4. 渐渐没了折腾的心了。。。是不是又变懒了o(&gt;﹏&lt;)o
    汐枫 2014.06.17 22:32 @
  5. 不是吧、早些天我就想找个教程弄这个长微博、之前看的爱范儿那样,感觉不错,搜到个插件,结果说要自己弄图一大堆的,就没弄了...
    郭爱兵 2014.06.14 8:28 @
  6. 嘿嘿,技术控啊
    Joe 2014.06.10 21:12 @
  7. 看上去还是很不错,确实很方便快捷。
    香港虚拟主机 2014.06.9 16:17 @
  8. 代码换个颜色好点。 —— 来自blog.clmao.com黄金版吐槽机
    小猫 2014.06.9 11:02 @
  • 暂无Trackback