Facebook Feed Dialogue showing code instead of content - facebook

Question

I have been struggling to get a facebook "post to wall" dialogue to show on my site but all it shows is code on that page.
Here is what should happen:
A visitor comes to my site and clicks a custom "Share" button I made
The visitor is then redirected them to the feed dialogue box on a different page and they share my page.
They then proceed to download what I offered.
I made a facebook app and then copied the code from the facebook developer page and filled out everything I need, but anytime I click the share it takes me to a page with all the code instead.

Answer 1

Well try this, load the javascript SDK:
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR_APP_ID', // App ID
channelUrl : 'URL_TO_CHANNEL_FILE', // Channel File optional
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
Then add a listener to your button, let's say your button has the id, bt-download
<script>
$(document).on("click", "#bt-download", function(){
var obj = {
method: 'feed',
link: 'link to your webpage',
picture: "url to the picture you want size 90px x 90px",
name: 'the name you want',
caption: 'your caption',
description: 'your description',
display: 'popup'
};
function callback(response) {
if (response && response.post_id) {
alert('Post was published.');
//here you can redirect the user to the download page
} else {
alert('Post was not published.');
}
}
FB.ui(obj, callback);
});
</script>