Open
Description
Hi Jeff, thank you for your lessons and your answers!
How to add social share buttons to Blazor?
So far I've managed to get an active page address and sharing links.
Links are taken from: https://github.com/bradvin/social-share-urls
But I could only get index.html
title
and meta description
tag contents by using JavaScript.
This is my separate Blazor component, Social.razor:
@inject NavigationManager UriManager
@inject IJSRuntime jsRuntime
<a href="https://www.linkedin.com/sharing/share-offsite/?url=@(UriManager.Uri)" title="LinkedIn" target="_blank">LinkedIn</a>
<a href="https://www.facebook.com/sharer.php?u=@(UriManager.Uri)" title="Facebook" target="_blank">Facebook</a>
<a href="https://twitter.com/intent/tweet?url=@(UriManager.Uri)&text=@Title" title="Twitter" target="_blank">Twitter</a>
<a href="http://pinterest.com/pin/create/button/?url=@(UriManager.Uri)" title="Pinterest" target="_blank">Pinterest</a>
<a href="https://web.skype.com/share?url=@(UriManager.Uri)&text=@Title" title="Skype" target="_blank">Skype</a>
<a href="https://social-plugins.line.me/lineit/share?url=@(UriManager.Uri)" title="Line" target="_blank">Line</a>
<a href="http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=@(UriManager.Uri)&title=@Title&summary=@Description" title="QZone" target="_blank">QZone</a>
<a href="http://service.weibo.com/share/share.php?url=@(UriManager.Uri)" title="Weibo" target="_blank">Weibo</a>
<a href="https://reddit.com/submit?url=@(UriManager.Uri)&title=@Title" title="Reddit" target="_blank">Reddit</a>
<a href="http://www.livejournal.com/update.bml?subject=@Title&event=@(UriManager.Uri)" title="LiveJournal" target="_blank">LiveJournal</a>
<a href="http://vk.com/share.php?url=@(UriManager.Uri)&title=@Title&comment=@Description" title="VKontakte" target="_blank">VK</a>
<a href="https://connect.ok.ru/dk?st.cmd=WidgetSharePreview&st.shareUrl=@(UriManager.Uri)" title="Odnoklassniki" target="_blank">OK</a>
<a href="https://t.me/share/url?url=@(UriManager.Uri)&text=@Title" title="Telegram" target="_blank">Telegram</a>
@code {
public string Description = "";
public string Title = "";
protected override async Task OnInitializedAsync()
{
Title = await jsRuntime.InvokeAsync<string>("getTitle");
Description = await jsRuntime.InvokeAsync<string>("getDescription");
}
}
JavaScript to get an active page title, inserted into index.html
<script>window.getTitle = () => { return document.title; };</script>
JavaScript to get meta description contents, inserted into index.html:
<script> window.getDescription = () => { var metas = document.getElementsByTagName('meta'); for(var i in metas) { if (typeof(metas[i].name) != 'undefined' && metas[i].name.toLowerCase() == "description") { return encodeURIComponent(metas[i].content); } } return ''; } </script>
My question, how to get t:
PageTitle
from the active page- description from
<meta name="description" content="MegaSuperExcellPage">
insideHeadContent
- primary image url for the active page and image dimensions?
It looks like that it is possible without JavaScript
Metadata
Metadata
Assignees
Labels
No labels