웹 공유 API 및 메타 태그를 사용하여 네이티브 공유
29472 단어 11tywebdevjavascript
이것이 바로 Web Share API의 용무지이다. 이 API가 등장하면서 웹에서 콘텐츠를 공유하는 것이 더욱 직접적으로 변했다. 이 API를 사용하면 사용자가 원하는 곳에서 자유롭게 채팅 응용 프로그램, 소셜 미디어에서 notes 응용 프로그램에 이르기까지 콘텐츠를 공유할 수 있다.
글의 마지막 부분에서 저는 모든 중요한 html원 표기를 토론하여 사이트/응용 프로그램이 당신의 내용을 잘 미리 볼 수 있도록 했습니다.
if(navigator.share) {
navigator.share({
text:"Some text to share",
title: "Title of what you are sharing",
url: "url to share"
}).then(() => {
// do something on success
}).catch(() => {
// handle errors
});
})
}
브라우저 지원
이 점에서, 당신은 생각할 수 있다. 그래, 이것은 매우 좋지만, 브라우저 지원은 매우 나쁘지만, 나는 당신이 놀랄 수도 있다고 생각한다. 브라우저 지원은 가장 중요한 곳에서 매우 좋다. 이동.
네, 이것은 매우 큰 빨간색입니다. 그러나 데이터를 분석하면 관건적인 부분에서 체면을 유지할 수 있습니다.
코드의 실시간 프레젠테이션을 얻으려면 저희 사이트의 이 글을 보십시오. 공유 링크를 보실 수 있습니다.웹 공유api를 지원하는 브라우저를 사용하면 추가 공유 단추를 볼 수 있습니다. griffa.dev
점진적으로 향상된 웹 공유 API로 사용
본고의 나머지 부분은 내가 웹 공유 API를 실현하기 위해 취한 방법을 묘사했는데 이 API는 나의 블로그에 대한 점차적인 강화이다.API를 지원하는 브라우저에서 이 옵션을 제공합니다. 그렇지 않으면 사람들이 공유하기를 원하는 일반적인 위치에 공유 단추를 추가합니다. 예를 들어 트위터입니다.
제 블로그에서 저는 11ty를 사용합니다. 매우 유연한 정적 사이트 생성기입니다. 이것은 당신이 경량급과 빠른 사이트를 만드는 것을 장려합니다.
나는 여기에 나와 11ty의 여정을 썼다.
낡은 방법으로 일을 하다
공유 목표를 지원하기 위해 많은 다른 사이트를 지원하는 것은 상당히 많은 시간을 소모하고 모든 방식이 다르다.
저는 html 템플릿부터 시작합니다.
<nav class="sharing" aria-label="Social Sharing">
<ul class="social-share">
{%- for link in external.sharing %}
<li>
<a class="icon-share url-share" title="{{link.text}}" target="_blank" href="{{link.url(title, tags, page) | url}}" class="action external">
{% include link.icon %}
</a>
</li>
{%- endfor %}
</ul>
</nav>
전역 데이터 파일은 JSON 또는javascript입니다. 코드 세션에서 볼 수 있듯이 저는
sharing 대상 그룹을 가지고 있습니다. 각 대상은 다음과 같습니다.src/_data/external.js이 있습니다. 이것은 초기 코드external가 변수 이름의 출처입니다.서류가 이렇게 보여요.
module.exports = {
sharing: [
{
icon: "img/twitter.svg",
text: "Share to Twitter",
url(title, tags = [], page) {
const twitterUrl = "https://twitter.com/intent/tweet?text=";
const {text, url} = genericShare.data(title, tags, page);
return `${twitterUrl}${encodeURIComponent(`${text} ${url}`)}`;
}
},
{
icon: "img/linkedin.svg",
text: "Share to LinkedIn",
url(title, tags = [], page) {
return `https://www.linkedin.com/shareArticle?mini=true&url=${getUrl(
page
)}&title=${encodeURIComponent(title)}&source=griffadev`;
}
},
{
icon: "img/reddit.svg",
text: "Share to Reddit",
url(title, tags = [], page) {
const baseUrl = "https://www.reddit.com/submit?";
return `${baseUrl}uri=${getUrl(page)}&title=${encodeURIComponent(title)}`;
}
},
{
icon: "img/awful.svg",
text: "Share to Hacker News",
url(title, tags = [], page) {
const baseUrl = "https://news.ycombinator.com/submitlink?";
return `${baseUrl}u=${getUrl(page)}&t=${encodeURIComponent(title)}`;
}
}
]
}
너는 아마
genericShare.data가 보이지 않는다는 것을 알아차렸을 것이다. 네가 옳다.이 함수를 살펴보겠습니다.
const siteMeta = require("./metadata.json");
const helpers = require("./helpers");
const getUrl = (page) => encodeURIComponent(`${siteMeta.url}${page.url}`);
const genericShare = {
data(title, tags = [], page) {
const url = `${siteMeta.url}${page.url}`;
const text = `${title} ${
// get my twitter handle
siteMeta.author.twitter} ${tags
// remove 11t built in tags from the tags for my bpost
.filter(helpers.filterCollectionTags)
// add a twitter style hashtag
.map((tag) => `#${tag}`)
// convert back to a string
.join(" ")}`;
return {
text,
title,
url
}
}
}
siteMeta.url에서 제 사이트metadata.json의 전체 URL을 가져와 현재 page.url에 추가합니다.그 밖에 저metadata.json에는 제 트위터 손잡이와 같은 데이터가 더 많습니다. 사람들이 제 댓글을 공유할 때 저는 자동으로 태그를 받을 수 있습니다.
마지막으로 저는 블로그 게시물에 제 앞글의 모든 태그를 추가했고 내용을 공유하는 텍스트에도 추가했습니다. 저는 원하지 않는 태그, 예를 들어 11개의 소장 이름의 태그를 필터링했습니다.
만약 내가 말한 front matter이 무슨 뜻인지 확실하지 않다면, 그것은 나의 가격 인하 서류의 맨 위에 있는 메타데이터이다.
---
title: 'Using the Web Share API for simple native sharing'
tags:
- JavaScript
- 11ty
- Webdev
---
웹 공유 API 추가
이제 우리는 모든 사람을 위해 기본적인 행위를 실현했고 웹 공유 API를 지원하는 브라우저의 사이트를 점차적으로 강화할 수 있다.
HTML 템플릿 업데이트:
<nav class="sharing" aria-label="Social Sharing">
<ul class="social-share">
{% set genericShareData = external.genericShare.data(title, tags, page) %}
<li class="native-share" style="display: none;" hidden>
<button data-title="{{genericShareData.title}}" data-url="{{genericShareData.url}}"
data-text="{{genericShareData.text}}" aria-label="Native share">
{% include 'img/share.svg' %}
</button>
</li>
{%- for link in external.sharing %}
<li>
<a class="icon-share url-share" title="{{link.text}}" target="_blank"
href="{{link.url(title, tags, page) | url}}" class="action external">
{% include link.icon %}
</a>
</li>
{%- endfor %}
</ul>
</nav>
{% set genericShareData = external.genericShare.data(title, tags, page) %}
<li class="native-share" style="display: none;" hidden>
<button data-title="{{genericShareData.title}}" data-url="{{genericShareData.url}}"
data-text="{{genericShareData.text}}" aria-label="Native share">
{% include 'img/share.svg' %}
</button>
</li>
title,url,text,data-*을 사용합니다.함수 my 글로벌 데이터 object
external.genericShare.data(title, tags, page)를 실행합니다.기본적으로 이 내용은
display:none 로 숨겨져 있으며, 자바스크립트를 조금 사용해서 사용합니다. if(navigator.share) {
const nativeShare = document.querySelector('.native-share');
if (nativeShare) {
// make the button visible
nativeShare.style.display = 'flex';
nativeShare.querySelector('button').addEventListener('click', (e) => {
const button = e.currentTarget;
navigator.share({
// grab the data attributes from the html
text:button.getAttribute('data-text'),
title: button.getAttribute('data-title'),
url: button.getAttribute('data-url')
}).then(() => {
// show some content to say it was shared, e.g. thank the user.
nativeShare.classList.add('shared');
}).catch(() => {
})
});
}
}
navigator.share.사용 가능한 경우 단추를 누르면 표시되고 click 프로세서를 추가하고 data-* 속성 읽기를 누르면 navigator.share 호출됩니다.원한다면
navigator.share 사용할 수 있을 때 예비 링크를 숨길 수 있습니다. 저는 아직 선택하지 않았지만, 더 많은 데스크톱 사이트가 웹 공유 API에 대한 지원을 받을 때 이렇게 할 수 있습니다.11ty 프로젝트에 자바스크립트를 추가하는 방법을 알고 싶다면, 이 점을 실현하는 방법에 관한 글을 최근에 썼습니다for Web Components.
메타 태그
이러한 모든 문제를 해결하기 위해서는 웹 사이트에 공유 링크 미리보기에 정확한 이미지/설명을 놓을 수 있도록 모든 적당한 메타태그를 설정해야 합니다.
예:
<meta name="author" content="{{author or metadata.author.name}}">
<meta property="og:site_name" content="{{ siteTitle }}"/>
<meta property="og:title" content="{{ pageTitle }}"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="{{ currentUrl }}"/>
{% if socialImage %}
<meta name="twitter:card" content="summary_large_image"/>
<meta property="og:image" content="{{ socialImage }}"/>
<meta name="twitter:image" content="{{ socialImage }}"/>
<meta property="og:image:alt" content="Page image for {{ metadata.title }}"/>
<meta name="twitter:image:alt" content="Page image for {{ metadata.title }}"/>
{% endif %}
{% if tagline %}
<meta name="description" content="{{ tagline }}"/>
<meta name="twitter:description" content="{{ tagline }}"/>
<meta property="og:description" content="{{ tagline }}"/>
{% endif %}
총결산
코드의 실시간 프레젠테이션을 얻으려면 저희 사이트의 이 글을 보십시오. 공유 링크를 보실 수 있습니다. griffa.dev
Web Share API에 대한 지원이 증가하고 있습니다. 점점 강화됨에 따라 이것은 현대 사이트를 구축하는 매우 좋은 방법입니다. 저는 이런 방법을 빠른 사이트에 사용하고 그 중에서 상호작용here을 추가한 적이 있습니다.
Reference
이 문제에 관하여(웹 공유 API 및 메타 태그를 사용하여 네이티브 공유), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/griffadev/using-the-web-share-api-and-meta-tags-for-native-sharing-2d91텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
