Facebook "Share" Button?

Topics: Controls
Nov 14, 2010 at 2:00 PM

Has anyone added a Facebook Share or Like button to their site with Asp.Net? I've been googling it and checking on Facebook for the code, but am not having a lot of luck. Any suggestions on the correct code would be greatly appreciated.

Coordinator
Nov 14, 2010 at 5:36 PM

Just go to Facebook's Like Button page here.

It'll generate the code for you.  You can use the iframe syntax it creates to keep it simple.

When entering information in their boxes, enter any URL into the top box.  The code it gives you will look like:

<iframe src="http://www.facebook.com/plugins/like.php?href=YOUR_ENCODED_URL&amp;layout=...... ></iframe>

Where it has your URL, if you decide to show the Like button for each post, you can place this iframe code in your theme's PostView.ascx, and replace YOUR_ENCODED_URL with:

<%=Server.UrlEncode(Post.AbsoluteLink.ToString()) %>

This will put the absolute link of that particular post in there -- rather than a link that might just point to your blog's homepage.

If you test this on your local machine, the Like button will display, and you can click it, but you might see an Error because when clicking the Like button, Facebook tries to go to your page and it won't be able to access a page on your local computer.

Nov 14, 2010 at 6:11 PM
Edited Nov 14, 2010 at 6:15 PM

I've done that - it doesn't seem to work! I copied their code exactly and nothing is displayed.

Here's the code that I've tried: 

 

<iframe src="http://www.facebook.com/widgets/like.php?href=http://www.corozaltoday.com" scrolling="no" frameborder="0" 
style
="border:none; width:450px; height:80px">Share</iframe>

<
a rel="nofollow" href="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.corozaltoday.com&amp;layout=standard&amp;
show_faces=true&amp;width=200&amp;action=recommend&amp;font=arial&amp;colorscheme=light&amp;height=80"
style="border:none;
overflow:hidden; width:200px; height:80px;""
>Share</a>
<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.corozaltoday.com&amp;layout=standard&amp;show_faces=true&amp; 
width=200&amp;action=recommend&amp;font=arial&amp;colorscheme=light&amp;height=80"
scrolling="no" frameborder="0" style="border:none;
overflow:hidden; width:200px; height:80px;"
></iframe>
None of that seems to work - the word "Share" never shows up, so obviously I am doing something wrong but I don't know what?
Coordinator
Nov 14, 2010 at 6:22 PM

I copied and pasted the bottom one you have into my PostView.ascx (leaving your URL in there).  I see a "Recommend" button and next to it, it says "4 people recommended this.  Be the first of your friends".  I think it says 4 people recommended it, because you and/or people on your site have already recommended it.

Specifically, I see the common Facebook "Recommend" button with the thumbs up icon.  Maybe try looking at it in a different browser, or try pasting that into default.aspx instead of PostView.ascx to see if there's a difference.

Also, make sure you're pasting it into the correct PostView.ascx.  Each theme folder has a PostView.ascx file ... so make sure you're modifying the correct theme file (not another theme).

Nov 14, 2010 at 6:36 PM
Also, make sure you're pasting it into the correct PostView.ascx.

Okay - that's it! I'm deleting all the extra themes that I am not using! D'oh! Thanks! Now all I have to do is format this to my client's liking and That should be it!

Thank you - once again you've come through! :-)

Nov 15, 2010 at 12:42 PM

After playing around with the code provided by Facebook, I really did not like the results. All I wanted was a small FB icon and the words "Share on Facebook" and for it to just link back to Facebook, and allow a registered FB user to share the link to my client's website. I really dislike their damn "Like" crap! So, this morning I got an email from a policital party (which I normally would just delete) but I noticed it had exactly what I was looking for as the FB link - so I did an "Inspect element" in firebug" and got the code I was looking for. It is extremely simple! All I did was to add the small FB logo (which I was able to legally obtain from their website: http://www.facebook.com/brandpermissions/logos.php#!/brandpermissions/logos.php ) If you're interested, this is the correct code to use to put in that type of link:

<a href="http://www.facebook.com/sharer.php?u=http://wwwyourwebsite.com" target="blank">
       <img src="http://yourwebsite.com/images/facebooklogo.jpg" alt="Share on facebook" /> Share on Facebook</a>

You can easily right click on the logo of your choice on the page referenced above and save it to your image directory. Just make sure to follow the use age guidelines that FB has established and you should be good to go! I hope this helps anyone else who wants to add that kind of link to Facebook! You can check out my results at http://www.corozaltoday.com.

Coleen

Nov 15, 2010 at 1:47 PM

Coleenh,

That works great for posting your site to FB, but what about each post on a site? Anyone have any ideas on that?

Nov 16, 2010 at 1:05 AM

When I was searching Google for answers I did come across several articles: http://highedwebtech.com/2010/04/22/how-to-add-facebooks-like-button-to-any-page-on-your-site/ http://askville.amazon.com/add-Share-Facebook-button-webpage/AnswerViewer.do?requestId=1539369 - just Google "add Facebook share button to website" and you'll get a ton of stuff.

Most of what I found was not what I was looking for - I don't "like" FB's "Like" button! I set mine to use their connect logo - but I don't have it set to "Share" every one of my client's pages - that is because in this case, the only page to really "Like" is the blog entry page. I don't know if the links above will help you or not - I hope so.

Nov 16, 2010 at 5:11 PM

Another possible solution (but contains client-side javascript) is Addthis.com. Solved e-mail notification, facebook, twitter, linkedin and a couple of Czech small services. If combined with two or three C# variables, it can create per-post links.

Nov 16, 2010 at 6:28 PM
Edited Nov 16, 2010 at 6:28 PM

I actually figured out how to get it to work for each post! In your theme folder, open the PostView.ascx file, and place the following code into <div class="bookmarks"> section:

<a rel="nofollow" href="http://www.facebook.com/sharer.php?u=<%=Server.UrlEncode(Post.AbsoluteLink.ToString()) %>" target="blank"><img src="<%=VirtualPathUtility.ToAbsolute("~/pics/")%>f_logo.png" alt="Share on Facebook" style="margin-right:3px" />Share on Facebook</a>

If you want to use a logo, just make sure it's named f_logo.png and you place it in your PICS folder.

Nov 16, 2010 at 7:34 PM

And if you prefer something minimal, but not only facebook (for example what I am using on my blog http://dolezel.net), the configuration consists of two steps:

1) place this code in Settings, Custom Code, Add custom code to the HTML head section

<!-- AddThis Config BEGIN --><script type="text/javascript">
var addthis_config = {
 services_compact: 'email, facebook, twitter, linkedin, linkuj, pochvalcz, more',
 services_exclude: 'print'}
</script><!-- AddThis Config END -->

2) place this code in PostView.ascx of your theme

<div class="bookmarks">
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style "><a href="http://www.addthis.com/bookmark.php?v=250&amp;username=999999999999999999" class="addthis_button_compact" addthis:url="<%=Server.UrlEncode(Post.AbsoluteLink.ToString())%>" addthis:title="<%=Server.UrlEncode(Post.Title)%>">Share</a></div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=999999999999999999"></script>
<!-- AddThis Button END -->
</div>

where 999999999999999999 is your AddThis username.

 

Nov 20, 2010 at 1:47 PM

Great discussion, thanks.