Share Images in Facebook using Graph API

Steps to Share Images in Facebook using Graph API is given below.

1)Create a Facebook application to get an AppID and Secret key for your Website or Blog. Use the following link to open Facebook developers App site.

https://developers.facebook.com/apps

2)Add App ID,secret key in code and also make reference to DLL for Facebook integration.

Download DLL for FaceBook Integration here

3)Get image Url’s to add in datatable and display them while running the application.

Aspx Code

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
    .info
    {
        background-color: black;
        filter: alpha(opacity=80);
        opacity: 0.8;
        position: absolute;
        display: block;
        text-align: center;
    }
    .info input
    {
        position: relative;
        top: 35px;
    }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        var info = $(".info");
        $(".picture").bind("mouseenter", function () {
            var p = GetScreenCordinates(this);
            $("input", info).attr("rel", this.src);
            info.show();
            info.css("height", $(this)[0].offsetHeight / 2);
            info.css("width", $(this).width());
            info.css({ "left": p.x, "top": p.y + this.offsetHeight - info[0].offsetHeight });
        });
        $(".info a, .info").bind("mouseenter, mousemove, mouseover", function () {
            info.show();
        });
        $(".picture").bind("mouseleave", function () {
            info.hide();
        });
        $("[id*=imgFaceBook]").bind("click", function () {
            if (this.alt == "login") {
                window.open("Default.aspx?login=1", "LoginPopup", "width=550,height=300,resizable=1");
                return false;
            }
            var hidden = $("<input name = 'image_url' type = 'hidden' />");
            hidden.val($(this).attr("rel"));
            $("form").append(hidden);
        });
    });

    function GetScreenCordinates(obj) {
        var p = {};
        p.x = obj.offsetLeft;
        p.y = obj.offsetTop;
        while (obj.offsetParent) {
            p.x = p.x + obj.offsetParent.offsetLeft;
            p.y = p.y + obj.offsetParent.offsetTop;
            if (obj == document.getElementsByTagName("body")[0]) {
                break;
            }
            else {
                obj = obj.offsetParent;
            }
        }
        return p;
    }
</script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:DataList ID="dlImages" runat="server" RepeatDirection="Vertical" RepeatColumns="3"
                RepeatLayout="Table">
                <ItemTemplate>
                    <img src="<%#Eval("ImageUrl") %>" class="picture" alt="" height="200" width="200" />
                </ItemTemplate>
            </asp:DataList>
            <div class="info" style="display: none">
                <asp:ImageButton ID="imgFaceBook" AlternateText="login" ImageUrl="~/images.jpg" Height="40" Width="100"
                    runat="server" OnClick="ShareImage"></asp:ImageButton>
            </div>
        </div>
    </form>
</body>
</html>

Output

The below demo shows how to share images in facebook on clicking the FaceBook login icon.

 

Demo Code

Download