Adding social media share buttons with meta tags for facebook and twitter
April 11, 2022
laravel londiniumWas 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&url=<?php echo url()->current();?>">
<img class="inline" width=25 src="/images/twitter.svg\"></a>
<a href="http://www.linkedin.com/shareArticle?mini=true&url=<?php echo url()->current();?>&title=my share text&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
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 with this form on londinium.com, ilminster.net or via Twitter @andylondon