How to generate social share buttons

If you want to share any blog posts on social media, you can have a share button at the bottom of each post so that the reader can easily share this on their preferred social media such as Facebook, LinkedIn, and X. Here I am showing only three but can be added more.

# Library you need
import urllib.parse

# Define the function to parse facebook sharable link
def fblink(link):
    base_url = "https://www.facebook.com/sharer/sharer.php"
    encoded_url = urllib.parse.quote(link, safe='')
    full_url= f"{base_url}?u={encoded_url}&src=sdkpreparse"
    return full_url  

# Suppose this is the link you want to share. Replace with your own link  
link="https://mrislambd.github.io/posts/social-share/"

# Then you can use this template
print('<div id="fb-root"></div>')
print('<script async defer crossorigin="anonymous"\n src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v20.0"></script>')
print(' ')
print('<div class="share-buttons">')
print('<div class="fb-share-button" data-href="{}"'.format(link))
print('data-layout="button_count" data-size="small"><a target="_blank" \n href="{}" \n class="fb-xfbml-parse-ignore">Share</a></div>'.format(fblink(link)))
print('')
print('<script src="https://platform.linkedin.com/in.js" type="text/javascript">lang: en_US</script>')
print('<script type="IN/Share" data-url="{}"></script> '.format(link)) 
print(' ')
print('<a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" \n data-url="{}" data-show-count="true">Tweet</a>'.format(link))
print('<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>')
print('</div>')
print('')
print('<div class="fb-comments" data-href="{}"\n data-width="" data-numposts="5"></div>'.format(link)) 
# Then you can directly post the following output at the bottom of your page 

<div id="fb-root"></div>
<script async defer crossorigin="anonymous"
 src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v20.0"></script>
 
<div class="share-buttons">
<div class="fb-share-button" data-href="https://mrislambd.github.io/posts/social-share/"
data-layout="button_count" data-size="small"><a target="_blank" 
 href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fmrislambd.github.io%2Fposts%2Fsocial-share%2F&amp;src=sdkpreparse" 
 class="fb-xfbml-parse-ignore">Share</a></div>

<script src="https://platform.linkedin.com/in.js" type="text/javascript">lang: en_US</script>
<script type="IN/Share" data-url="https://mrislambd.github.io/posts/social-share/"></script> 
 
<a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" 
 data-url="https://mrislambd.github.io/posts/social-share/" data-show-count="true">Tweet</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>

<div class="fb-comments" data-href="https://mrislambd.github.io/posts/social-share/"
 data-width="" data-numposts="5"></div>

Share on

Share

Tweet

You may also like