 | How to add facebook share pop up window to websiteThis 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... |
Meta-tags | 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="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" /> 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="http://waterheatertimer.org/How-to-add-facebook-share-button-to-website.html"> <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="http://waterheatertimer.org/images/Square-D-in-subpanel-2-029-500.jpg"> 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 http://waterheatertimer.org.html. This specific page is http://waterheatertimer.org/How-to-add-facebook-share-button-to-website.html 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 http://waterheatertimer.org/ ... 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: http://waterheatertimer.org/images/Square-D-in-subpanel-2-029-500.jpg 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. |
| Script | Copy and paste following script into code. Locate just below the <Body> tag <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> 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 |
<meta property="og:type" content="article" /> <meta property="og:title" content="Mexican food chain Taco John's plans 15 central Indiana locations" /> <meta property="og:url" content="http://fox59.com/2015/08/28/mexican-food-chain-taco-johns-plans-15-central-indiana-locations/" /> <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="https://tribwxin.files.wordpress.com/2015/08/taco-johns-web.jpg" /> <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="https://tribwxin.files.wordpress.com/2015/08/taco-johns-web.jpg?w=640" /> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:creator" content="@fox59" /> <meta property="article:publisher" content="https://www.facebook.com/WordPresscom" /> <meta name="twitter:app:id:iphone" content="586939626" />
<meta property="og:image" content="http://webgilde.com/en/wp-content/uploads/2013/10/wrong-facebook-image.png"/>