Home
Search waterheatertimer.org / all results
Search using Find button  

 Tweet button  
Waterheatertimer on Twitter 		How to add facebook share pop up window to website

Facebook share opens in box
This page is for do-it-yourselfer who is cobbing together a website using Kompozer or other code writer... and  here's how I added a share button, with pop up window. And it works.
Click the share button top left of this page, and it opens a pop up window.
If it opens too large, then use scroll wheel + Ctrl key to make smaller.

If you're professional web developer, then this information is probably too simple ... but you're busy, and little guys like me are too low ... so what can ordinary folks do?
Here it is...
Meta-tags
Facebook meta tags
Larger image Add meta-tags to code in head section
Where to locate.: Open your source code. Add code to any line 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 meta tag entries, but the format is the same for each page.

Step 1: Typical meta tages you already have
  <meta name="Name of your web page">
  <meta name="keywords" content="the key words associated with your page: such as: do it yourself project">
  <meta name="description" content="description of your page">
  <meta content="What topic your page covers">
  <title>Your page title</title>

Step 1: Copy and paste following generic Meta-tags into head section. These are for facebook
    <meta property="og:url"           content="http://www.your-domain.com/your-page.html" />
    <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="http://www.your-domain.com/path/image.jpg" />
  <meta property="og:image:secure_url"      content="http://www.your-domain.com/path/image.jpg">
  <meta property="og:image:type" content="image/jpg">
  <meta property="og:image:width" content="number of pixels wide">
  <meta property="og:image:height" content="number of pixels height">



Step 2: 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)
Remember, each page on your website will be filled out to match that page. All web code must have exact syntax as shown.
  <meta property="og:url"        content="http://waterheatertimer.org/How-to-add-facebook-share-pop-up-window-to-website.html">
  <meta property="og:type"       content="website">
  <meta property="og:title"         content="How to add facebook pop up window to website">
  <meta property="og:description"      content="How to add Facebook share pop-up window button to website">
  <meta property="og:image"      content="http://waterheatertimer.org/images/Facebook-share-opens-in-a-box.png">
  <meta property="og:image:secure_url"      content="http://waterheatertimer.org/images/Facebook-share-opens-in-a-box.png">
  <meta property="og:image:type" content="image/pgn">
  <meta property="og:image:width" content="600">
  <meta property="og:image:height" content="353">

Here is approximate explanation of each meta property
1) <meta property="og:url"  .... This is the url of webpage: put your webpage address between the quotation marks as shown in example above.
Click Control+U to see web code on any webpage
For example your site might have main homepage and other pages.
My main page is http://waterheatertimer.org.html. But this specific page is http://waterheatertimer.org/How-to-add-facebook-share-button-to-website.html
I want the specific webpage to appear between the quotation marks on the meta og:url shown in example above

2) <meta property="og:type" .... This the type of thing you are posting: you can choose website, or article to enter between quotation marks.
I put website. But don't know. Maybe the difference is that article is something happening right now like a news event, and 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 pop-up window to website
If your title is: How to plant tomatoes, then put that between the quotation marks. Use correct capitalization 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 on Facebook
For example my image is titled Facebook-share-opens-in-a-box... with no spaces. It is best to upload images and other content with no spaces.
The image is .png format. It is not .jpg or .gif. So the image is titled ... Facebook-share-opens-in-a-box.png
The image is located in a folder on my site that is titled; images
The site is http://waterheatertimer.org/ ... and the image is contained in the images folder... and the image is titled: Facebook-share-opens-in-a-box.png ... and the image is .png
So the exact address for image is :http://waterheatertimer.org/images/Facebook-share-opens-in-a-box.png / and this is added to the og:image meta tag

5) <meta property="og:image:secure_url" ... this is the image again, same as #4 above

6) <meta property="og:image:type" ... this is the image format: .pgn or .jpg

7) <meta property="og:image:width"  & <meta property="og:image:height" specify the size of the your image

Facebook recommends images with 1:9 to 1 ratio with minimum width of 600 px, and recommends .png format instead of .jpg
So pull out your free gimpshop or $40 photoshop elements program and resize the thing, and save in .png format... I didn't do that exactly.
My image is 600 px wide and .png format but probably not 1:9 to 1 ratio. We'll see what happens.

Discovered that you can also add one single 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..
On on of my other pages, facebook selected random image and not one I wanted.
The facebook rule is that facebook will grab the first image it finds closest to 600 pixels wide... the image it grabbed was 550 px, and other images were 500 px wide.
So really I don't know... Maybe once the crawler finds my meta-tags, the image will change to the one I selected.
Or maybe my understanding of meta is wrong and you need to request the facebook debugger.
You need THREE things to make the facebook share button open a pop-up window
1) Script to activate the button so it opens a pop up window (same script works with facebook and twitter)
2) Facebook share image that looks like a button
3) Link code attached to image that opens the pop-up window, and shows facebook in the window
Script
add facebook button
Larger image

Copy and paste following script into code. Locate just below <body>. See image
<body> is located just below the end of the head section, </head>

Here's what you copy and paste:

<script type="text/javascript">
// Popup window code
function newPopup(url) {
popupWindow = window.open(
url,'popUpWindow','height=300,width=400,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes')
}
</script>

Ok done...
If your code does not have this script, then the share button will not work.
I added the script to my page, then somehow deleted it... and then spent two hours trying to figure out why it didn't work.
Finally copied the page code into word document and looked at it... and discovered there was no script.
The script is what makes the thing activate... without the script, the button does nothing.
Facebook share image

This is just an image
It does not have link that makes it into a button		 Make a facebook share image using photoshop elements. Or right-click and save this one to your desktop and use it.
Open any facebook page. Use scroll wheel and ctrl key to enlarge page. Use print-screen key located top right of keyboard, gives screen grab of monitor.
Go to photoshop elements... select new... and then select image from clipboard.
Crop and then Resize to 135 pixels wide... or larger... and save.
My facebook share image is titled: Facebook-share6
It is .jpg file: Facebook-share6.jpg
It is located in images folder in my website, so URL is http://waterheatertimer.org/images/Facebook-share6.jpg
Link code: Turn facebook share image into button that opens a box
facebook button to open in box
Larger image
You want the facebook share image to work as a button that opens a pop-up window with facebook.
1) Copy and paste the following code. This paste MUST be located below the script. See image
This will add the facebook share image plus a link. The link is attached to the image. The link is what opens the box, and makes sure facebook appears in the box.

<a
 href="javascript:newPopup('https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fwaterheatertimer.org/
How-to-add-facebook-share-pop-up-window-to-website.html');">
<img
 alt=""
 src="http://waterheatertimer.org/images/Facebook-share6.jpg"
 style="border: 0px solid ; width: 135px; height: 52px;"></a>

2) Then replace: http://waterheatertimer.org/How-to-add-facebook-share-pop-up-window-to-website.html with your website URL

Notice that http://waterheatertimer.org/How-to-add-facebook-share-pop-up-window-to-website.html
has been replaced with http:%3A%2F%2Fwaterheatertimer.org/How-to-add-facebook-share-pop-up-window-to-website.html
%3A%2F%2F is same as ://
Your code writer might not make same substitution

3) Then replace http://waterheatertimer.org/images/Facebook-share6.jpg with your image URL
Also change dimensions of the image to match your image, or resize as desired.

4) The paste can be made anywhere on the webpage. It must be below the script.
You can add the script lower on the website, as long as this paste is made below the script.
Link code: Turn facebook share image into button that opens on same window as your websiteTo have the button open facebook in same window as your website (instead of pop up box): Copy and paste follwing

'https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fwaterheatertimer.org/How-to-add-facebook-share-pop-up-window-to-website.html"
<img
 alt=""
 src="http://waterheatertimer.org/images/Facebook-share6.jpg"
 style="border: 0px solid ; width: 135px; height: 52px;"></a>

Again, replace my website and image URLs with your website and image URLs
 target="_blank"
Link code: Turn facebook share image into button that opens on different tab


To have the button open facebook in different tab on same browser (instead of pop-up box):: add  target="__blank"
Copy and paste follwing.

'https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fwaterheatertimer.org/How-to-add-facebook-share-pop-up-window-to-website.html"
 target="__blank"<img
 alt=""
 src="http://waterheatertimer.org/images/Facebook-share6.jpg"
 style="border: 0px solid ; width: 135px; height: 52px;"></a>

Again, replace my website and image URLs with your website and image URLs

+++++++++
Another little problem encountered when trying to get pop up box to work was target="__blank"
target="__blank" is added tp link code when you want the link to open in a new tab.
The first share button that I made was just getting facebook share to open in same window.
Then I changed the code by adding target="__blank" so facebook share opened in another tab, instead of opening in same window
Then I changed code again tring to get the pop-up box. But when I added the 'open in pop-up box' script and link code, it didn't work.
After experimenting, I discovered that target="__blank" was inadvertently included in the link code due to copy-paste without thinking  ... I guess the code wasn't perfect, so it did nothing.
I removed target="__blank" from the pop up code and it worked
Script, image and link code: Gives you buttons and code for pop-up windows for both Facebook and Twitter


These are just images/ save to your desktop


Copy and paste following to add both facebook and twitter pop-up boxes: Paste below <Body>
This includes all 3 things needed for both twitter and facebook: the script, the button images, and the link code... the whole thing in one copy-paste

<script type="text/javascript">
// Popup window code
function newPopup(url) {
popupWindow = window.open(
url,'popUpWindow','height=300,width=400,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes')
}</script>
<a
 href="JavaScript:newPopup('https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fwaterheatertimer.org/Circuit-breakers.html');"><img
 style="border: 0px solid ; width: 135px; height: 52px;"
 src="http://waterheatertimer.org/images/Facebook-share6.jpg"
 alt=""></a> &nbsp;<a
 href="javascript:newPopup('https://twitter.com/intent/tweet?text=http://waterheatertimer.org/Circuit-breakers.html');"><img
 style="border: 0px solid ; width: 113px; height: 52px;"
 alt="Tweet button"
 src="http://waterheatertimer.org/images/Tweet-button.jpg"></a>

Replace http://waterheatertimer.org/Circuit-breakers.html with your webpage URL
And replace http://waterheatertimer.org/images/Facebook-share6.jpg with your button image URL
Replace http://waterheatertimer.org/images/Tweet-button.jpg with your button image URL

You need different meta-tags for twitter
I haven't gotten that far yet... too many projects. Writing another book, answering emails, updating webpages ... slow but sure... etc.
Search waterheatertimer.org / all results
Search using Find button  

 Tweet button  
Here is Google search + my personal link for a search page + Facebook + Twitter + Reddit
I added vvvvvvvvvvvvvvv so I could keep track of it after pasting into each webpage... so I could go back and change the URL to match each page
Facebook is still selecting random photo... despite the meta og image

<div id="myDiv" name="myDiv"
 title="Example Div Element">
      <h5>vvvvvvvvvvvvvvvvvvvvvv<br>
      </h5>
      <h5>Search waterheatertimer.org / all results</h5>
      </div>
      <script> (function() {
var cx = '008436663528501336739:wrj5qymy2yc';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
      </script>
      <gcse:search></gcse:search>
      <div id="myDiv" name="myDiv"
 title="Example Div Element">
      <h5>Search using&nbsp;<a
 href="http://waterheatertimer.org/Search-waterheatertimer.org.html"
 target="_blank"><img
 style="border: 0px solid ; width: 67px; height: 24px;"
 alt="Find button"
 src="http://waterheatertimer.org/images/Find-button-1.jpg"></a>&nbsp;&nbsp;</h5>
      </div>
      <br>
      <script type="text/javascript">
// Popup window code
function newPopup(url) {
popupWindow = window.open(
url,'popUpWindow','height=300,width=400,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes')
}</script>
      <a
 href="JavaScript:newPopup('https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fwaterheatertimer.org/Programmable.html');"><img
 style="border: 0px solid ; width: 63px; height: 24px;"
 src="http://waterheatertimer.org/images/Facebook-share6.jpg"
 alt=""></a> &nbsp;<a
 href="javascript:newPopup('https://twitter.com/intent/tweet?text=http://waterheatertimer.org/Programmable.html');"><img
 style="border: 0px solid ; width: 55px; height: 24px;"
 alt="Tweet button"
 src="http://waterheatertimer.org/images/Tweet-button.jpg"></a>&nbsp;&nbsp;<a
 href="javascript:newPopup('https://www.reddit.com/login?dest=https%3A%2F%2Fwww.reddit.com%2Fsubmit');"><img
 style="border: 0px solid ; width: 63px; height: 24px;"
 src="http://waterheatertimer.org/images/Reddit-button-24.jpg"
 alt=""></a><br>
vvvvvvvvvvvvvvvvvvvvvvv
<meta property="og:title" content="Awesome, Inc. – We're even more awesome.">
<meta property="og:description" content="Awesome's mission is to take cool to a whole new level.">
<meta property="og:image" content="http://YOURWEBSITE.com/YOURIMAGE.png">
<meta property="og:image:secure_url" content="https://YOURWEBSITE.com/YOURIMAGE.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1500">
<meta property="og:image:height" content="1500">
 <a <!--...your link code here -->
   <input type="button" onClick="window.location.href='{% url tiptop.views.client_items name.pk %}'" value="Add item"/></a>
Buy from my affiliate links every time/ thanks:
Amazon
As an Amazon Associate I earn from qualifying purchases
Enter Amazon from any link on my site, fill cart with any item ... purchases pay small commission

E-mail: geno03245w@gmail.com
My response might end up in spam folder, check email folders
Waterheatertimer on Twitter
Message thru facebook