✅ Новости WEB и WordPress, темы, плагины. Здесь мы делимся советами и лучшими решениями для веб-сайтов.

Как добавить раскрывающееся меню «Поделиться» после каждого поста? (Джаваскрипт)

34

Следующий выпадающий список для публикации текущего поста на нескольких сайтах добавлен в блог WordPress (вы также можете добавить его на свой собственный сайт).

поделиться-выпадающий-список-javascript

Код Javascript и HTML выглядит следующим образом, и вы можете добавить его в место, где отображаются статьи (например, single.php в шаблоне wordpress).

<script language="Javascript">
function openlink(link) {
    if (link) {
        var title = document.title.split(" | ")[0];
        var url = window.location;
        var x = "";
        if (link == "milnk") {
            x = "<a class="vglnk" target="_blank" href="http://milnk.com/link/submit?u=" rel="nofollow"><span>http</span><span>://</span><span>milnk</span><span>.</span><span>com</span><span>/</span><span>link</span><span>/</span><span>submit</span><span>?</span><span>u</span><span>=</span></a>" + encodeURIComponent(url) + "&t=" + encodeURIComponent(title);
        }
        else if (link == "wayback") {
            x = "<a class="vglnk" target="_blank" href="http://web.archive.org/save/" rel="nofollow"><span>http</span><span>://</span><span>web</span><span>.</span><span>archive</span><span>.</span><span>org</span><span>/</span><span>save</span><span>/</span></a>" + url;
        }
        if (x) {
            window.open(x);
        }
    }
}
</script>
<select onchange="javascript:openlink(this.value)">
<option selected="">Share This to...</option>
<option value="milnk">Milnk</option>
<option value="wayback">Wayback Machine</option></select>

Текущий URL-адрес получается с помощью Javascript window.location, а заголовок извлекается с помощью document.title. Функция encodeURIComponent используется для кодирования специальных символов в строке URL.

Чтобы включить дополнительные параметры (совместное использование веб-сайта), вам просто нужно добавить дополнительные операторы if соответственно. Чтобы убедиться в этом, просмотрите исходный код HTML текущей страницы, и вы увидите полный список параметров обмена.

Обновление: 02.01.2016 Простой код AddThis доступен на github: (Добавить параметры Tumblr и QR-кода )

https://github.com/DoctorLai/addthis

Применение:

<script>
var sharedropdown_english = true; // Set false if using Chinese
var sharedropdown_rss = null; // Feed URL subscription
</script>
<div id="sharedropdown"> </div>
<div id="sharedropdown_qr"> </div>
<script src="<a class="vglnk" target="_blank" href="https://helloacm.com/js/addthis.js" rel="nofollow"><span>https</span><span>://</span><span>helloacm</span><span>.</span><span>com</span><span>/</span><span>js</span><span>/</span><span>addthis</span><span>.</span><span>js</span></a>" async></script>

Источник записи: helloacm.com

Этот веб-сайт использует файлы cookie для улучшения вашего опыта. Мы предполагаем, что вы согласны с этим, но вы можете отказаться, если хотите. Принимаю Подробнее