html 如何在WordPress主题中添加社交媒体共享链接

Posted 2021-05-10

WordPress has a truckload of social media sharing plugins. If you look through the WordPress repository, I’m sure you’d find a plugin you need. And I’m speaking in terms of functionality. Functionality wise all plugins work as expected. They will provide your site visitors a way to share or like content on your site. And yet, despite all this, a client of ours specifically requested to not use any existing plugin, but to integrate the social sharing feature into his theme. We were building his entire theme, so this simple change was fine for us. But do you know why he asked for this? If you’re guessed it’s because social media sharing links affect your page load time, you’re right. They certainly do. This is because of the way these plugins work.

Social Media Sharing Plugins Affect SEO
If your plugin has to display a live count of the number of likes or shares, it has to fetch the data from each social networking site, and display it along with the link. For this it has to make calls using JavaScript, between your site and the social networking sites. Some plugins make this check every time a page is loaded.
Some social media sharing plugins, update the status of the sharing link, if a visitor is already logged in to any of the sites. For example, if a person visiting your site, has already (Facebook) liked a page, and is currently logged into his Facebook account as well, the status of the share button should be ‘You like this’ (or something on similar lines). This again involves an additional check and is time consuming.
All this increases the loading time of each page, and negatively affects your site’s SEO.

 

Social Media Sharing Feature in a Theme
If you’re thinking that having the social media sharing feature in your theme can immediately reverse the effects of using a bad plugin, you’re certainly wrong. The same code placed in a theme or a plugin, would have the same impact. The change should be in the way the social media sharing links behave.

I will be explaining to you, the way this feature will work along with the code. You will need to place the code in your theme’s functions.php. Do note, that you can use the code to create a custom plugin as well.

Social Media Sharing Links in Genesis Theme

Placement of the Icons
For this requirement, I had to place the icons, on every post. Thus the below placed code was part of single.php file of the theme. For those of you, wanting to create your own plugin, you would need to place the below code in your plugin file, on a particular hook.

For the sake of an example, I will explain the display Facebook, twitter, linkedin and Google+ sharing links.

<?php

global $post;

// get the details which have to be shared

// get the url, title, and description (linkedin will display this)

$page_url = get_permalink($post->ID );

$title = $post->post_title;


// the description will be either the post excerpt if present, or part of the post content

$description = wdm_custom_excerpt( $post->post_content, $post->post_excerpt );

?>


// display the sharing icons. I have used Font Awesome Icons

<div class=”wdm_single_post_social”>


// Twitter

<a href=’http://twitter.com/home?status=<?php print(urlencode($title)); ?>+<?php print(urlencode($page_url)); ?>’ target=’_blank’>

<i class=”fa fa-twitter-square”></i>

</a>


// linkedin

<a href=”http://www.linkedin.com/shareArticle?mini=true&url=<?php print(urlencode($page_url)); ?>&title=<?php print(urlencode($title)); ?>&summary=<?php echo $description; ?>&source=<?php bloginfo(‘url’); ?>” target=’_blank’>

<i class=”fa fa-linkedin-square”></i></a>


// Facebook

<a href=’http://www.facebook.com/share.php?u=<?php print(urlencode($page_url)); ?>&title=<?php print(urlencode($title)); ?>’ target=’_blank’>

<i class=”fa fa-facebook-square”></i>

</a>


// Google+

<a href=’https://plus.google.com/share?url=<?php print(urlencode($page_url)); ?>’ target=’_blank’><i class=”fa fa-google-plus”>

</i></a>

</div>

The above codes will add the links, for social networking sites.
But is this enough?
Sharing the Content
(To answer the above question). No. We need to set a few meta tags, to ensure that the needed content is shared. Sites like Facebook or linkedin, display an image along with the shared content. This image is picked up from the content being shared. For example, if your post has a single image, it will be shared along with post. The problem arises when there are multiple images. In this case, you have to set an image as the default image which will be shared. This information has to be set for each post, by inserting meta tags in the header. For example, for Facebook we need to add Open Graph meta tags.

// Add the following in functions.php of your theme or plugin

add_action(‘wp_head’, ‘wdm_add_social_tags’);

function wdm_add_social_tags() {

if (is_single()) {

global $post;

// get the featured image

if(get_the_post_thumbnail($post->ID, ‘thumbnail’)) {

$image = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID),array(600,600));

}

$description = wdm_custom_excerpt( $post->post_content, $post->post_excerpt );

$type = $post->post_type;

if($type == ‘post’) {

// if you want to share post content as an article

$type = ‘article’;

}


// set the meta tags which will be read by Social Media sites

if(!empty($image[0])) {

?>

<meta property=”og:image” content=”<?php echo $image[0]; ?>” />

<meta itemprop=”image” content=”<?php echo $image[0]; ?>”>

<?php

}

?>


<meta property=”og:title” content=”<?php the_title(); ?>” />

<meta itemprop=”name” content=”<?php the_title(); ?>”>

<meta property=”og:type” content=”<?php echo $type; ?>” />

<meta property=”og:url” content=”<?php the_permalink(); ?>” />

<meta property=”og:description” content=”<?php echo $description ?>” />

<meta itemprop=”description” content=”<?php echo $description ?>”>

<meta property=”og:site_name” content=”<?php echo get_bloginfo(‘name’); ?>” />

<?php

}

} 

In the above code, we used a function wdm_custom_excerpt. This function is used to return the post excerpt if present, or to create an excerpt from the post content.

 function wdm_custom_excerpt($content, $excerpt){

$text;

if ($excerpt)

{

$text = $excerpt;

}

else

{

// in case excerpt is not present, trim the post content

$text = wp_trim_words( $content, 55);

$text = strip_shortcodes( $text );

}

$text = strip_tags($text);

$text = str_replace(“\””, “‘”, $text);

return $text;

}
Testing the Content Shared
If you have made the changes till here, and want to test the appearance of the content on the social media sites, there are several tools you can use. Social media sites like Facebook, twitter and Google+ provide their own tools, which you can use to test the shared content.

Facebook Debugger: Just log into your Facebook account, and use this link to check your Open Graph tags for Facebook. You can also test shared content for twitter.
Facebook Debugger

Google Richsnippets: The Richsnippets tool can be used to verify which meta data information Google can access from your post.
Improvement in Performance
By using the social sharing links in this way, I’m certain, your page load time will not be affected. This is because of the following:

Use of Fonts: The use of fonts instead of images, makes this a light weight feature.
No JS Code: Since we are using only static links, there is not JavaScript code involved here.
In addition to this, you can style the icons the way you want. You have more control over the content being shared from your site. And most importantly, sharing remains the same, and does not affect user experience on your site. Needless to say, the client was happy with the provided functionality. What about you? Are you planning on using this on your site? If you have any questions regarding the implementation, you can direct your queries to me, in the comment section below.