Xへのシェアボタン設置
Next.js
フロントエンド
知識
以下のようにhooksを実装
ts
'use client';
type ShareOptions = {
title: string;
url: string;
hashtags?: string[];
};
export const useXShare = (): { shareToX: (options: ShareOptions) => void } => {
const shareToX = ({
title,
url,
hashtags = ['PaPut'],
}: ShareOptions): void => {
const xIntentUrl = new URL('https://x.com/intent/tweet');
xIntentUrl.searchParams.append('text', `${title}\n`);
xIntentUrl.searchParams.append('url', `${url}\n\n`);
if (hashtags.length > 0) {
xIntentUrl.searchParams.append('hashtags', hashtags.join(','));
}
window.open(
xIntentUrl.toString(),
'XShare',
'width=550,height=420,toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes'
);
};
return { shareToX };
};shareToXを引っ張って使う
ts
const { shareToX } = useXShare();