In this article I will explain how to share image, picture or photo 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 single click of a button.
Note: You can download the latest ASPSnippets.FaceBookAPI.dll clicking the download link below.
Some more Facebook articles:-
Create FaceBook Application and get App Id
You will need to create an application and get an API Key and API Secret
HTML Markup
The HTML Markup consist of an ASP.Net DataList control along with an HTML DIV is hidden and consists of an ImageButton. This hidden HTML DIV is used to display Facebook Share button over the DataList images.
<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="~/img/fbLogin.jpg"
runat="server" OnClick="ShareImage"></asp:ImageButton>
</div>
Namespaces
You will need to import the following namespaces.
C#
using System.Data;
using System.Collections.Generic;
using ASPSnippets.FaceBookAPI;
VB.Net
Imports System.Data
Imports ASPSnippets.FaceBookAPI
Imports System.Collections.Generic
Populating DataList with images
In the Page Load event of the page I am populating a DataTable with some images and then the DataTable is bound to the ASP.Net DataList control using the following function.
C#
private void LoadImages()
{
DataTable dt = new DataTable();
dt.Columns.Add("ImageUrl", typeof(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("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("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")
Me.dlImages.DataSource = dt
Me.dlImages.DataBind()
End Sub
Facebook Authentication and Sharing image on Facebook Wall
Initially when the FaceBook user is not authenticated, Login button is displayed when mouse is moved over any image, since in order to share anything on Facebook it is necessary that the person must be logged in and also must have provided permissions to the Facebook App.
Once authenticated the Facebook Code is stored in the Session variable so that it can used multiple times and the AlternateText of the ImageButton is changed, this tells the client side jQuery script (explained later) that the authentication has been completed and now we need to use the ImageButton for sharing purpose.
C#
protected void Page_Load(object sender, EventArgs e)
{
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]);
return;
}
if (Request.QueryString["code"] != null)
{
Session["Code"] = Request.QueryString["code"];
ClientScript.RegisterStartupScript(GetType(), "script", "window.opener.location.reload(); window.close();", true);
return;
}
if (Session["Code"] != null)
{
imgFaceBook.AlternateText = "share";
imgFaceBook.ImageUrl = "~/img/fbshare.png";
}
LoadImages();
}
}
protected void ShareImage(object sender, EventArgs e)
{
string imageUrl = Request.Form["image_url"];
Dictionary<string, string> data = new Dictionary<string, string>();
data.Add("link", imageUrl);
data.Add("picture", imageUrl);
FaceBookConnect.Post(Session["Code"].ToString(), "me/feed", data);
ClientScript.RegisterStartupScript(GetType(), "alert", "alert('Image has been shared.');", true);
}
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 Request.QueryString("login") = "1" Then
FaceBookConnect.Authorize("publish_actions", Request.Url.AbsoluteUri.Split("?"c)(0))
Return
End If
If Request.QueryString("code") IsNot Nothing Then
Session("Code") = Request.QueryString("code")
ClientScript.RegisterStartupScript([GetType](), "script", "window.opener.location.reload(); window.close();", True)
Return
End If
If Session("Code") IsNot Nothing Then
imgFaceBook.AlternateText = "share"
imgFaceBook.ImageUrl = "~/img/fbshare.png"
End If
LoadImages()
End If
End Sub
Protected Sub ShareImage(sender As Object, e As EventArgs)
Dim imageUrl As String = Request.Form("image_url")
Dim data As New Dictionary(Of String, String)()
data.Add("link", imageUrl)
data.Add("picture", imageUrl)
FaceBookConnect.Post(Session("Code").ToString(), "me/feed", data)
ClientScript.RegisterStartupScript([GetType](), "alert", "alert('Image has been shared.');", True)
End Sub
CSS Styles and jQuery for displaying the Share Button over Images
The following CSS Classes and the jQuery scripts are used to display the FaceBook share button over the images when mouse is hovered over any image.
The Hidden 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 button appears as Facebook Login button since we need to authorize the user as well as get necessary permissions before we get allow him to share images on his Facebook Wall.
When the Login button is clicked in a new window the same page will open up with QueryString parameter login=1. In the Page Load event I have checked for the login QueryString parameter and if it exists and has value 1 then I have called the Authorize method of the ASPSnippets FaceBook API, which simply 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.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("CS.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>
The working of the Facebook image Share Application in ASP.Net
1. Facebook Login button is displayed as user has not been authorized.
![Share Image, Photo Pictures on Facebook in ASP.Net using Graph API]()
2. When the Facebook Login button is clicked a new window opens up.
![Share Image, Photo Pictures on Facebook in ASP.Net using Graph API]()
3. The next Facebook window asks for granting permissions to the App
![Share Image, Photo Pictures on Facebook in ASP.Net using Graph API]()
4. One permission granted, the window closes and the Share button is now visible
![Share Image, Photo Pictures on Facebook in ASP.Net using Graph API]()
5. When share button is clicked, the image is shared on Facebook wall
![Share Image, Photo Pictures on Facebook in ASP.Net using Graph API]()
Demo
Downloads
