If you have a blogger blog, and want your visitors to easily share your posts with their facebook friends, you can make blogger automatically place a 'share on facebook' link at the end of each post. Add this code after the body of the post:
for layouts (in the "Edit HTML" pane with the "Expand Widget Templates" check box checked): <b:if cond='data:post.url'>
<br/>share <a expr:href='data:post.url' title='permanent link'>this</a>: <a expr:href='"http://www.facebook.com/share.php?u=" + data:post.url'>facebook</a>
</b:if>
for classic templates: share <a href="<$BlogItemPermalinkURL$>" title="permanent link">this</a>: <a href="http://www.facebook.com/share.php?u=<$BlogItemPermalinkURL$>">facebook</a>
and you'll also have a permalink before the 'share on facebook' link.
Where to put the code: It depends where you want the share links to appear, probably below the post. Likely after the <$BlogItemBody$> for classic templates and somewhere in the <div id='main-wrapper'> code for layouts. The specifics depend on your template/layout and your preference.
Control title and description: You can make facebook sharing look good: specify the picture, title and description facebook will use; apply the tips on your post pages.
You can also add a link for sharing and saving for other social networking and social bookmarking sites too. If you'd like the code for that, please read the comments.
Friday, May 30, 2008
Blogger 'Share on Facebook' Code
Subscribe to:
Post Comments (Atom)
61 comments:
Hi there,
Do you know of anyway to display these links as the favicons for the associated webpages instead of the "share on facebook" text?
Displaying favicons can't easily be done inline on a web-page; the favicon file format doesn't usually get rendered on a page the way a gif, jpg or png file does. What you can do is replace the "facebook" text that's the link text in the code above with an img tag using any image you want. You have to first download the image and host it somewhere online yourself, like photobucket.com (unless you get too much traffic for photobucket to work). Your best bet is to host the image in your own web hosting space, and than link to it from there.
I'd like that cote. . . .for the expanded tool bar.
Your code for facebook worked perfectly, thanks. I'd love to see the same thing for digg, stumble upon, etc...
Hi,
I'm new to this so please forgive me if this is a stupid question.. :)
I copied your code for layouts (though I couldn't find a check box for Expand Widget Templ.? I only find this in the editing for the blog itself) but when I publish the post, there's text only. "Facebook" get underlined when I put the mouse cursor over it, but it's like there's no link.
Hope you understand what I'm talking about... :)
If you did not find the "Expand Widget Templates" check box, were you in the "Edit HTML" tab of the "Layout Tab"? If you weren't, that could be the issue.
>the expanded tool bar
Not sure to what this refers.
Where in the html do you paste that code?
It depends where you want the share links to appear, probably below the post. Likely after the <$BlogItemBody$> for classic templates and somewhere in the <div id='main-wrapper'> code for layouts. The specifics depend on your template. If you want help specific to your blog only, please contact me directly.
Would love the other codes. Thanks. And thanks for posting this.
There are likely more than 100 social bookmarking and sharing sites; I won't cover them all, you can probably figure most of them out yourself with some trial and error.
delicious:
for layouts (in the "Edit HTML" pane with the "Expand Widget Templates" check box checked):
<b:if cond='data:post.url'>
<br/>share <a expr:href='data:post.url' title='permanent link'>this</a>: <a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title'>delicious</a>
</b:if>
for classic templates:
share <a href="<$BlogItemPermalinkURL$>" title="permanent link">this</a>: <a href="http://del.icio.us/post?url=<$BlogItemPermalinkURL$>&title=<$BlogItemTitle$>">delicious</a>
Hope that helps.
i am looking to add the facebook share on my blog but not having any luck
Sammy, I wrote in the post what my general recommendations are, so if it still doesn't work for you that's no fun at all. If you'd like to discuss how I might be able to help your personally, please contact me directly.
hi David,
thanks. i got it finally after 3 days trying to understand HTML. you see, i'm not a blog expert, just started trying out. but, i mus say David, your tips worked! thanks... :)
Thanks David. Your HTML code worked superbly!
Hi,
I managed to include the function and changed the text to a facebook-logo. The problem is that my template always draws borders around images, so it does not look very good for me as the image is somewhat higher than the text etc. Is there some way to disable the border just for this image? I tried border='0' but it does not work.
Thank you in advance!
Depending on which version of HTML/XHTML code your blog is written in, CSS must be used for all formatting. That may be why "border='0'" didn't work, but adding "img {border: 0px;}" to the style sheet, which is in or referred to in the head of the code may work. It is likely between <style type="text/css"> and </style>.
How about the code to share on Twitter? Is this easily done?
Thank you!!!! The code they had posted on fb didn't work for me at all. Yours did! :)
I'd love the twitter code too... The code they offer doesn't work for me, using the classic blogger template.
im about to lose my mind, i have tried everything to get the share to facebook link by posting the code. it either tells me there is no "post" in the dictionary, or it simply will not work. can you tell me exactly where to post this code to make it work? i spent 2 hours looking for div id wrapper w/e and still no luck.
Please read the earlier comment. Specifics depend on your template/layout. Ensure you are using the right code for the right type, i.e., the template code for templates, layout code for layouts.
this is my result:
http://iiirgendwas.blogspot.com/
unfortunately, there is no link. If I use the other code, Blogger tells me that the code isn't correct. As well there is no checkbox, no matter what code I edit my posts in.
Sorry for all the blabla, but I'd love to add that code!
Perhaps making sure you have used the proper code will help (template for template layout for layout), and if you cannot the way to expand the code in a layout, you may not be able to install any custom code, including facebook sharing code.
Sorry but i don't quite understand where to post the code.
I am looking in the layout for my template and have the exanded widgets button checked but exactly where should i put it? i used one of the template layouts and don't really understand the ins and outs of it but i have tried several locations and some refuse to accept it and others accept it but nothing changes....
Also am i right in thinking you just place it in the template and not after the body text when writing each post as well?
Sorry about this i'm just getting a bit confused by it all.....
This depends on your specific blog and where you want the link to appear. Please read my earlier comment on where to put the code.
Hi David
I've managed to insert the share link into my blog posts which is great and it all works fine except....when my posts appear in facebook they don't show the post title - they just repeat the blog.url? I think this is something in my template as i've tried sharing with other blogs and they register the title of the post. Do you know what string it is in the template that automatically highlights to facebook what title to feed for each post?
In the fifth paragraph of this original post (one this page above the comments) I link to an entire blog post about specifying the title, description and picture Facebook will select when sharing. Please read that. Good luck!
hi
when i add ur given code for layout for layouts (in the "Edit HTML" pane with the "Expand Widget Templates" check box checked) after body tag.
I got this error
Error interpreting blog template
Invalid data reference post.url: com.google.layouts.framework.widgetview.GoogleMarkupException: No dictionary named: 'post' in: ['blog']
please tell me how to fix it
thanks
Hi....
Youtube has a "share" feature under the videos on its page. This feature allows users to post the video to there facebook and myspace page. I would like to be able to post my videos to facebook with the same ease. have any idea!!!!!
Sadiua,
I'm not sure what you are looking for that isn't in the original post or the comments above this one. If your videos are on YouTube they already have that sharmg feature. If they are on blogger, this post describes how to make a share on Facebook link.
If you are getting an error after installing the layout code, it is likely installed in the wrong location or the code itself is messed up/the wrong syntax. I recommend restoring your layout to a backed up previous version without the code (if you have one) and ensuring you have a layout (not template). Your error is complaining using the word template; they layout share code will not work on a template since templates require template code.
Hi David,
Could you please tell me how to add the facebook wall feeds in my blogger classic template? There is no luck for me upto now....
That's a little beyond the scope of this post, but the short version is make the wall public, locate the feed link, then import the wall feed into your blogger layout as you would any other RSS/atom. It would be more complex to do this with a template.
Hello, I'm having a problem on sharing my blogger posts on Facebook. The image preview and description simply don't show, only 2 text lines. It was working fine until yesterday. It appears there's a lot of people with the same problem.
what should I do?
Thx
Stereo, perhaps you could try the pretty facebook sharing that I linked in this post, in the part about how you "specify the picture, title and description." If I'm understanding you correctly is what you seem to want to do.
Seth, not sure what you mean by "just the article and not the page in total" since your articles probably have to be on a page. If things are "bunching up" you may want to use non-breaking spaces (e.g., ).
Thank you!
Thank you! This rocks!
Guys, just found a little Bug on the Facebook Share.
If you have a title with special characters. Like "ñ" or "á", etc. In spanish or some other language. Facebook just bring you nothing.
Thanks i will use this.
thnks....
thanks for the information..
it's really usefull :)
Hi, I got this to work correctly, however it shares the info from my blog to my facebook profile...is there a way to have the content go to my facebook business page?
Thaks amazing your article, muach
Thanks David for sharing this!
I'm trying to make facebook open in a new window. Can't figure out where to put the code.
Please can anyone help? Thanks in advance.
Thank you for the kind words and thanks.
@interior view: the share is mainly for your visitors, so Facebook has designed it to be people (which have profiles) and not for non-people (which have pages). You'd have to manually share it (copy and paste into status) or import your rss (which is beyond the scope of this article).
@blog: I do not know what part you do not userstand. Best of luck.
@Cheryl: perhaps add a target="_blank" attribute to the link (I say perhaps because this isn't allowed in XHTML, so if your blog is in that, it may make your code invalid). Best of luck.
Hi, when I share the post on facebook, it only shows the url of the blog NOT the post title. How can I make it show the post title instead of the blog title?
You mentioned you have solution to this on your original post? I can't quite find it. Please help me. Thanks.
http://sherwette.blogspot.com
As mentioned in this post, read my post about making the sharing pretty: http://dave-tips.web-l.com/2008/07/pretty-facebook-sharing.php
David,
I can share the posts, but it only shows the whole blog not the post title.
you can check it yourself
http://sherwette.blogspot.com
I will really appreciate any kind of help.
Sherwette,
You control the title of the page shared by setting up the meta tags as discussed in my post on Pretty Facebook Sharing. Does that help?
How to protect my page if i want first to click share and then he can see whole content of a page...is there any code for that..?????? asap....
how to add at the side bar of the blog
This depends on how your layout or tenplate is configured.
Anonymous, I'm not sure what you mean by "protect my page" or what you are hoping to do.
I copy them to my html code but not the results are similar to those in his article, why not the same?
There are any number of reasons, depending on your site and code. Make sure you are using the template code if you have a template and the layout code if you have a layout.
I was wondering if you've ever heard of something that's a combination of the facebook 'share this' button and the blogger 'blog this' button? It would be used just like the 'Blog This' button, but behave like the Facebook 'Share This' button.
When using the 'Blog This' button, I just click and it pops up the link to the site and site name, so it's often very bland and requires some effort (yeah, I know not a lot) to add extra's like photo and description/snippet from the site.
Whereas the facebook button you just click on the share this button and it adds everything, mini photo, description, title, links.
Have you ever run across something like this?
Thank you so much for this tutorial David. I've been looking for the link version of the Post to Facebook button for months. It works great and I will be giving you credit on the blog template I'm making for the Share on Facebook link.
Thank you so much! If possible, I'd like it if you made my name a link to http://www.davidaugust.com
Post a Comment