Add Social Share Buttons to Your Blog Posts With OpenGraph Tags

You can now share posts on Twitter, LinkedIn, and Reddit!

I started working with a module called django-social-share, but realized I could code it myself without an added dependency.

Twitter

I began using code from the official Twitter share button page. It didn’t work for me because it includes inline styles and scripts, invalidating my content security policy. Instead, I used sharingbuttons.io which provides ‘JavaScript-less’ social share buttons. After adding the button, I also needed to include Twitter’s meta tags.

I won’t go through the Twitter meta tags since they are well-documented on Twitter’s card overview.  Twitter's tags are meant to augment Open Graph tags which implemented last month. For example, "twitter:card" has no complement in OG, but title does.

Twitter card tags look similar to Open Graph tags, and are based on the same conventions as the Open Graph protocol. When using Open Graph protocol to describe data on a page, it is easy to generate a Twitter card without duplicating tags and data. When the Twitter card processor looks for tags on a page, it first checks for the Twitter-specific property, and if not present, falls back to the supported Open Graph property. This allows for both to be defined on the page independently, and minimizes the amount of duplicate markup required to describe content and experience.

Twitter docs

I wasn't able to get my post's meta description to show up unless I added Twitter's tag for it. Twitter was also failing to pick up the image url when it was relative (/media/meta_imgs) so I needed to add a duplicate metaimg url tag specifically for Twitter.

{% block meta %}
<!-- OpenGraph Tags -->
<meta name="description" content="{{ post.metadesc }}">
<meta property="og:type" content="article">
<meta property="article:published_time" content="{{ post.date_posted|date:’c’ }}">
<meta name="author" content="{{ post.author.first_name }} {{ post.author.last_name }}">
<meta property="og:image" content="{{ post.metaimg.url }}">
<meta property="og:image:type" content="{{ post.metaimg_mimetype }}">
<meta property="og:image:width" content="{{ post.metaimg.width }}">
<meta property="og:image:height" content="{{ post.metaimg.height }}">
<!-- Twitter Cards Meta Tags -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@_jsolly">
<meta name="twitter:description" content="{{ post.metadesc }}">
<meta name="twitter:image" content="{{ request.scheme }}://{{ request.get_host }}{{ post.metaimg.url }}">
{% endblock meta %}

After adding everything to your template, you can test sharing with the Twitter Card Validator. It shows you a preview of your tweet before you post it.

LinkedIn

This was straightforward since I had done most of the heavy lifting of adding OpenGraph tags, which I wrote about in this post. After adding the LinkedIn button on sharingbuttons.io, it ‘just worked.’

Reddit

I just added the button! Here’s a typical sharingbuttons.io button:

  <!-- Sharingbutton Reddit -->
    <a class="resp-sharing-button__link" href="https://reddit.com/submit/?url={{ request.build_absolute_uri }}&amp;resubmit=true&amp;title={{ post.title }}" target="_blank" rel="noopener" aria-label="Share on Reddit">
      <div class="resp-sharing-button resp-sharing-button--reddit resp-sharing-button--large"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solidcircle">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="9.391" cy="13.392" r=".978"/><path d="M14.057 15.814c-1.14.66-2.987.655-4.122-.004-.238-.138-.545-.058-.684.182-.13.24-.05.545.19.685.72.417 1.63.646 2.568.646.93 0 1.84-.228 2.558-.642.24-.13.32-.44.185-.68-.14-.24-.445-.32-.683-.18zM5 12.086c0 .41.23.78.568.978.27-.662.735-1.264 1.353-1.774-.2-.207-.48-.334-.79-.334-.62 0-1.13.507-1.13 1.13z"/><path d="M12 0C5.383 0 0 5.383 0 12s5.383 12 12 12 12-5.383 12-12S18.617 0 12 0zm6.673 14.055c.01.104.022.208.022.314 0 2.61-3.004 4.73-6.695 4.73s-6.695-2.126-6.695-4.74c0-.105.013-.21.022-.313C4.537 13.73 4 12.97 4 12.08c0-1.173.956-2.13 2.13-2.13.63 0 1.218.29 1.618.757 1.04-.607 2.345-.99 3.77-1.063.057-.803.308-2.33 1.388-2.95.633-.366 1.417-.323 2.322.085.302-.81 1.076-1.397 1.99-1.397 1.174 0 2.13.96 2.13 2.13 0 1.177-.956 2.133-2.13 2.133-1.065 0-1.942-.79-2.098-1.81-.734-.4-1.315-.506-1.716-.276-.6.346-.818 1.395-.88 2.087 1.407.08 2.697.46 3.728 1.065.4-.468.987-.756 1.617-.756 1.17 0 2.13.953 2.13 2.13 0 .89-.54 1.65-1.33 1.97z"/><circle cx="14.609" cy="13.391" r=".978"/><path d="M17.87 10.956c-.302 0-.583.128-.79.334.616.51 1.082 1.112 1.352 1.774.34-.197.568-.566.568-.978 0-.623-.507-1.13-1.13-1.13z"/></svg>
      </div>Share on Reddit</div>
    </a>

Conclusion

A clean implementation of social share buttons was challenging because most approaches violated my CSP (Content Security Policy).Existing python modules were too heavy-handed, and official share buttons included inline styles and scripts. I settled on buttons created on sharingbuttons.io and added Twitter meta tags, so my post previews show correctly on Twitter Cards. Try the buttons below, and let me know how they work!