Adding Custom URL on Article Summary Page in OJS 3.3.x.x

On the Article Summary Page, I want to add a custom URL. I have the buttons in place but for each article I need to have a unique URL so I guess I need to manually feed the custom URL while publishing the article using some custom metadata field.

Can anyone help me get a custom metadata field for custom URL which I can fill in everytime I publish an article and that custom URL can be linked to the button in article summary page.

I am sharing the screenshot for betting understanding.

Web capture_5-8-2022_12618_thesciencebrigade.com

I have added both the logos using the following code in article_summary.tlp file.

<div class="index_grid">
	<div class="index_column1">
	</div>	
	<div class="index_column">
		<a href="xxxxxxxxxx" target="_blank" >
			<img src="/ojs/lib/pkp/templates/images/icons/scholar.png"  title="Google Scholar" style="  width: 32px; height: 32px"> 
		</a>
		<a href="xxxxxxxxx" target="_blank" >
			<img src="/ojs/lib/pkp/templates/images/icons/ecrtd.png"  title="ECRTD" style="  width: 32px; height: 32px"> 
		</a>
	</div>
</div>

I am using OJS 3.3.0.10