Facebook Api Upload Photo and Share Plugin

In this article I will explain how to share paradigm, picture or photograph on Facebook wall in ASP.Net Website using Facebook Graph API and ASPSnippets Facebook API. The idea is to directly share images, pictures or photos on Facebook wall on unmarried click of a button.

Note : You tin can download the latest ASPSnippets.FaceBookAPI.dll clicking the download link below.

Some more Facebook articles:-

Create FaceBook Awarding and get App Id

You will demand to create an application and become an API Key and API Secret

HTML Markup

The HTML Markup consist of an ASP.Cyberspace DataList control along with an HTML DIV is hidden and consists of an ImageButton. This subconscious HTML DIV is used to brandish Facebook Share button over the DataList images.

< asp : DataList ID ="dlImages" runat ="server" RepeatDirection ="Vertical" RepeatColumns ="3"

RepeatLayout ="Tabular array">

< ItemTemplate >

< img src =" <% #Eval("ImageUrl") %> " class ="picture" alt ="" height ="200" width ="200" />

</ ItemTemplate >

</ asp : DataList >

< div class ="info" mode =" display : none">

< asp : ImageButton ID ="imgFaceBook" AlternateText ="login" ImageUrl ="~/img/fbLogin.jpg"

runat ="server" OnClick ="ShareImage"></ asp : ImageButton >

</ div >

Namespaces

You will need to import the following namespaces.

using System.Data;

using System.Collections.Generic;

using ASPSnippets.FaceBookAPI;

VB.Net

Imports System.Information

Imports ASPSnippets.FaceBookAPI

Imports System.Collections.Generic

Populating DataList with images

In the Page Load outcome of the page I am populating a DataTable with some images and then the DataTable is spring to the ASP.Internet DataList control using the following part.

private void LoadImages()

{

DataTable dt = new DataTable();

dt.Columns.Add("ImageUrl", typeof(string));

dt.Rows.Add together("http://farm4.staticflickr.com/3792/9147205860_5da6951bf4_m.jpg");

dt.Rows.Add("http://farm6.staticflickr.com/5349/9096039944_1bcfb9d0a5_m.jpg");

dt.Rows.Add("http://farm9.staticflickr.com/8380/8474516903_8a5eb01b51_m.jpg");

dt.Rows.Add("http://farm6.staticflickr.com/5446/7093203455_c4fc025ef6_m.jpg");

dt.Rows.Add("http://farm9.staticflickr.com/8395/8985239089_4318196db2_m.jpg");

dt.Rows.Add("http://farm4.staticflickr.com/3723/8986453414_a869ddc3aa_m.jpg");

this.dlImages.DataSource = dt;

this.dlImages.DataBind();

}

VB.Net

Protected Sub LoadImages()

Dim dt As New DataTable()

dt.Columns.Add("ImageUrl", GetType(String))

dt.Rows.Add("http://farm4.staticflickr.com/3792/9147205860_5da6951bf4_m.jpg")

dt.Rows.Add("http://farm6.staticflickr.com/5349/9096039944_1bcfb9d0a5_m.jpg")

dt.Rows.Add("http://farm9.staticflickr.com/8380/8474516903_8a5eb01b51_m.jpg")

dt.Rows.Add together("http://farm6.staticflickr.com/5446/7093203455_c4fc025ef6_m.jpg")

dt.Rows.Add("http://farm9.staticflickr.com/8395/8985239089_4318196db2_m.jpg")

dt.Rows.Add together("http://farm4.staticflickr.com/3723/8986453414_a869ddc3aa_m.jpg")

Me.dlImages.DataSource = dt

Me.dlImages.DataBind()

Stop Sub

Facebook Hallmark and Sharing image on Facebook Wall

Initially when the FaceBook user is non authenticated, Login button is displayed when mouse is moved over any epitome, since in gild to share annihilation on Facebook it is necessary that the person must exist logged in and as well must have provided permissions to the Facebook App.

One time authenticated the Facebook Code is stored in the Session variable then that it can used multiple times and the AlternateText of the ImageButton is changed, this tells the client side jQuery script (explained afterwards) that the authentication has been completed and now we need to use the ImageButton for sharing purpose.

protected void Page_Load(object sender, EventArgs eastward)

{

FaceBookConnect.API_Key = "<API Key>";

FaceBookConnect.API_Secret = "<API Secret>";

if (!IsPostBack)

{

if (Request.QueryString["login"] == "1")

{

FaceBookConnect.Authorize("publish_actions", Request.Url.AbsoluteUri.Split('?')[0]);

render;

}

if (Request.QueryString["code"] != null)

{

Session["Code"] = Request.QueryString["lawmaking"];

ClientScript.RegisterStartupScript(GetType(), "script", "window.opener.location.reload(); window.close();", truthful);

render;

}

if (Session["Code"] != null)

{

imgFaceBook.AlternateText = "share";

imgFaceBook.ImageUrl = "~/img/fbshare.png";

}

LoadImages();

}

protected void ShareImage(object sender, EventArgs due east)

{

cord imageUrl = Request.Course["image_url"];

Dictionary<string, cord> data = new Lexicon<string, string>();

data.Add together("link", imageUrl);

information.Add("picture", imageUrl);

FaceBookConnect.Postal service(Session["Code"].ToString(), "me/feed", data);

ClientScript.RegisterStartupScript(GetType(), "alert", "warning('Image has been shared.');", truthful);

}

VB.Net

Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load

FaceBookConnect.API_Key = "<API Key>"

FaceBookConnect.API_Secret = "<API Secret>"

If Not IsPostBack Then

If Asking.QueryString("login") = "1" And then

FaceBookConnect.Authorize("publish_actions", Request.Url.AbsoluteUri.Split("?"c)(0))

Return

End If

If Request.QueryString("code") IsNot Goose egg And so

Session("Code") = Asking.QueryString("lawmaking")

ClientScript.RegisterStartupScript([GetType](), "script", "window.opener.location.reload(); window.close();", Truthful)

Return

Stop If

If Session("Code") IsNot Nothing Then

imgFaceBook.AlternateText = "share"

imgFaceBook.ImageUrl = "~/img/fbshare.png"

Cease If

LoadImages()

End If

End Sub

Protected Sub ShareImage(sender As Object, due east As EventArgs)

Dim imageUrl As String = Asking.Form("image_url")

Dim data As New Dictionary(Of String, String)()

data.Add together("link", imageUrl)

information.Add together("picture", imageUrl)

FaceBookConnect.Post(Session("Code").ToString(), "me/feed", information)

ClientScript.RegisterStartupScript([GetType](), "alert", "alarm('Epitome has been shared.');", True)

End Sub

CSS Styles and jQuery for displaying the Share Button over Images

The post-obit CSS Classes and the jQuery scripts are used to display the FaceBook share push over the images when mouse is hovered over any image.

The Subconscious HTML DIV with the Share ImageButton is shown with semi-transparent background over the image when mouse is hovered over it.

Initially the Facebook Share image push button appears as Facebook Login button since nosotros demand to authorize the user also as get necessary permissions before we get allow him to share images on his Facebook Wall.

When the Login push is clicked in a new window the same page volition open upwardly with QueryString parameter login=1. In the Page Load event I accept checked for the login QueryString parameter and if it exists and has value 1 then I have chosen the Authorize method of the ASPSnippets FaceBook API, which only sends the user to the Facebook site for authorization and also for granting permissions to the App.

< style type ="text/css">

.info

{

background-color: black;

filter: alpha(opacity=80);

opacity: 0.viii;

position: absolute;

display: block;

text-marshal: center;

}

.info input

{

position: relative;

summit: 35px;

}

</ mode >

< script type ="text/javascript" src ="http://ajax.googleapis.com/ajax/libs/jquery/i.nine.1/jquery.min.js"></ script >

< script type ="text/javascript">

$(function () {

var info = $(".info");

$(".moving-picture show").demark("mouseenter", function () {

var p = GetScreenCordinates(this);

$("input", info).attr("rel", this.src);

info.show();

info.css("meridian", $(this)[0].offsetHeight / ii);

info.css("width", $(this).width());

info.css({ "left": p.x, "peak": p.y + this.offsetHeight - info[0].offsetHeight });

});

$(".info a, .info").bind("mouseenter, mousemove, mouseover", office () {

info.show();

});

$(".picture").bind("mouseleave", function () {

info.hibernate();

});

$("[id*=imgFaceBook]").demark("click", function () {

if (this.alt == "login") {

window.open("CS.aspx?login=1", "LoginPopup", "width=550,height=300,resizable=1");

render false;

}

var subconscious = $("<input proper name = 'image_url' type = 'hidden' />");

hidden.val($(this).attr("rel"));

$("form").append(hidden);

});

role GetScreenCordinates(obj) {

var p = {};

p.10 = obj.offsetLeft;

p.y = obj.offsetTop;

while (obj.offsetParent) {

p.x = p.ten + obj.offsetParent.offsetLeft;

p.y = p.y + obj.offsetParent.offsetTop;

if (obj == certificate.getElementsByTagName("trunk")[0]) {

interruption;

}

else {

obj = obj.offsetParent;

}

return p;

}

</ script >

The working of the Facebook image Share Application in ASP.Net

1. Facebook Login button is displayed equally user has non been authorized.