csharpfritz / csharp_with_csharpfritz

Show notes, slides, and samples from the CSharp with CSharpFritz show
MIT License
662 stars 215 forks source link

Social share buttons for Blazor #110

Open nakigoe opened 2 years ago

nakigoe commented 2 years ago

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:


My question, how to get t:

It looks like that it is possible without JavaScript