首页、存档和搜索页面上的Facebook赞、推文和Google+1循环中的按钮以及缺少的Facebook赞按钮

时间:2011-11-15 作者:Ben

有没有办法在主页、搜索和归档页面上的每篇帖子的循环中添加社交媒体按钮,尤其是像facebook、推特和google+1这样的按钮,而不需要大量的脚本下载?

在略微相切的地方,但不是很多,我似乎在循环中的一半帖子上缺少了类似facebook的按钮。每个页面的facebook按钮数量是否有限制?

你可以在这里查看我的代码-www.pixelsandtea.com

1 个回复
SO网友:Chris_O

有两种方法可以做到这一点。第一种方法是创建一个输出按钮的函数,然后将其包含在模板中。第二种方法是在the_contentthe_excerpt 或者两者都可以,具体取决于按钮的显示位置。

在这两种情况下,您需要做的第一件事是将脚本调用与呈现按钮的代码分离,然后通过挂接wp_footer 或手动将代码放入footer.php.

此示例使用Facebook html5 xfbml javascript sdk和Google async方法以及Linkedin共享按钮和Twitter推特按钮。

将javascript添加到页脚

add_action( \'wp_footer\', \'prefix_social_media_scripts\' );
    function prefix_social_media_scripts() { 
            echo \'<script src="http://platform.twitter.com/widgets.js"></script>\';
            echo \'<script src="http://platform.linkedin.com/in.js" type="text/javascript"></script>\';
            echo \'<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\\\'));

                    (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>\';        
    }
渲染按钮的函数
function prefix_social_media() {
        $post_url = get_permalink();
        $title = get_the_title ();
        echo \'<ul id="share-buttons">\';
        echo \'<li class="facebook"><div class="fb-like" data-href="\' . $post_url . \'" data-send="false" data-layout="button_count" data-width="66" data-show-faces="false"></div></li>\';
        echo \'<li class="twitter"><a href="http://twitter.com/share" class="twitter-share-button" data-url="\' . $post_url . \'" data-count="none">Tweet</a></li>\';
        echo \'<li class="google"><div class="g-plusone" data-size="medium" data-href="\'.$post_url.\'"></div></li>\';
        echo \'<li class="linkedin"><script type="IN/Share" data-url="\'. $post_url .\'" data-counter="right"></script></li>\';
        echo \'</ul>\';
在之前添加要显示的过滤器the_excerpt.
function prefix_social_media_filters( $content ) {
    $buttons = prefix_social_media();
    $content = $buttons . $content;
    return $content;
}

add_filter( \'the_excerpt\', \'prefix_social_media_filters\' );
将函数添加到模板中
if (have_posts()) : while (have_posts()) : the_post(); 

         prefix_social_media(); 

      // rest of your loop

结束

相关推荐

Facebook Twitter上的分享按钮,就像WordPress.com没有网络服务一样

我正在写一个从wordpress迁移过来的博客。com,它现在是自托管的。我根据他们的CSS定制创建了一个主题,一切正常。我正在寻找添加Facebook和Twitter按钮,到帖子的结尾和首页帖子的结尾。基本上与wordpress的方式相同。com。我发现了很多可怕的共享插件。这似乎要么是丑陋的黑客行为,要么是通过JavaScript提供的大量web服务。我想要简单的Facebook和twitter共享按钮;不是整个网络上的所有服务;不会因第三方web服务而膨胀。离wordpress越近。com更好,一个