Wandbox
SettingsLog
SettingsLog
Language
GitHubLogin
Ran/Viewed Log

bbs_share_link.php

Author

anonymous

6 months ago

Language

PHP

Compiler

php 8.3.12

Options

bbs_share_link.php

Author

anonymous

6 months ago

$ php prog.php 
<style>
    .quest-shareButton svg {
        vertical-align: text-bottom;
    }

    .popup-wrapper {
        background-color: rgba(0, 0, 0, .5);
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: none;
    }

    /* ポップアップ時に表示されるコンテンツ位置 */
    .popup-inside {
        text-align: center;
        width: 100%;
        max-width: 300px;
        background: white;
        margin: 10% auto;
        padding: 20px;
        position: relative;
    }

    .close {
        position: absolute;
        top: 0;
        right: 5px;
        cursor: pointer;
    }

    .sns-share-links {
        display: flex;
        align-items: center;
        gap: 0px 50px;
    }

    .spread-information img {
        width: 20px;
        height: 20px;
    }
</style>

<button type="button" class="quest-shareButton">
    <svg version="1.1" class="shareButton-icon" id="_x32_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="width: 256px; height: 256px; opacity: 1;" xml:space="preserve">
        <style type="text/css">
            .st0 {
                fill: #4B4B4B;
            }
        </style>
        <g>
            <path class="st0" d="M398.73,227.402c62.563,0,113.27-50.793,113.27-113.359c0-62.656-50.707-113.36-113.27-113.36
		c-62.656,0-113.364,50.704-113.364,113.36c0,11.587,1.733,22.711,4.926,33.292l-114.914,69.397
		c-18.512-20.154-44.959-32.739-74.417-32.739C45.146,183.993,0,229.228,0,284.954c0,55.816,45.146,100.962,100.962,100.962
		c30.736,0,58.278-13.778,76.79-35.482l86.824,45.787c-2.646,8.39-4.106,17.323-4.106,26.63
		c0.093,48.878,39.673,88.466,88.555,88.466c48.976,0,88.556-39.588,88.556-88.466c0-48.976-39.58-88.554-88.556-88.554
		c-26.812,0-50.886,11.942-67.122,30.825l-84.726-49.431c3.104-9.672,4.742-19.976,4.742-30.736c0-10.393-1.55-20.43-4.56-29.827
		l118.013-64.294C335.985,213.268,365.715,227.402,398.73,227.402z M344.282,59.687c14.045-13.956,33.11-22.524,54.448-22.524
		c21.251,0,40.31,8.567,54.356,22.524c13.862,13.956,22.434,33.016,22.434,54.356c0,21.25-8.572,40.399-22.434,54.354
		c-14.046,13.956-33.105,22.525-54.356,22.525c-19.059,0-36.298-6.84-49.794-18.419h-0.094c-1.55-1.273-3.099-2.645-4.56-4.106
		c-10.852-10.946-18.422-24.991-21.246-40.852c-0.824-4.382-1.189-8.942-1.189-13.502C321.846,92.703,330.419,73.644,344.282,59.687
		z M164.343,296.532c-2.28,13.138-8.661,24.902-17.781,34.022c-0.731,0.73-1.55,1.461-2.373,2.192
		c-11.49,10.393-26.536,16.69-43.227,16.69c-17.874,0-33.928-7.205-45.6-18.881c-11.676-11.765-18.881-27.725-18.881-45.6
		c0-17.874,7.205-33.834,18.881-45.6c11.672-11.676,27.726-18.881,45.6-18.881c16.232,0,30.825,5.932,42.225,15.782
		c1.185,0.997,2.28,2.004,3.376,3.099c9.027,9.12,15.413,20.698,17.781,33.746c0.73,3.83,1.095,7.748,1.095,11.854
		C165.438,288.873,165.074,292.801,164.343,296.532z M297.773,413.73c1.915-10.767,7.022-20.253,14.499-27.725
		c0.638-0.641,1.367-1.372,2.098-1.915c9.21-8.39,21.251-13.314,34.654-13.314c14.504,0,27.36,5.745,36.846,15.23
		c9.485,9.485,15.23,22.346,15.23,36.845c0,14.411-5.745,27.272-15.23,36.748c-9.486,9.486-22.342,15.238-36.846,15.238
		c-14.406,0-27.266-5.753-36.752-15.238c-9.485-9.476-15.23-22.337-15.322-36.748C296.95,419.751,297.225,416.643,297.773,413.73z" style="fill: rgb(75, 75, 75);"></path>
        </g>
    </svg>
    <div class="share-info-text">共有（share）</div>
</button>

<div class="popup-wrapper">
    <div class="popup-inside">
        <div class="close">x</div>
        <div class="spread-information">
            <!-- LINE -->
            <a class="sns-link" href="//timeline.line.me/social-plugin/share?url=&text=" target="_blank" rel="nofollow noopener noreferrer">
                <img src="http://www.irasuto.cfbx.jp/wp-content/themes/sample_theme/images/line.png">
            </a>

            <!-- X -->
            <a class="sns-link" href="//x.com/intent/post?text=&url=" target="_blank" rel="nofollow noopener noreferrer">
                <img src="http://www.irasuto.cfbx.jp/wp-content/themes/sample_theme/images/x.png">
            </a>

            <!-- Facebook -->
            <a class="sns-link" href="//www.facebook.com/sharer/sharer.php?u=&t=" target="_blank" rel="nofollow noopener noreferrer">
                <img src="http://www.irasuto.cfbx.jp/wp-content/themes/sample_theme/images/facebook.png">
            </a>

            <!-- ピンタレスト -->
            <a class="sns-link" href="//www.pinterest.com/pin/create/button/?url=&media=" target="_blank" rel="nofollow noopener noreferrer">
                <img src="http://www.irasuto.cfbx.jp/wp-content/themes/sample_theme/images/pinterest.png">
            </a>

            <!-- reddit
            <a class="sns-link" href="//www.reddit.com/submit?url=" target="_blank" rel="nofollow noopener noreferrer">
                <img src="http://www.irasuto.cfbx.jp/wp-content/themes/sample_theme/images/reddit.png">
            </a> -->
        </div>

        <!-- execCommandは廃止されている機能で利用が非推奨 -->
        <!-- スマートフォンでHTMLタグのonclick属性の挙動がおかしくしっかり作動しないことがあるので、今回はbuttonタグで作成 -->
    </div>
</div>

// 今開いてるページをシェア
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"><script>

<script>
    const questShareButton = document.querySelector('.quest-shareButton');
    const popupWrapper = document.querySelector('.popup-wrapper');
    const popupInside = document.querySelector('.popup-inside'); //追加

    // ボタンをクリックしたときにポップアップを表示させる
    questShareButton.addEventListener('click', () => {
        // 現在のページのURLを取得する
        const textboxHref = location.href;

        popupWrapper.style.display = "block";

        // ボタンをクリックしたときに HTML を生成
        /* テキストボックス要素作成 */
        const divScopeRenderer = document.createElement("input");
        divScopeRenderer.type = 'text';
        divScopeRenderer.classList.add("scope-renderer"); // classの追加

        /* テキストボックスに出力されたURL表示 */
        // divScopeRenderer.innerHTML("textboxHref");
        divScopeRenderer.value = textboxHref;

        /* コピーするボタン要素作成 */
        const divShapeText = document.createElement("div");
        divShapeText.classList.add("shape-text"); // classの追加
        divShapeText.textContent = "コピーする"; // 文字表示

        // execCommandは廃止されている機能で利用が非推奨
        // スマートフォンでHTMLタグのonclick属性の挙動がおかしくしっかり作動しないことがあるので、今回はbuttonタグで作成
        // onclick だとイベントが重複登録され押すごとに追加される
        /* コピーするボタンをクリック後コピーしましたに変更 */
        divShapeText.onclick = function() {
            divShapeText.innerHTML = "コピーされました";
        };

        /* テキストボックス要素配置 */
        popupInside.appendChild(divScopeRenderer); // popupInside (親要素) の末尾に div を追加

        /* コピーするボタン要素配置 */
        popupInside.appendChild(divShapeText); // popupInside (親要素) の末尾に div を追加
    });

    // ポップアップの外側又は「x」のマークをクリックしたときポップアップを閉じる
    popupWrapper.addEventListener('click', e => {
        if ((e.target.id === popupWrapper.id || e.target.id === close.id) && !e.target.classList.contains("shape-text")) {
            popupWrapper.style.display = 'none';
        }
    });

    let url = location.href
    let snsLinks = $(".sns-link")
    for (let i = 0; i < snsLinks.length; i++) {
        let href = snsLinks.eq(i).attr('href');
        //シェアページのURL上書き
        href = href.replace("u=", "u=" + url) //facebook
        href = href.replace("url=", "url=" + url) //LINE,X,ピンタレスト,reddit
        snsLinks.eq(i).attr('href', href);
    }
<script>
Exit Code:
0