https://helgesver.re/_next/static/chunks/pages/articles/archive/20…ebook-comments-tutorial-86e68b1a16df5a65.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[1158],{26090:(e,n,t)=>{"use strict";t.d(n,{T:()=>x});var s=t(37876),a=t(33660),o=t(48230),i=t.n(o),c=t(34824),r=t(91668),l=t(14232);function d({id:e,host:n,repo:a,repoId:o,category:i,categoryId:c,mapping:r,term:p,strict:h,reactionsEnabled:u,emitMetadata:m,inputPosition:x,theme:j,lang:k,loading:g}){let[N,f]=(0,l.useState)(!1);return(0,l.useEffect)(()=>{N||t.e(5485).then(t.bind(t,5485)).then(()=>f(!0))},[]),N?(0,s.jsx)("giscus-widget",{id:e,host:n,repo:a,repoid:o,category:i,categoryid:c,mapping:r,term:p,strict:h,reactionsenabled:u,emitmetadata:m,inputposition:x,theme:j,lang:k,loading:g}):null}let p=new Set(["theme-kde","theme-win95","theme-aqua","theme-y2k","theme-nrk","theme-rema1000","theme-steria","theme-construction"]);function h(){let e=p.has(document.body.className)?"light":"dark",n=`@import url("https://giscus.app/themes/${e}.css");.gsc-header{display:none!important;}`;return`data:text/css;base64,${btoa(n)}`}function u(){let[e,n]=(0,l.useState)("dark");return(0,l.useEffect)(()=>{n(h());let e=new MutationObserver(()=>{n(h())});return e.observe(document.body,{attributes:!0,attributeFilter:["class"]}),()=>e.disconnect()},[]),(0,s.jsx)(d,{repo:"HelgeSverre/blog-comments",repoId:"R_kgDOSERevw",category:"Announcements",categoryId:"DIC_kwDOSERev84C6-o_",mapping:"pathname",reactionsEnabled:"0",emitMetadata:"0",inputPosition:"top",theme:e,lang:"en",loading:"lazy"})}let m={pre:function({children:e,...n}){let t=(0,l.useRef)(null),[a,o]=(0,l.useState)(!1),[i,c]=(0,l.useState)(!0),r=async()=>{let e=t.current?.innerText??"";try{if(!navigator.clipboard)return void c(!1);await navigator.clipboard.writeText(e),o(!0),setTimeout(()=>o(!1),1500)}catch{c(!1)}};return(0,s.jsxs)("div",{className:"code-block",children:[(0,s.jsx)("pre",{ref:t,...n,children:e}),i&&(0,s.jsx)("button",{type:"button",className:"code-block__copy",onClick:r,"aria-label":a?"Copied":"Copy code",children:a?"Copied!":"Copy"})]})}};function x({children:e,meta:n,isRssFeed:t=!1}){let o=(0,c.useRouter)();if(t)return e;let l=n?.slug??function(e){let n=(e?.asPath||"").split("?")[0].split("#")[0],t="/articles/";if(n.startsWith(t))return n.slice(t.length).replace(/\/$/,"")}(o),d=new Date(n.date)<=new Date(2022,1,1);return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(a.G,{title:`${n.title} - Helge Sverre`,headline:n.title,description:n.description,path:l?`/articles/${l}`:void 0,image:l?`/og/article-${l}.png`:void 0,imageAlt:n.title,kind:"BlogPosting",date:n.date,modified:n.dateModified,author:n.author}),(0,s.jsx)("div",{style:{marginBottom:"8px"},children:(0,s.jsx)(i(),{href:"/articles",style:{color:"#667788",fontSize:"10px"},children:"\xab Back to articles"})}),d&&(0,s.jsxs)("div",{className:"old-post-disclaimer",children:[(0,s.jsx)("b",{children:"Content Notice!"})," This post is really old, and no longer reflects my skill level, views or opinions. It is made available here for archival purposes (it was originally on my old WordPress blog). Keep that in mind when you read the contents within."]}),(0,s.jsx)("div",{className:"content-header",children:n.title}),(0,s.jsx)("div",{style:{color:"#666688",fontSize:"10px",marginTop:"4px",marginBottom:"12px"},children:function(e){if(!e)return"No date";let n=new Date(`${e}T00:00:00Z`);return isNaN(n.getTime())?"Invalid date":n.toLocaleDateString("en-US",{day:"numeric",month:"long",year:"numeric",timeZone:"UTC"})}(n.date)}),(0,s.jsx)("div",{className:"article-content",children:n.disableCodeCopy?e:(0,s.jsx)(r.x,{components:m,children:e})}),!1!==n.comments&&(0,s.jsx)("div",{id:"comments",style:{marginTop:"24px"},children:(0,s.jsx)(u,{})}),(0,s.jsx)("br",{}),(0,s.jsx)("hr",{}),(0,s.jsx)("div",{style:{marginTop:"8px"},children:(0,s.jsx)(i(),{href:"/articles",style:{color:"#667788",fontSize:"10px"},children:"\xab Back to articles"})}),(0,s.jsx)("br",{})]})}},35323:(e,n,t)=>{(window.__NEXT_P=window.__NEXT_P||[]).push(["/articles/archive/2013/04/gamesitescript-facebook-comments-tutorial",function(){return t(60608)}])},60608:(e,n,t)=>{"use strict";t.r(n),t.d(n,{default:()=>l,meta:()=>i});var s=t(37876),a=t(91668),o=t(26090);let i={author:"Helge Sverre",title:"GameSiteScript Facebook Comments Tutorial",date:"2013-04-15",description:"Tutorial on integrating Facebook comments system into GameSiteScript gaming websites."},c=e=>(0,s.jsx)(o.T,{meta:i,...e});function r(e){let n={a:"a",code:"code",em:"em",p:"p",pre:"pre",span:"span",strong:"strong",...(0,a.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(n.p,{children:["For those of you that doesn't know, GameSiteScript is a Arcade Site Script for making your own Arcade Sites, you can buy\nthe Script over at ",(0,s.jsx)(n.a,{href:"http://GameSiteScript.com",title:"Good Arcade Script",children:"GameSiteScript.com"})]}),"\n",(0,s.jsx)(n.p,{children:"I have found a very easy way to add Facebook comments into the game pages on your GameSiteScript sites and I wanted to\nshare the information with anyone that might want to have this feature."}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.strong,{children:"Tutorial:"})}),"\n",(0,s.jsxs)(n.p,{children:['1. Adding Facebook Admin MetaTag First you need to add the "facebook admin metatag" into your\xa0',(0,s.jsx)(n.strong,{children:"header.php"}),"\xa0file of\nyour template, This tag will tell facebook that Your account should be the administrator for the comments, so you can\ndelete comments and such."]}),"\n",(0,s.jsxs)(n.p,{children:["You do this by going into your theme folder and opening your header.php page in y

1our favorite editor(Mine is Notepad++)\nMy header.php file is in\xa0",(0,s.jsx)(n.strong,{children:(0,s.jsx)(n.em,{children:"admin/themes/Default/header.php"})}),"\xa0your's shouldn't be that much different.."]}),"\n",(0,s.jsxs)(n.p,{children:["Then you have to add the code right after the ",(0,s.jsx)(n.code,{children:"<head>"})," tag, be sure to not edit anything else as this could break your\nsite:"]}),"\n",(0,s.jsx)(n.p,{children:"HTML Code:"}),"\n",(0,s.jsx)("meta",{property:"fb:admins",content:"INSERT YOUR FACEBOOK ID HERE"}),"\n",(0,s.jsxs)(n.p,{children:['You have to place your own facebook user ID in the content="" tag, you can find your Facebook ID by using this\nwebsite:\xa0',(0,s.jsx)(n.a,{href:"http://findmyfacebookid.com/",children:"http://FindMyFacebookID.com/"})]}),"\n",(0,s.jsxs)(n.p,{children:["2. Adding the Facebook Javascript SDK ",(0,s.jsxs)(n.em,{children:["Still in the\xa0",(0,s.jsx)(n.strong,{children:"header.php"}),"\xa0file..."]})," Then you need to add the Javascript SDK,\nyou do this in much the same fashion, but you have to add this right after the ",(0,s.jsx)(n.code,{children:"<body>"})," tag, here is the code:"]}),"\n",(0,s.jsx)(n.p,{children:"HTML Code:"}),"\n",(0,s.jsx)("i",{}),"\n",(0,s.jsx)(n.pre,{className:"language-html",children:(0,s.jsxs)(n.code,{className:"language-html",children:[(0,s.jsxs)(n.span,{className:"token tag",children:[(0,s.jsxs)(n.span,{className:"token tag",children:[(0,s.jsx)(n.span,{className:"token punctuation",children:"<"}),"div"]})," ",(0,s.jsx)(n.span,{className:"token attr-name",children:"id"}),(0,s.jsxs)(n.span,{className:"token attr-value",children:[(0,s.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,s.jsx)(n.span,{className:"token punctuation",children:'"'}),"fb-root",(0,s.jsx)(n.span,{className:"token punctuation",children:'"'})]}),(0,s.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,s.jsxs)(n.span,{className:"token tag",children:[(0,s.jsxs)(n.span,{className:"token tag",children:[(0,s.jsx)(n.span,{className:"token punctuation",children:"</"}),"div"]}),(0,s.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n",(0,s.jsxs)(n.span,{className:"token tag",children:[(0,s.jsxs)(n.span,{className:"token tag",children:[(0,s.jsx)(n.span,{className:"token punctuation",children:"<"}),"script"]}),(0,s.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,s.jsx)(n.span,{className:"token script",children:(0,s.jsxs)(n.span,{className:"token language-javascript",children:["\n  ",(0,s.jsx)(n.span,{className:"token punctuation",children:"("}),(0,s.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,s.jsx)(n.span,{className:"token punctuation",children:"("}),(0,s.jsxs)(n.span,{className:"token parameter",children:["d",(0,s.jsx)(n.span,{className:"token punctuation",children:","})," s",(0,s.jsx)(n.span,{className:"token punctuation",children:","})," id"]}),(0,s.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,s.jsx)(n.span,{className:"token punctuation",children:"{"}),"\n    ",(0,s.jsx)(n.span,{className:"token keyword",children:"var"})," js",(0,s.jsx)(n.span,{className:"token punctuation",children:","}),"\n      fjs ",(0,s.jsx)(n.span,{className:"token operator",children:"="})," d",(0,s.jsx)(n.span,{className:"token punctuation",children:"."}),(0,s.jsx)(n.span,{className:"token method function property-access",children:"getElementsByTagName"}),(0,s.jsx)(n.span,{className:"token punctuation",children:"("}),"s",(0,s.jsx)(n.span,{className:"token punctuation",children:")"}),(0,s.jsx)(n.span,{className:"token punctuation",children:"["}),(0,s.jsx)(n.span,{className:"token number",children:"0"}),(0,s.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,s.jsx)(n.span,{className:"token punctuation",children:";"}),"\n    ",(0,s.jsx)(n.span,{className:"token keyword control-flow",children:"if"})," ",(0,s.jsx)(n.span,{className:"token punctuation",children:"("}),"d",(0,s.jsx)(n.span,{className:"token punctuation",children:"."}),(0,s.jsx)(n.span,{className:"token method function property-access",children:"getElementById"}),(0,s.jsx)(n.span,{className:"token punctuation",children:"("}),"id",(0,s.jsx)(n.span,{className:"token punctuation",children:")"}),(0,s.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,s.jsx)(n.span,{className:"token keyword control-flow",children:"return"}),(0,s.jsx)(n.span,{className:"token punctuation",children:";"}),"\n    js ",(0,s.jsx)(n.span,{className:"token operator",children:"="})," d",(0,s.jsx)(n.span,{className:"token punctuation",children:"."}),(0,s.jsx)(n.span,{className:"token method function property-access",children:"createElement"}),(0,s.jsx)(n.span,{className:"token punctuation",children:"("}),"s",(0,s.jsx)(n.span,{className:"token punctuation",children:")"}),(0,s.jsx)(n.span,{className:"token punctuation",children:";"}),"\n    js",(0,s.jsx)(n.span,{className:"token punctuation",children:"."}),(0,s.jsx)(n.span,{className:"token property-access",children:"id"})," ",(0,s.jsx)(n.span,{className:"token operator",children:"="})," id",(0,s.jsx)(n.span,{className:"token punctuation",children:";"}),"\n    js",(0,s.jsx)(n.span,{className:"token punctuation",children:"."}),(0,s.jsx)(n.span,{className:"token property-access",children:"src"})," ",(0,s.jsx)(n.span,{className:"token operator",children:"="})," ",(0,s.jsx)(n.span,{className:"token string",children:'"//connect.facebook.net/en_US/all.js#xfbml=1"'}),(0,s.jsx)(n.span,{className:"token punctuation",children:";"}),"\n    fjs",(0,s.jsx)(n.span,{className:"token punctuation",children:"."}),(0,s.jsx)(n.span,{className:"token property-access",children:"parentNode"}),(0,s.jsx)(n.span,{className:"token punctuation",children:"."}),(0,s.jsx)(n.span,{className:"token method function property-access",children:"insertBefore"}),(0,s.jsx)(n.span,{className:"token punctuation",children:"("}),"js",(0,s.jsx)(n.span,{className:"token punctuation",children:","})," fjs",(0,s.jsx)(n.span,{className:"token punctuation",children:")"}),(0,s.jsx)(n.span,{className:"token punctuation",children:";"}),"\n  ",(0,s.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,s.jsx)(n.span,{className:"token punctuation",children:")"}),(0,s.jsx)(n.span,{className:"token punctuation",children:"("}),(0,s.jsx)(n.span,{className:"token dom variable",children:"document"}),(0,s.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,s.jsx)(n.span,{className:"token string",children:'"script"'}),(0,s.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,s.jsx)(n.span,{className:"token string",children:'"facebook-jssdk"'}),(0,s.jsx)(n.span,{className:"token punctuation",children:")"}),(0,s.jsx)(n.span,{className:"token punctuation",children:";"}),"\n"]})}),(0,s.jsxs)(n.span,{className:"token tag",children:[(0,s.jsxs)(n.span,{className:"token tag",children:[(0,s.jsx)(n.span,{className:"token punctuation",children:"</"}),"script"]}),(0,s.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n"]})}),"\n",(0,s.jsxs)(n.p,{children:["3. Inserting the Widget Code in your play.php file After you have done that you need to edit your play.php file, this\nis the page we want our Facebook comment widget in, the file is located in your themes folder:\n",(0,s.jsx)(n.strong,{children:(0,s.jsx)(n.em,{children:"admin/themes/Default/play.php"})})]}),"\n",(0,s.jsx)(n.p,{children:'Now look for the DIV called "inforight", right under the closing div tag of that Div you need to add this code:'}),"\n",(0,s.jsx)(n.p,{children:"HTML Code:"}),"\n",(0,s.jsx)(n.pre,{className:"language-html",children:(0,s.jsxs)(n.code,{className:"language-html",children:['<div class="fb-comments" data-href="',(0,s.jsx)(n.span,{className:"token prolog",children:"<?php echo \"http://\".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']; ?>"}),'" data-width="935" data-num-posts="10" data-colorscheme="dark">',(0,s.jsxs)(n.span,{className:"token tag",children:[(0,s.jsxs)(n.span,{className:"token tag",children:[(0,s.jsx)(n.span,{className:"token punctuation",children:"</"}),"div"]}),(0,s.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n"]})}),"\n",(0,s.jsx)(n.p,{children:"Code Explanation"}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:(0,s.jsx)(n.code,{children:"<?php echo \"http://\".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']; ?>"})}),"\xa0in the script just means that it will\ndisplay the comments for the current URL that you are on(instead of specifying it manually as the official Facebook code\nwants you to do.)."]}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:'data-width="935"'}),"\xa0Specifies the width of the comment widget, I've set it to 935px, in the Default theme it should fit\nperfectly, but if you are running any other theme you might have to adjust it slightly."]}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:'data-num-posts="10"'}),"\xa0Specifies how many comments you want to show on one page at the time, somewhere around 5 - 10\nshould be sufficient in my opinion."]}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:'data-colorscheme="dark"'}

1),'\xa0Specifies the color scheme, facebook\'s "dark" theme works perfectly with the Default theme\nin GSS.']}),"\n",(0,s.jsx)(n.p,{children:"Then you should be good to go!"})]})}function l(e={}){return(0,s.jsx)(c,{...e,children:(0,s.jsx)(r,{...e})})}},91668:(e,n,t)=>{"use strict";t.d(n,{R:()=>i,x:()=>c});var s=t(14232);let a={},o=s.createContext(a);function i(e){let n=s.useContext(o);return s.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function c(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:i(e.components),s.createElement(o.Provider,{value:n},e.children)}}},e=>{e.O(0,[636,6593,8792],()=>e(e.s=35323)),_N_E=e.O()}]);