Adding social media share buttons with meta tags for facebook and twitter Adding social media share buttons with meta tags for facebook and twitter

April 11, 2022

laravel londinium

Was looking into adding buttons on my website to share the page link to Facebook, Twitter and Linkedin. The packages I found all had limitations, so I decided to code it all myself. The code is going to look something like this

Share this page on:

<div id="social-links">
<a href="https://www.facebook.com/sharer/sharer.php?u=<?php echo url()->current();?>"  id="">
    <img class="inline" width=25 src="/images/facebook.svg\"></a>

<a href="https://twitter.com/intent/tweet?text=my share text&amp;url=<?php echo url()->current();?>">
    <img class="inline" width=25 src="/images/twitter.svg\"></a>

<a href="http://www.linkedin.com/shareArticle?mini=true&amp;url=<?php echo url()->current();?>&amp;title=my share text&amp;summary=dit is de linkedin summary">
    <img class="inline" width=25 src="/images/linkedin.svg"> </a>

</div>

Looking into these links, I discovered that is best to have meta tags to help both facebook and twitter to display cards, otherwise they have to guess what the links are about on the page.

Facebook docs

developers.facebook.com/docs/sharing/webmasters/

Twitter docs

developer.twitter.com/en/docs/twitter-for-websites/cards/guides/getting-started

OpenGraph Docs

https://ogp.me/

I also wrote some code to extract the most popular meta tags from a website spider I ran to see the top 50 most common meta tags used. I was surprised at the ammount of sites with the opengraph meta tags.

Metatag Count
viewport 47943
description 40094
og:title 27531
og:url 25707
og:type 24986
og:description 23818
robots 23078
og:site_name 23035
twitter:card 21264
generator 17519
X-UA-Compatible 17504
og:image 16992
keywords 15609
og:locale 14901
Content-Type 14035
twitter:title 12400
google-site-verification 11492
twitter:description 10984
msapplication-TileImage 10827
article:modified_time 8901
theme-color 8071
twitter:site 8025
og:image:width 6952
twitter:image 6931
og:image:height 6923
author 5314
twitter:label1 5175
twitter:data1 5175
msapplication-TileColor 5172
format-detection 4711
content-type 3302
twitter:creator 3066
msvalidate.01 2993
article:publisher 2944
twitter:url 2475
facebook-domain-verification 2340
og:image:secure_url 2305
x-ua-compatible 2103
og:image:type 2090
apple-mobile-web-app-capable 2022
msapplication-config 1966
title 1806
HandheldFriendly 1799
fb:app_id 1671
application-name 1666
Description 1651
p:domain_verify 1480
MobileOptimized 1472
copyright 1413
revisit-after 1360
apple-mobile-web-app-title 1314
Keywords 1297

So with this in mind, I decided to use the following new meta tags

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@londiniumcom" />
<meta name="twitter:creator" content="@londiniumcom" />
<meta name="twitter:title" content="title" />
<meta property="og:url" content="<?php echo url()->current();?>" />
<meta property="og:title" content="" />
<meta property="og:type" content="website" />
<meta property="og:description" content="Londinium.com - London maps, directory and information" />
<meta property="og:site_name" content="https://londinium.com" />
<meta property="description" content="Londinium.com - London maps, directory and information" />

I am going to implement this with a new laravel blade partial.


If you would like to contact me you can either use this form on londinium.com or via Twitter @andylondon