Social Buttons do not share the current page info

Question

I have been attempting to create social buttons that both capture the current page url automatically and the page description too.

i have gone through numerous questions & answers (found within stackoverflow) and followed the steps but I have come to some sort of problem with the social buttons behavior.

1. facebook: it pops up a new window and prompts me 'TO ENTER AN URL TO SHARE'. The new page's url is: https://www.facebook.com/sharer/sharer.php?u

2. twitter: simply asks me: 'WHATS HAPPENING?'. The popup url is: https://twitter.com/intent/tweet?text=&url=about%3Ablank&original_referer=

3. pinterest: in the description area, it just appends: @Url.Encode(PageTitle) The popurl is: https://www.pinterest.com/pin/create/button/?url=%40Url.Encode(Request.Url.ToString())&description=%40Url.Encode(PageTitle)

In short, none of the buttons seem to be generating any page url nor descriptions and titles.

Here are my files: index.html

    <a class="soc-facebook popup" href="javascript:window.location=%22http://www.facebook.com/sharer.php?u=%22+encodeURIComponent(document.location)+%22&#38;t=%22+encodeURIComponent(document.title)" title="Share on Facebook..." target="_blank"></a>
    <a class="soc-twitter popup" href="javascript:window.location=%22https://twitter.com/share?url=%22+encodeURIComponent(document.location)+%22&text=%22+encodeURIComponent(document.title)" target="_blank"></a>
    <a class="soc-pinterest popup" href="http://pinterest.com/pin/create/button/[email protected](Request.Url.ToString())&[email protected](PageTitle)" target="_blank" title="Pin it"></a>
    <a class="soc-google popup" href="https://plusone.google.com/_/+1/confirm?hl=en&url=<?php if(is_home()){echo home_url();}else{the_permalink();} ?>" target="_blank" title="Plus one this page on Google"></a>
    <a class="soc-linkedin soc-icon-last popup" href="http://www.linkedin.com/shareArticle?mini=true&url=<?php if(is_home()){echo home_url();}else{the_permalink();} ?>" target="_blank"></a>

pop.js

$(function() {
    // link selector and pop-up window size
    var Config = {
        Link: "a.popup",
        Width: 500,
        Height: 500
};

// add handler links
var slink = document.querySelectorAll(Config.Link);
for (var a = 0; a < slink.length; a++) {
    slink[a].onclick = PopupHandler;
}

// create popup
function PopupHandler(e) {

    e = (e ? e : window.event);
    var t = (e.target ? e.target : e.srcElement);

    // popup position
    var
        px = Math.floor(((screen.availWidth || 1024) - Config.Width) / 2),
        py = Math.floor(((screen.availHeight || 700) - Config.Height) / 2);

    // open popup
    var popup = window.open(t.href, "popup", 
        "width="+Config.Width+",height="+Config.Height+
        ",left="+px+",top="+py+
        ",location=0,menubar=0,toolbar=0,status=0,scrollbars=1,resizable=1");
    if (popup) {
        popup.focus();
        if (e.preventDefault) e.preventDefault();
        e.returnValue = false;
    }

    return !!popup;
    }

}());

where could i be possibly going wrong?

Thanks!

Answer 1

The trick here is to add Open Graph metatags to the page that is being shared. These metatags are used by Facebook to capture page metadata. If you don't include metatags on the page then you can explicitly enter parameters for the Facebook sharer at least.

See this page for a synopsis on how to include these tags:

http://ogp.me/