Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Social share buttons for Blazor #110

Open
nakigoe opened this issue Mar 16, 2022 · 0 comments
Open

Social share buttons for Blazor #110

nakigoe opened this issue Mar 16, 2022 · 0 comments

Comments

@nakigoe
Copy link

nakigoe commented Mar 16, 2022

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"> inside HeadContent
  • primary image url for the active page and image dimensions?

It looks like that it is possible without JavaScript

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant