How to Create easy Social share Button ?

            How to Create Social share Button or Widget ?

Social share buttons allow website visitors to easily share content from a website on their social media profiles. Here's an example code snippet for social share buttons using HTML and CSS:

HTML:

"<div class="social-share-buttons">

  <a href="https://www.facebook.com/sharer.php?u=[URL]" target="_blank"><i class="fab fa-facebook"></i></a>

  <a href="https://twitter.com/share?url=[URL]&text=[TITLE]&hashtags=[HASHTAGS]" target="_blank"><i class="fab fa-twitter"></i></a>

  <a href="https://www.linkedin.com/shareArticle?mini=true&url=[URL]&title=[TITLE]&summary=[SUMMARY]&source=[SOURCE]" target="_blank"><i class="fab fa-linkedin"></i></a>

  <a href="https://www.pinterest.com/pin/create/button/?url=[URL]&media=[MEDIA]&description=[DESCRIPTION]" target="_blank"><i class="fab fa-pinterest"></i></a>

</div>"

CSS:"

.social-share-buttons {

  display: flex;

  justify-content: center;

  align-items: center;

}

.social-share-buttons a {

  margin: 0 10px;

  color: #fff;

  font-size: 24px;

  text-decoration: none;

}

.social-share-buttons a:hover {

  opacity: 0.7;

}

.social-share-buttons a i {

  display: block;

}

.social-share-buttons a i.fab.fa-facebook {

  background-color: #3b5998;

}

.social-share-buttons a i.fab.fa-twitter {

  background-color: #1da1f2;

}

.social-share-buttons a i.fab.fa-linkedin {

  background-color: #0077b5;

}

.social-share-buttons a i.fab.fa-pinterest {

  background-color: #bd081c;

}

"

blogger Best complete social share button.

HTML Code:

"<!-- AddToAny BEGIN -->

<div class="a2a_kit a2a_kit_size_32 a2a_default_style">

<a class="a2a_dd" href="https://source29.blogspot.com/share"></a>

<a class="a2a_button_copy_link"></a>

<a class="a2a_button_pinboard"></a>

<a class="a2a_button_blogger"></a>

<a class="a2a_button_facebook"></a>

<a class="a2a_button_twitter"></a>

<a class="a2a_button_facebook_messenger"></a>

<a class="a2a_button_whatsapp"></a>

<a class="a2a_button_linkedin"></a>

<a class="a2a_button_pinterest"></a>

<a class="a2a_button_reddit"></a>

<a class="a2a_button_telegram"></a>

<a class="a2a_button_tumblr"></a>

<a class="a2a_button_google_gmail"></a>

<a class="a2a_button_email"></a>

<a class="a2a_button_digg"></a>

<a class="a2a_button_google_bookmarks"></a>

<a class="a2a_button_wechat"></a>

</div>

<script async src="https://static.addtoany.com/menu/page.js"></script>

<!-- AddToAny END -->"

Or,

"<b:includable id='shareButtons' var='post'>

    <b:if cond='data:top.showEmailButton'>

        <a class='goog-inline-block share-button sb-email' expr:href='data:post.sharePostUrl + &quot;&amp;target=email&quot;' expr:title='data:top.emailThisMsg' target='_blank'>

            <span class='share-button-link-text'>

                <data:top.emailthismsg/>

            </data:top.emailthismsg></span>

        </a>

    </b:if>

    <b:if cond='data:top.showBlogThisButton'>

        <a class='goog-inline-block share-button sb-blog' expr:href='data:post.sharePostUrl + &quot;&amp;target=blog&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=270,width=475\&quot;); return false;&quot;' expr:title='data:top.blogThisMsg' target='_blank'>

            <span class='share-button-link-text'>

                <data:top.blogthismsg/>

            </data:top.blogthismsg></span>

        </a>

    </b:if>

  

    <b:if cond='data:top.showTwitterButton'>

        <a class='goog-inline-block share-button sb-twitter' expr:href='data:post.sharePostUrl + &quot;&amp;target=twitter&quot;' expr:title='data:top.shareToTwitterMsg' target='_blank'>

            <span class='share-button-link-text'>

                <data:top.sharetotwittermsg/>

            </data:top.sharetotwittermsg></span>

        </a>

    </b:if>

  

    <b:if cond='data:top.showFacebookButton'>

        <a class='goog-inline-block share-button sb-facebook' expr:href='data:post.sharePostUrl + &quot;&amp;target=facebook&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' expr:title='data:top.shareToFacebookMsg' target='_blank'>

            <span class='share-button-link-text'>

                <data:top.sharetofacebookmsg/>

            </data:top.sharetofacebookmsg></span>

        </a>

    </b:if>

  

    <b:if cond='data:top.showPinterestButton'>

        <a class='goog-inline-block share-button sb-pinterest' expr:href='data:post.sharePostUrl + &quot;&amp;target=pinterest&quot;' expr:title='data:top.shareToPinterestMsg' target='_blank'>

            <span class='share-button-link-text'>

                <data:top.sharetopinterestmsg/>

            </data:top.sharetopinterestmsg></span>

        </a>

    </b:if>

  

    <b:if cond='data:top.showPlusOne'>

        <div class='goog-inline-block google-plus-share-container'>

            <data:post.googleplussharetag/>

        </data:post.googleplussharetag></div>

    </b:if>

  

</b:includable>"