关于我
 

xjpvictor's Blog
小老鼠,上灯台,两只耳朵竖起来

wordpress twitter widget


各种折腾·scripttwitterwebwordpress

本文发表于超过180天以前,部分内容可能已经失效

blog上放了个twitter widget显示tweets,原本用的是twitter官方那个,但是因为你懂的,在国内打开的时候就显示不出来了,所以想先把tweets下载到服务器上,然后从blog只从服务器上的文件读取tweets。

首先,根据这个网页上所说的,在服务器上建立一个twitter.php文件,内容如下

<?php
$twitterRssFeedUrl =  "http://twitter.com/statuses/user_timeline/xxxxxxxx.rss";
$twitterUsername = "xxx";
$amountToShow = 5;
$twitterPosts = false;
$xml = @simplexml_load_file($twitterRssFeedUrl);
if(is_object($xml)){
    foreach($xml->channel->item as $twit){
        if(is_array($twitterPosts) && count($twitterPosts)==$amountToShow){
            break;
        }
        $description = stripslashes(htmlentities($twit->description,ENT_QUOTES,'UTF-8'));
        if(strtolower(substr($description,0,strlen($twitterUsername))) == strtolower($twitterUsername)){
            $description = substr($description,strlen($twitterUsername)+1);
        }
        $d['description'] = $description;
        $twitterPosts[]=$d;
    }
}else{
    die('cannot connect to twitter feed');
}
if(is_array($twitterPosts)){
    echo 'document.write("';
    foreach($twitterPosts as $post){
        echo '<span>'.$post['description'].'</span>';
    }
    echo '")';
}else{
    echo '<span>No Twitter posts have been made</span>';
}
?>

用twitter的ID number换掉twitterRSSFeedUrl中的xxxxxxxx,ID number可以在这个网站查询,然后用twitter的username换点twitterUsername中的xxx,amountToShow是设置显示多少条。twitter需要设置public,然后twitter.php文件权限要设对。

然后就可以用js读取twitter.php的内容,然后滚动显示了。代码根据这个网页,在想要放widget的地方放

<style type="text/css">
#scroll {width:100%;height:78px;overflow:hidden;}
#scroll span {height:71px;overflow:hidden;display:block;font-size:13px;padding:3px 0 3px 0;border-top:dotted 1px #ccc;}
</style>
<div id="scroll">
<script language="javascript" src="/path_to/twitter.php"></script>
</div>
<script type="text/javascript">
function scrollShow(obj, count, ht, delay)   
{   
    var end = (count * 2 - 1) * ht;   
    var offset = 0;   
    var stop = false;   
    obj.innerHTML = obj.innerHTML + obj.innerHTML + obj.innerHTML;   
    obj.onmouseover = function(){stop = true};   
    obj.onmouseout = function(){stop = false};   
    function scrollStart()   
    {   
        if(!stop)   
        {   
            if (offset >= end)   
            {   
                obj.scrollTop = offset = (count - 1) * ht;   
            }   
            obj.scrollTop = offset;   
            offset ++;   
        }   
        if (offset % ht == 0)   
        {   
            setTimeout(scrollStart, delay);   
            return false;   
        }   
        setTimeout(scrollStart, 5);   
    }   
    setTimeout(scrollStart, delay);   
}
scrollShow(document.getElementById('scroll'), 5, 78, 3000);
</script>

这样就能让tweets滚动显示了。修改scrollShow中的参数可以设置显示的条数,需要和twitter.php中一致,也可以设置滚动的延时,单位是毫秒。

需要注意的是不能直接在wordpress中调用twitter.php,需要用js包一层,因为如果用了cache之类的插件会生成静态的html文件,tweets就无法更新了,而用js调用twitter.php就可以在每次打开网页的时候读取最新的tweets。另外#scroll的高度要和#scroll span的高度一致,如果#scroll span用了css加border和padding之类的就要减去这些高度,而在scrollShow中的高度也必须和#scroll一致。如果要同时显示多条tweets,就要修改#scroll span的高度,比如显示两条,就是#scroll的高度除以2,同样scrollShow中也要修改。而修改setTimeout(scrollStart, 5)中的5就能更改滚动速度,数字越大滚的越慢。

本文 "wordpress twitter widget" 由 K. Huang 首先发表于 xjpvictor's Blog 并以 CC BY-NC 4.0 许可证发布 © 2012
转载注明引用来源 https://blog.xjpvictor.info/2012/02/wordpress-twitter-widget/

赞助我

评论

你的邮箱地址不会被公开。必填项以 * 标出

无意义或不相关评论将被删除

取消 上传图片 或拖拽上传

* Some files will not be uploaded. Only png, gif, jpg are allowed and maximum 10 images, each file less than 10M.

你可以添加 10 个 png/gif/jpg 图片 (每个文件小于 10M)

允许使用以下html标签:<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

你可以上传文件,粘贴代码或长文至 Drop.it.r

更多相似文章