Создание кнопки «Поделиться» на Facebook, которая удобна для доступа - PullRequest
Новая
       51

Создание кнопки «Поделиться» на Facebook, которая удобна для доступа

0 голосов
/ 14 февраля 2020

Я пытаюсь создать кнопку «Поделиться» на Facebook для моей страницы, доступ к которой осуществляется путем индексации по вкладкам и нажатия клавиши «Ввод» (для доступа). Многие из созданных мною решений использовали javascript и не загружали мой скрипт до тех пор, пока не нажали кнопку «Поделиться».

Пока я создал эту кнопку. 

<a tabindex="0" class="fb-share-button" href="javascript:window.location=%22http://www.facebook.com/sharer.php?u=%22+encodeURIComponent(document.location)+%22&#38;t=%22+encodeURIComponent(document.title)" data-layout="button_count">
       <img src="/sites/all/themes/saralee/images/icon-facebook.png" alt="facebook icon">
</a>

Это почти дает желаемый результат, за исключением того, что мне нужно открыть его в новой вкладке или в фрейме. Что я не смог сделать с сохранением действительного URL. (так как вышеуказанная кнопка анализирует текущий URL). использование target="_blank" не работает.

1 Ответ

3 голосов
/ 15 февраля 2020

Краткое примечание - Наилучшим вариантом будет создание URL-адреса на сервере и его использование в качестве части HTML, используйте параметр JavaScript ниже, если вы не можете сделать это для по любой причине.

Все остальные пункты, кроме приведенного ниже URL-адреса, важны для обеспечения доступности «кнопки» вашего ресурса.

Вместо использования встроенной функции для кнопки, создайте URL-адрес в отдельном JavaScript и затем примените его к загрузке документа.

JS

var URL = "http://www.facebook.com/sharer.php?u=%22+encodeURIComponent(document.location)+%22&#38;t=%22+encodeURIComponent(document.title)";
var elements = document.getElementsByClassName("fb-share-button");
elements[0].setAttribute("href", URL); //using [0] to get first element, would be better to use an ID or simply **build the URL on the server before loading the page** and serve it as part of the HTML.

HTML

<a target="_blank" class="fb-share-button" href="fallback URL In Case Of JS Failure" data-layout="button_count">
       <img src="/sites/all/themes/saralee/images/icon-facebook.png" alt=""/>
       <span class="visually-hidden">Share This Page on Facebook (opens in new window)</span>
</a>

CSS

.visually-hidden { 
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap; /* added line */
}

Поскольку вы больше не настраиваете window.location, использование target="_blank" будет работать должным образом (window.location переопределял функциональность ссылки ).

Также обратите внимание, что я удалил tabindex, так как ссылки по умолчанию доступны для фокусировки (поэтому это не нужно).

Я также изменил описание alt на "" и добавлен «визуально скрытый» <span>, содержащий назначение ссылки.

Я включил CSS, чтобы сделать что-то «визуально скрытое», применяя этот класс к элементу, так как это полезный инструмент в вашем наборе специальных возможностей!

Обратите внимание, как Я указал, что ссылка «открывается в новом окне» в скобках, чтобы программы чтения с экрана знали, как работает эта ссылка.

Пустой тег alt используется для маркировки изображения как декоративного (убедитесь, что оно пустое и не нулевое, т. Е. alt="" NOT alt).

Визуально скрытый текст по-прежнему доступен для программ чтения с экрана, но не будет отображаться визуально.

...