投稿詳細ページのキャプション内のURLをリンク（クリック可能）にしたい

タグの編集ページ内にある「カスタムJavaScript（オプション）」欄に専用のコードを入力することで、URLを自動的にリンクへ変換できます。

【重要】対応タグについて

本機能は「ソーシャル投稿詳細ページ」のタグ専用です。他のタグ形式では動作の保証ができかねますので、あらかじめご了承ください。

■ 設定方法

＜手順１＞

ソーシャル投稿詳細ページタグ内の「カスタムJavaScript(オプション)」セクションを開きます。

＜手順２＞

以下のコードをコピーし、入力エリア（「JavaScriptを入力」と表示されている箇所）へペーストしてください。

Plaintext

document.addEventListener('onLeeepContentsRendered', (event) => {  
    try {  
        const tagId = String(event?.detail?.tag_id || '');  
        if (!tagId) return;  
  
        const root = document.querySelector(`#leeep-embedded-${tagId}`) || document;  
        const captionElement = root.querySelector('.LeeepCaption');  
        if (!captionElement) return;  
  
        const staffPost = event?.detail?.staff_post;  
        if (!staffPost?.caption) return;  
        const text = String(staffPost.caption);  
  
        if (captionElement.dataset.__customJsLinkedSource === text) return;  
  
        const escapeHtml = (s) =>  
            s  
                .replace(/&/g, '&amp;')  
                .replace(/</g, '&lt;')  
                .replace(/>/g, '&gt;')  
                .replace(/"/g, '&quot;')  
                .replace(/'/g, '&#39;');  
  
        const urlPattern = /(https?:\/\/[^\s<>"'`]+|www\.[^\s<>"'`]+)/g;  
  
        let html = escapeHtml(text).replace(urlPattern, (raw) => {  
            const href = /^https?:\/\//.test(raw) ? raw : `https://${raw}`;  
            return `<a href="${href}" target="_blank" rel="noopener noreferrer" style="color:#0066cc;text-decoration:underline;font-size:inherit;line-height:inherit;display:inline;">${raw}</a>`;  
        });  
  
        html = html.replace(/\r?\n/g, '<br>');  
  
        captionElement.innerHTML = html;  
  
        captionElement.dataset.__customJsLinkedSource = text;  
    } catch (e) {  
        console.warn('[CustomJs] caption linkify failed', e);  
    }  
});

＜手順３＞

「保存する」ボタンをクリックしてください。設定が反映され、投稿詳細ページ内のURLが自動的にリンク化されます。

■ 表示イメージ

本記事の「手順2」でご案内したコードをソーシャル投稿詳細ページに埋め込むと、以下の画像のような見え方なります。

※あくまでもこちらの画像は表示イメージとなります。設定される際は、お客様のサイトでのプレビューを必ずお確かめください。