l-1

WordPress笔记

主页/WordPress笔记/博客文章/综合文章/如何在 WordPress 中添加社交分享按钮（4 种简单方法）

如何在 WordPress 中添加社交分享按钮（4 种简单方法）

Bug编译狮

Bug编译狮

要在 WordPress 网站上添加社交分享按钮，有多种方式可以实现这一目标。下面我会详细介绍四种常见的方法，并提供相应的示例代码和使用步骤。

方法 1：使用默认的 Share This 插件

步骤：

  1. 登录到您的 WordPress 管理面板。
  2. 导航到“插件” > “安装”。
  3. 搜索并安装名为 “Share This” 的插件。
  4. 安装完成后，激活该插件。
  5. 在站点页面或文章中插入以下代码：
<a href="https://www.facebook.com/sharer/sharer.php?u=YOUR_POST_URL_HERE" target="_blank"><img src="<?php echo get_template_directory_uri(); ?>/assets/images/facebook.png" alt="Facebook"></a>
<a href="https://twitter.com/intent/tweet?url=YOUR_POST_URL_HERE&text=YOUR_POST_TITLE_HERE" target="_blank"><img src="<?php echo get_template_directory_uri(); ?>/assets/images/twitter.png" alt="Twitter"></a>

效果： 这将显示两个社交媒体分享按钮，用户点击后可以分享当前页面的内容到 Facebook 和 Twitter。

方法 2：使用自定义 HTML 标签

步骤：

  1. 打开您的 WordPress 文章编辑器。
  2. 将以下代码粘贴到文章内容区域： 
    <div class="social-share">
   <a href="https://www.facebook.com/sharer/sharer.php?u=<?php the_permalink(); ?>" target="_blank">
       <img src="<?php echo get_template_directory_uri(); ?>/assets/images/facebook.png" alt="Facebook">
   </a>
   <a href="https://twitter.com/intent/tweet?url=<?php the_permalink(); ?>&text=<?php the_title(); ?>" target="_blank">
       <img src="<?php echo get_template_directory_uri(); ?>/assets/images/twitter.png" alt="Twitter">
   </a>
</div>

效果： 这个方法允许您根据页面内容动态生成不同的社交分享链接，使分享更加个性化。

方法 3：使用自定义插件

步骤：

  1. 使用插件管理器搜索并安装“Social Buttons for WordPress”。
  2. 启用该插件。
  3. 配置插件以添加所需的社交媒体平台。
  4. 在页面或文章中添加以下代码来集成这些按钮：
<div id="social-buttons">
    <?php social_buttons( array(
        'facebook' => true,
        'google_plus' => false,
        'linkedin' => false,
        'pinterest' => false,
        'tumblr' => false,
        'twitter' => false,
        'vk' => false,
        'weibo' => false,
        'whatsapp' => false,
        'youtube' => false,
    ) ); ?>
</div>

<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
    var container = document.getElementById("social-buttons");
    new SocialButtons(container);
});
</script>

效果： 此方法提供了更灵活的选择，可以根据需要选择特定的社交媒体平台，而不仅仅是预设的列表。

方法 4：使用 CSS + JavaScript 自定义样式

步骤：

  1. 创建一个自定义的 CSS 文件（例如 custom-social.css），并在主题目录下保存它。
  2. 添加以下 CSS 来美化社交分享按钮：
.social-button {
    display: inline-block;
    margin-right: 10px;
}

.social-button img {
    height: 24px; /* 调整图片大小 */
}
  1. 在文章内容区域插入以下 JavaScript 代码：
(function($) {
    $(function() {
        $(".social-button").click(function(e) {
            e.preventDefault();
            var url = window.location.href;
            if (window.location.protocol == 'http:') {
                url = window.location.href.replace(//$/, '');
            }
            if (url.indexOf('#') !== -1) {
                url = url.substr(0, url.length-1);
            }
            var title = $("#post-title").html();
            if(title == '') { title = 'No Title'; }
            var text = title;
            var a = $('<a/>').attr({
                href: this.href,
                target: '_blank',
                rel: 'nofollow'
            }).text(text).appendTo('body');
            $.get(this.href, {}, function(data){
                $('head').append(a);
            });
        });
    });
})(jQuery);

效果： 通过自定义 CSS 及 JavaScript，您可以为每个社交媒体按钮添加独特的样式和功能，如背景颜色、边距等。

以上就是几种在 WordPress 中添加社交分享按钮的方法。每种方法都有其独特的优势，您可以根据自己的需求和网站设计偏好选择合适的方式。

黑板前的Bug语法讲师

黑板前的Bug语法讲师

1. 添加 Facebook 社交分享按钮

首先，在您的 WordPress 主题或插件中找到并激活“Facebook”插件。安装后，您可以在主题编辑器中的“功能”区域找到它。

接下来，按照以下步骤添加社交分享按钮：

  • 选择图标：在“功能”区域点击“Social Sharing”，然后选择您想要显示的图标。
  • 设置标题和描述：为图标设置一个自定义标题和描述文本，以便用户了解分享的内容。
  • 启用分享链接：勾选“Share Link”以使用户可以访问完整的页面链接来分享此内容。

示例代码：

<!-- 设置分享链接 -->
<script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

    ga('create', 'UA-XXXXX-Y', 'auto');
    ga('send', 'pageview');
</script>

<!-- 分享到Facebook -->
<div class="fb-share-button" data-href="http://example.com/" data-layout="button_count">
    <div class="fb-share-button" data-href="http://example.com/" data-layout="button_count">
    </div>
</div>

2. 添加 Twitter 社交分享按钮

同样，您需要先激活Twitter的社交媒体插件。安装完成后，您可以将Twitter的分享按钮添加到WordPress网站上。

示例代码：

<!-- 添加到WordPress-->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
Date.now(),event:'js'});var f=d.getElementsByTagName(s)[0],
c=f.createElement(s),a=y,w3=location.href;if(!d.getElementById('gtm-w3')){c.onload=function(){y.w3_get_script_tag_w3(this);},this.id='gtm-w3'}
c.src=l+'?id=w3&site='+encodeURIComponent(location.host);if(l.indexOf('twitter.com')>=0) c.title='Tweet';f.parentNode.insertBefore(c,f);
})(window, document, 'script', 'https://www.twitter.com/share.js');</script>

3. 添加 Pinterest 社交分享按钮

要在WordPress网站上添加Pinterest的分享按钮，您需要创建一个包含Pinterest分享链接的插件。安装后，只需将其上传至WordPress主题文件夹下的“functions.php”文件中即可。

示例代码：

add_action( 'wp_head', 'my_pinterest_share_button' );

function my_pinterest_share_button() {
    echo '<!-- Add your own HTML here -->';
}

4. 添加 LinkedIn 社交分享按钮

要实现LinkedIn的分享功能，您需要创建一个包含LinkedIn分享链接的插件。首先，下载并激活LinkedIn的社交媒体插件。之后，将其上传至WordPress主题文件夹下的“functions.php”文件中。

示例代码：

add_filter( 'the_content', 'remove_image_links' );
function remove_image_links( $content ) {
   return preg_replace('/<img[^>]+>/si', '', $content);
}

add_action( 'admin_menu', 'add_linkedin_social_media_plugin' );

function add_linkedin_social_media_plugin() {
    add_submenu_page( 'edit.php?post_type=page', 'LinkedIn', 'LinkedIn', 'manage_options', 'linkedin', 'linkedin_page');
}

以上就是使用WordPress添加社交分享按钮的四个简单方法。希望这些建议对您有所帮助！

最新更新