Facebook share opens in box

How to add facebook share pop up window to website

This page is for do-it-yourselfer who is cobbing together a website using Kompozer or other codewriter... and  here's how I added a share button, with pop up window. And it works.

If you're professional web developer, then this information is not best solution ... but you're busy, and little guys like me are too low ... so what can ordinary folks do?
Here it is...


Add meta-tags to code
Where to locate.: Open your source code. In the head section between <Head> and </Head>
Meta tags tell Facebook crawler information about your page so it appears on Facebook when page is shared
Each of your webpages will have different metal tag entries, but the format is the same for each page.

Step 1: Copy and paste following generic Meta-tags into head section.
    <meta property="og:url"           content="" />
    <meta property="og:type"          content="website" />
    <meta property="og:title"         content="Your Website Title" />
    <meta property="og:description"   content="Your description" />
    <meta property="og:image"         content="" />

Step 2: You will edit each meta tag so it is customized to your specific page.
For example here is meta property filled out for this specific webpage (not for my website, but for this specific page)
  <meta property="og:url"        content="">
  <meta property="og:type"       content="website">
  <meta property="og:title"         content="How to add facebook share button to website">
  <meta property="og:description"      content="How to add Facebook share button to website">
  <meta property="og:image"      content="">

Explain each.
1) <meta property="og:url"  .... you want to put your webpage addess between the quotation marks as shown in example above.
Click Control+U to see webcode on any webpage
For example your site might have main homepage and other pages.
My main page is This specific page is
I want this specific webpage to appear between the quotation marks as shown in example above

2) <meta property="og:type" .... you can choose website, or article to enter between quotation marks.
I put website. But don't know. Maybe the difference is that an article is something happening right now like a news event, and a website is more static?

3) <meta property="og:title"  ... this is title of your page
The title of this specific page is: How to add Facebook share button to website
If your title is: How to plant tomatoes, then put that between the quotation marks. Use correct capitaliztion and spelling because this will show on Facebook.

4) <meta property="og:image" ... this is the image that you want facebook to post when somebody shares your webpage on Facebook
For example my image is titled Square-D-in-subpanel-2-029-500
The image is .jpg format so it is Square-D-in-subpanel-2-029-500.jpg
The image is located in a folder on my site that is titled; images
The site is ... and the image is contained in the images folder... and the imagre is titled: Square-D-in-subpanel-2-029-500 ... and the image is .jpg
So the exact address for image is:

Facebook recommend images with 1:9 to 1 ratio with minimum width of 600 px, and recommends .png format instead of .jpg
So pull out your gimpshop or photoshop elements and resize the thing, and save in .png format... I didn't do that. We'll see what happens.
Discovered that you can also add one image to webpage... then post webpage ... then go back and edit webpage, add more photos if you want... Facebook will select first image you posted.
Maybe once the crawler finds my meta-tags, the image will change to the one I selected.
ScriptCopy and paste following script into code. Locate just below the <Body> tag
<script type="text/javascript">
// Popup window code
function newPopup(url) {
popupWindow =

If your code does not have this code, then it will not work.
How I discoverted the script was needed:
I made a facebook share button, the copy-pasred the share button into a second page, changed the link, filled out meta-properties.
For hours the dang thing worked on first page but not the second page.... because I forgot to add the script to the second page. Lesson learned, I hope.
Facebook Image
Image link
Page image[Circuit Breakers]=YourPostSubject&p[Circuit breaker resources]=YourPostSummary&p[images[0]=YourImgURL&p[]=

Current URL

javascript:newPopup('[Circuit Breakers]=YourPostSubject&p[Circuit breaker resources]=YourPostSummary&p[images[0]=YourImgURL&p[]=');


New page

<meta property="og:type" content="article" />
<meta property="og:title" content="Mexican food chain Taco John&#039;s plans 15 central Indiana locations" />
<meta property="og:url" content="" />
<meta property="og:description" content="INDIANAPOLIS, Ind. (Aug. 28, 2015) – Look out, Taco Bell, Taco John’s is coming to Indianapolis. The Wyoming-based Mexican food chain plans to build up to 15 restaurants in the Indianapolis area. R..." />
<meta property="article:published_time" content="2015-08-28T11:46:04+00:00" />
<meta property="article:modified_time" content="2015-08-28T11:46:04+00:00" />
<meta property="og:site_name" content="Fox 59" />
<meta property="og:image" content="" />
<meta property="og:image:width" content="770" />
<meta property="og:image:height" content="434" />
<meta property="og:locale" content="en_US" />
<meta name="twitter:site" content="@fox59" />
<meta name="twitter:image:src" content="" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:creator" content="@fox59" />
<meta property="article:publisher" content="" />
<meta name="twitter:app:id:iphone" content="586939626" />

<meta property="og:image" content=""/>