ក្នុងការផ្តល់លទ្ធភាពអោយអ្នកអានអាចធ្វើការអធិប្បាយផ្សេងៗទៅលើការផ្សាយនានា ដែលភាសាអង់គ្លេសហៅថា comment យើងអាចបញ្ចូលផ្ទាំងសំរាប់ធ្វើបទអធិប្បាយរបស់ក្រុមហ៊ុន Meta ឬ Facebook ។ លើសពីនេះទៀត យើងក៏អាចប្រើប្រាស់រូបចែករំលែក (share) របស់ក្រុមហ៊ុន Facebook បានដែរ ដោយចំលងយកកូដពីគេហទំព័ររបស់ក្រុមហ៊ុននេះ នៅត្រង់អាស័យដ្ឋាន https://developers.facebook.com/docs/plugins/comments/ និងមួយនេះ https://developers.facebook.com/docs/plugins/share-button/ ។
<div class="fb-share-button" data-href=`https://khmerweb-static-blog.netlify.app/post/${post.slug}` data-layout="" data-size="">
<a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fkhmerweb-static-blog.netlify.app%2F&src=sdkpreparse" class="fb-xfbml-parse-ignore">Share</a>
</div>
<div class="fb-comments" data-href=`https://khmerweb-static-blog.netlify.app/post/${post.slug}` data-width="100%" data-numposts="5"></div>
ជាលទ្ធផល គំរូទំព័រការផ្សាយមានទំរង់ដូចខាងក្រោមនេះ៖
<!--src/layouts/Post.astro-->
---
import { getEntry } from 'astro:content'
const { post } = Astro.props
const { Content } = await post.render()
const author = await getEntry(post.data.author)
const videos = await getEntry(post.data.videos)
---
<section class="Ad region">
<img src="/images/ad.jpg" />
<img src="/images/ad.jpg" />
</section>
<div id="fb-root"></div>
<script is:inline async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v14.0&appId=3245867309046703&autoLogAppEvents=1" nonce="uHaMaoD7"></script>
<section class="Post region">
<div class="main">
<h3 class="title">{post.data.title}</h3>
<div class="categories">
<span>ជំពូកៈ {post.data.categories.join(', ')}</span>
<span>{post.data.pudate.toLocaleDateString('it-IT')}</span>
</div>
<div class="author">
<span>អ្នករៀបរៀងៈ {author.data.name}</span>
</div>
<div class="video" data-videos={JSON.stringify(videos?.data.videos)}>
<div class="screen"></div>
<div class="playlist" data-title={post.data.title}></div>
</div>
<script is:inline src="/scripts/setplayer.js"></script>
<script is:inline>
let clicked = 0
let rawVideos = $('.Post .main .video').attr('data-videos')
const title = $('.Post .main .video .playlist').attr('data-title')
const videos = JSON.parse(rawVideos)
for(let index in videos){
let ending = ''
if(index == videos.length-1){
ending = videos[index].status
}
let result = `<div id="part${index}" class="part" onClick="setScreen(videos[${index}], ${index},true)">${title} part ${(++index)} ${ending}</div>`
$('.playlist').append(result)
}
setScreen(videos[0],0,false)
</script>
<div class="content"><Content/></div>
<div class="fb-share-button" data-href=`https://khmerweb-static-blog.netlify.app/post/${post.slug}` data-layout="" data-size=""><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fkhmerweb-static-blog.netlify.app%2F&src=sdkpreparse" class="fb-xfbml-parse-ignore">Share</a></div>
<div class="fb-comments" data-href=`https://khmerweb-static-blog.netlify.app/post/${post.slug}` data-width="100%" data-numposts="5"></div>
</div>
<div class="sidebar">
ផ្សាយពាណិជ្ជកម្ម
</div>
</section>
<style is:global>
.Ad{
display: grid;
grid-template-columns: repeat(2, auto);
grid-gap: 10px;
}
.Ad img{
width: 100%;
}
.Post{
margin-top: 20px;
display: grid;
grid-template-columns: 70% auto;
grid-gap: 15px;
}
.Post .main, .Post .sidebar{
background-color: rgb(231, 223, 223);
color: rgb(22, 22, 22);
padding: 15px;
}
.Post .sidebar{
text-align: center;
padding: 0;
}
.Post .main .title{
font: 18px/1.5 Oswald, Koulen;
margin-bottom: 20px;
}
.Post .main .categories span:nth-child(2){
float: right;
}
.Post .main .author{
margin-bottom: 30px;
}
.Post .main .video .screen div{
position: relative;
padding-top: 56.25%;
border: 1px solid white;
border-bottom: none;
}
.Post .main .video .screen div iframe{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.Post .main .video .playlist{
max-height: 405px;
overflow: auto;
margin-bottom: 20px;
border: 1px solid white;
}
.Post .main .video .playlist .part{
text-align: left;
padding: 10px;
color: var(--color);
display: block;
height: auto;
font-size: 16px;
background: var(--body);
border: 1px solid white;
border-top: none;
}
.Post .main .video .playlist .part:last-child{
margin-bottom: 0;
}
.Post .main .video .playlist .part:hover{
cursor: pointer;
opacity: .7;
}
@media only screen and (max-width:600px){
.Ad{
grid-template-columns: 100%;
}
.Post{
grid-template-columns: 100%;
}
}
</style>
