Создание общего доступа к кнопке Teams EmbeddedCreating a Share to Teams embedded button

Примечание

  • Поддерживаются только настольные версии Edge и Chrome.Only the desktop versions of Edge and Chrome are supported.
  • Использование учетных записей Фримиум или Guest не поддерживается.Use of Freemium or guest accounts is not supported.

Сторонние веб-сайты могут использовать сценарий запуска для встраивания общего доступа к кнопкам Teams на своих веб-страницах, которые запустят общий доступ к Microsoft Teams во всплывающем окне при нажатии.Third-party websites can use the launcher script to embed Share to Teams buttons on their webpages which will launch the Share to Teams experience in a popup window when clicked. Это позволит предоставить ссылку непосредственно любому человеку или каналу Microsoft Teams без переключения контекста.This will allow you to share a link directly to any person or Microsoft Teams channel without switching context.

Открыть доступ к всплывающему меню "команды"

Как внедрить кнопку Share to TeamsHow to embed a Share to Teams button

Сначала необходимо добавить launcher.js скрипт на веб-страницу.First, you'll need to add the launcher.js script on your webpage.

<script async defer src="https://teams.microsoft.com/share/launcher.js"></script>

Затем добавьте HTML-элемент на веб-страницу с атрибутом teams-share-button Class и ссылка для совместного использования в data-href атрибуте.Next, add an HTML element on your webpage with the teams-share-button class attribute and the link to share in the data-href attribute.

<div
  class="teams-share-button"
  data-href="https://<link-to-be-shared>">
</div>

При этом значок Microsoft Teams будет добавлен на веб-сайт.This will add the Microsoft Teams icon to your website.

Значок предоставления общего доступа к Teams

При необходимости используйте data-icon-px-size атрибут, если вы хотите изменить размер значков для кнопки Общий доступ для групп.Optionally, if you want a different icon size for the Share to Teams button, use the data-icon-px-size attribute.

<div
  class="teams-share-button"
  data-href="https://<link-to-be-shared>"
  data-icon-px-size="64">
</div>

Если вы знаете, что предварительный просмотр URL-адреса с вашей ссылки на общий доступ не отображается в Teams (например, для ссылки требуется проверка подлинности пользователя), можно отключить data-preview предварительный просмотр falseURL-адреса, добавив атрибут в значение.If you know that the URL preview from your link to be shared won't render well in Teams (for example the link would require user authentication) you can disable the URL preview by adding the data-preview attribute set to false.

<div
  class="teams-share-button"
  data-href="https://<link-to-be-shared>"
  data-preview="false">
</div>

Если страница динамически отрисовывает содержимое, можно использовать метод, shareToMicrosoftTeams.renderButtons() чтобы принудительно отобразить кнопку " общий доступ " для соответствующего места в конвейере.If your page dynamically renders content, you can use the the shareToMicrosoftTeams.renderButtons() method to force the Share button to render at the appropriate place in the pipeline.

Создание предварительной версии веб-сайтаCrafting your website preview

Когда ваш веб-сайт совместно используется в Teams, карточка, вставленная в выбранный канал, будет содержать предварительный просмотр веб-сайта.When your website is shared to Teams, the card that is inserted into the selected channel will contain a preview of your website. Вы можете управлять поведением этого предварительного просмотра, убедившись, что соответствующие метаданные добавляются на веб-сайт, к которому предоставлен data-href общий доступ (URL-адрес).You can control the behavior of this preview by ensuring the appropriate meta-data is added to the website being shared (the data-href URL). В таблице ниже представлены необходимые теги.The table below outlines the necessary tags. Можно использовать либо версии HTML по умолчанию, либо открытую версию графика.You can use either the html default versions, or the Open Graph version.

Для отображения предварительного просмотра необходимо выполнить следующие действия:In order for the preview to be displayed you must:

  • Включите либо эскиз, либо заголовок и описание (для достижения лучших результатов, включая все три).Include either a Thumbnail image, or both a Title and Description (for best results, include all three).
  • URL-адрес, к которому предоставлен общий доступ, не может требовать аутентификации.The URL being shared cannot require authentication. Если вы по-прежнему можете поделиться им, но Предварительная версия не будет создана.If it does you can still share it, but the preview will not be created.
ЗначениеValue МетатегMeta tag Открытие графикаOpen Graph
НазваниеTitle <meta name="title" content="Example Page Title"> <meta property="og:title" content="Example Page Title">
ОписаниеDescription <meta name="description" content="Example Page Description"> <meta property="og:description" content="Example Page Description">
Изображение эскизаThumbnail Image нетnone <meta property="og:image" content="http://example.com/image.jpg">

Совместный доступ к Microsoft Teams для образовательных учрежденийShare to Teams for Education

Для преподавателей, использующих кнопку Share to Teams, вы получите дополнительные возможности Create an Assignment.For teachers using the Share to Teams button you'll be given an additional option to Create an Assignment. Это позволяет быстро создать назначение в выбранной группе на основе общей ссылки.This enables you to quickly create an assignment in the chosen Team based on the shared link.

Открыть доступ к всплывающему меню "команды"

Определение полного загрузчика. jsFull launcher.js definition

СвойствоProperty Атрибут HTMLHTML attribute ТипType По умолчаниюDefault ОписаниеDescription
hrefhref data-href строкаstring н/дn/a Значение href для общего доступа к контенту.The href of the content to share.
previewpreview data-preview Логическое значение (в виде строки)boolean (as a string) true Указывает, следует ли отображать содержимое для совместного использования.Whether or not to show a preview of the content to share.
иконпкссизеiconPxSize data-icon-px-size Number (как строка)number (as a string) 32 Размер в пикселях кнопки Share to Teams для отображения.The size in pixels of the Share-to-Teams button to render.
мсгтекстmsgText data-msg-text строкаstring н/дn/a Текст по умолчанию, вставляемый перед ссылкой в поле создания сообщения (предельное число знаков в 200)Default Text to be inserted before the link in the message compose box (200 character limit)
ассигнинстрassignInstr data-assign-instr строкаstring н/дn/a Текст по умолчанию, вставляемый в поле "инструкции" для назначений (количество знаков в 200)Default Text to be inserted in the assignments "Instructions" field (200 character limit)
ассигнтитлеassignTitle data-assign-title строкаstring н/дn/a Текст по умолчанию, вставляемый в поле "название" для назначений (50 знаков)Default Text to be inserted in the assignments "Title" field (50 character limit)

МетодыMethods

shareToMicrosoftTeams.renderButtons(options)

options(необязательно):{ elements?: HTMLElement[] }options (optional): { elements?: HTMLElement[] }

Отображает все кнопки общего доступа на странице.Renders all share buttons currently on the page. Если необязательный options объект предоставляется со списком элементов, эти элементы отображаются на кнопках совместного использования.If an optional options object is supplied with a list of elements, those elements will be rendered into share buttons.

Установка значений формы по умолчаниюSetting default form values

При необходимости можно задать значения по умолчанию для следующих полей в форме Share to teams:Optionally, you can choose to set default values for the following fields on the Share to Teams form:

  • Произнесите что-тоmsgTextвроде this ().Say something about this (msgText)
  • Инструкции по назначению (assignInstr)Assignment Instructions (assignInstr)
  • Название назначения (assignTitle)Assignment Title (assignTitle)

Пример: значения формы по умолчаниюExample: Default form values

<span
    class="teams-share-button"
    data-href="https://www.microsoft.com/education/products/teams"
    data-msg-text="Default Message"
    data-assign-title="Default Assignment Title"
    data-assign-instr="Default Assignment Instructions"
></span>