1. Introduction

The Facebook social network founded by Mark Zuckerberg is famous in the world with billions of users. People meet each other to exchange and share everything like videos, photos, news, … So Facebook is also a very good channel to increase traffic for the website.

To facilitate the sharing of article links on facebook. You should integrate the share facebook button into the website for people to easily share the link. This article will give you the facebook sharing code to insert into your website.

This is the facebook logo svg file code, you can customize the display logo size

<svg style="width: 1em;height: 1em; margin-right: 0.4em;" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 20">
     <path d="M18.77 7.46H14.5v-1.9c0-.9.6-1.1 1-1.1h3V.5h-4.33C10.24.5 9.5 3.44 9.5 5.32v2.15h-3v4h3v12h5v-12h3.85l.42-4z" fill="#fff"/>
     </svg>

3. Code to share facebook does not use javascript

This is the code to share facebook social networks without using javascript so your page is not affected by the speed.

<!--Facebook-->
<a href="https://www.facebook.com/sharer/sharer.php?u=https://tipstechvn.com/" alt="Facebook" title="Facebook" target="_blank" rel="noopener" aria-label="Facebook">
 <div style="border-radius: 999px;background-color: #3b5998;color: #fff;padding: 0.5em 0.75em;display: inline-block;
  ">
   <div style="display: inline-block;">
     <svg style="width: 1em;height: 1em; margin-right: 0.4em;" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 20">
     <path d="M18.77 7.46H14.5v-1.9c0-.9.6-1.1 1-1.1h3V.5h-4.33C10.24.5 9.5 3.44 9.5 5.32v2.15h-3v4h3v12h5v-12h3.85l.42-4z" fill="#fff"/>
     </svg>
 </div>Facebook
</div>
</a>

4. Insert share facebook button into wordpress

To add the facebook share button at the end of a wordpress post, add the following code to the function.php file of the current topic.

add_filter( 'the_content', 'share_social', 20 );
function share_social( $content ) {
 $facebook ='<!--Facebook-->
<a href="https://www.facebook.com/sharer/sharer.php?u='.get_permalink().'&title='.get_the_title().'" alt="Facebook" title="Facebook" target="_blank" rel="noopener" aria-label="Facebook">
 <div style="width:auto;border-radius: 5px;background-color: #3b5998;color: #fff;padding: 0.5em 0.75em;display: inline-block;margin-bottom:5px;
  ">
   <div style="display: inline-block;">
     <svg style="width: auto;height: 1em; margin-right: 0.4em;" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 20">
     <path d="M18.77 7.46H14.5v-1.9c0-.9.6-1.1 1-1.1h3V.5h-4.33C10.24.5 9.5 3.44 9.5 5.32v2.15h-3v4h3v12h5v-12h3.85l.42-4z" fill="#fff"/>
     </svg>
 
 </div>Facebook
</div>
</a>';
 
 $tmp = '<div style="text-align:center;padding: 10px 0;margin:10px 0;border-top:1px solid #d9d9d9;border-bottom:1px solid #d9d9d9;">'.$facebook.'</div>';
 
    if ( is_single() ) $content = $content.$tmp;
 
    // Returns the content.
    return $content;

If you are using the theme genesis framework, you can use the hook ‘genesis_entry_footer’ to add a share button at the end of the article.

READ  How to secure WordPress

So I have finished sharing the social networking utility facebook. To see the results, scroll down and you will see the facebook share button you have added.

Read more :

Leave a Reply

Your email address will not be published. Required fields are marked *