Follow button
You can embed your own posts or unique posts by others in your blog.
And please see the terms and conditions below.
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.loox-follow-button {
display: inline-flex;
align-items: center;
background-color: black; /* ボタンの背景色を黒に設定 */
color: white; /* ボタンの文字色 */
padding: 4px 12px; /* ボタンの上下の余白を少し狭める */
text-align: center;
text-decoration: none;
border-radius: 20px; /* ボタンの角を丸くする */
font-size: 12px; /* 文字の大きさを小さく */
font-family: Arial, sans-serif;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: background-color 0.3s;
overflow: hidden; /* オーバーフローを隠す */
}
.loox-follow-button:hover {
background-color: #333; /* ホバー時の背景色を少し明るく */
}
.loox-follow-button img {
width: 20px; /* ロゴの幅 */
height: 20px; /* ロゴの高さ */
margin-right: 8px; /* ロゴとテキストの間の余白 */
border-radius: 50%; /* ロゴの角を丸くする */
}
</style>
</head>
<body>
<div id="loox-follow-widget"></div>
<script>
function createFollowButton(containerId, profileUrl, username) {
var container = document.getElementById(containerId);
var buttonText = `Follow ${username}`;
var buttonHtml = `
<a href="${profileUrl}" class="loox-follow-button" target="_blank">
<img src="https://static.wixstatic.com/media/b3eff1_39ed323c45d84306814e52239888514e~mv2.png/v1/fill/w_109,h_109,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/b3eff1_39ed323c45d84306814e52239888514e~mv2.png" alt="LOOXロゴ">
${buttonText}
</a>
`;
//LOOXのロゴを表示
container.innerHTML = buttonHtml;
}
var followButtonData = {
profileUrl: "https://looxteam.wixsite.com/loox/ac/loox/user", // ここに実際のプロフィールURLを入力（URL内の"loox"を置き換えます）
username: "@LOOX" // ここに実際のユーザーネームを入力
};
createFollowButton('loox-follow-widget', followButtonData.profileUrl, followButtonData.username);
</script>
</body>
</html>
Step 1
Copy code
Step 2
Read the description on the left side of the code
Change all the green codes.
rules
This code is not open source.Please do not use this code outside of LOOX!