I have already posted an article about sharing content in Facebook few weeks back. Here I am going to use free jQery plugin to achieve same objective.
The major reason for switching on to using a jQery plugin is because you need to have a Facebook application developed and that will need to be managed separately. This will become somewhat troublesome as some companies will not like to have Facebook account maintained for different reasons.
There are several jQery plugins available, here I am focusing on jsSocials Social Network Sharing Plugin. Integrating this plugin is really easy for either classic ASP.Net or ASP.Net MVC.
1. To configure the plugin follow the steps in start using page. I prefer use use of CDN instead of downloading the bunch of files.
When data binding the div tag that used to populate the social media icons you can use following technique to dynamically data bind.
@{ var shareUrl = string.Format("{0}://{1}{2}/{3}/{4}", Request.Url.Scheme, Request.Url.Authority, Url.Content("~"), "Job/Details", @item.field1);}
<div id="shareRoundIcons" data-url="@shareUrl" data-text="@item.field2"> </div>
If you are trying to do this in classic ASP.Net you might try this as follows
<div id="shareRoundIcons" data-url="<%#Container.DataItem("field1")%>"
data-text="<%#Container.DataItem("field2")%>"></div>
when it comes to configure the plugin in jQuery trying following trick will ensure that all divs are showing the social media icons (even if you are trying it on a grid or table this will work)
<script type="text/javascript" >
$(function () {
$('[id^=shareRoundIcons]').each(function () {
$(this).jsSocials({
url: $(this).data('url'),
text: $(this).data('text'),
showLabel: false,
showCount: false,
shares: [ "facebook","twitter", "linkedin"]
});
});
});
</script&;gt
2.Some social media uses meta tags to grab the featured image used in sharing. Make sure the page has og: tags specified.
e.g.
<meta property="og:type" content="website">
<meta property="og:site_name" content="YOUR SITE NAME">
<meta property="og:title" content="" />
<meta property="og:description" content="" />
<meta property="og:url" content="http://www.abc.com/Job/Details/">
<meta property="og:image" content="http://www.abc.com/Content/Styles/Logo.jpg" />
More information can be found here.
3. Make sure you have included the Open Graph XML namespace extension to your HTML declaration.
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:fb="http://ogp.me/ns/fb#">
See the entire discussion in this stack overflow post.
Cheers,
Samitha
The major reason for switching on to using a jQery plugin is because you need to have a Facebook application developed and that will need to be managed separately. This will become somewhat troublesome as some companies will not like to have Facebook account maintained for different reasons.
There are several jQery plugins available, here I am focusing on jsSocials Social Network Sharing Plugin. Integrating this plugin is really easy for either classic ASP.Net or ASP.Net MVC.
1. To configure the plugin follow the steps in start using page. I prefer use use of CDN instead of downloading the bunch of files.
When data binding the div tag that used to populate the social media icons you can use following technique to dynamically data bind.
@{ var shareUrl = string.Format("{0}://{1}{2}/{3}/{4}", Request.Url.Scheme, Request.Url.Authority, Url.Content("~"), "Job/Details", @item.field1);}
<div id="shareRoundIcons" data-url="@shareUrl" data-text="@item.field2"> </div>
If you are trying to do this in classic ASP.Net you might try this as follows
<div id="shareRoundIcons" data-url="<%#Container.DataItem("field1")%>"
data-text="<%#Container.DataItem("field2")%>"></div>
when it comes to configure the plugin in jQuery trying following trick will ensure that all divs are showing the social media icons (even if you are trying it on a grid or table this will work)
<script type="text/javascript" >
$(function () {
$('[id^=shareRoundIcons]').each(function () {
$(this).jsSocials({
url: $(this).data('url'),
text: $(this).data('text'),
showLabel: false,
showCount: false,
shares: [ "facebook","twitter", "linkedin"]
});
});
});
</script&;gt
2.Some social media uses meta tags to grab the featured image used in sharing. Make sure the page has og: tags specified.
e.g.
<meta property="og:type" content="website">
<meta property="og:site_name" content="YOUR SITE NAME">
<meta property="og:title" content="" />
<meta property="og:description" content="" />
<meta property="og:url" content="http://www.abc.com/Job/Details/">
<meta property="og:image" content="http://www.abc.com/Content/Styles/Logo.jpg" />
More information can be found here.
3. Make sure you have included the Open Graph XML namespace extension to your HTML declaration.
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:fb="http://ogp.me/ns/fb#">
See the entire discussion in this stack overflow post.
Cheers,
Samitha
