News!! Putting A Facebook Like, Mail Or Part Push On Your Blog

There is an official Facebook push that your readers tin sack occupation to portion your blog, your electrical flow post, or whatsoever website, on their ain Facebook account.  This article describes how to larn the code from Facebook in addition to install it into Blogger - but most of the information applies to other blogging tools (Wordpress, TypePad, etc) in addition to many other web-site tools also.

Previously I've described the dissimilar ways that you lot tin sack link your weblog in addition to the social-networking sites.

Facebook badges tin sack hold upwardly used to ship your blog's readers to your personal Facebook profile, or to your page.  These are an event of the "follow me" approach.

But ofttimes weblog authors desire to give their readers a tool to portion the weblog that they are reading on their ain (ie the readers own) Facebook concern human relationship - that is to occupation the "Look what s/he said" approach.

Your readers could but copy-and-paste a hyperlink to your page into their ain Facebook account, but it's clunky, in addition to agency that they bring to start upwardly Facebook themselves.

Various people bring written 3rd-party widgets to lay a Facebook icon on your blog, gear upwardly hence that when a reader clicks it the electrical flow page it is automatically shared on the reader's Facebook account.  Some fifty-fifty count how many times the push has been clicked.

But I don't like, or trust, 3rd political party gadgets:

• There's no guarantee that they don't bring nasty side effects on your blog.  
• Some of them enquire you lot to type your Facebook id in addition to password onto a page owned past times a 3rd party.   They hope that the won't exercise nasty things amongst the information - in addition to about of them hateful it.  But you lot but don't know who to trust.  
• If Facebook alter how they exercise things, there's no guarantee that 3rd political party tools volition also hold upwardly changed:  you lot could easily hold upwardly left amongst a push that doesn't piece of work whatsoever more.

I'm non maxim that all the 3rd political party gadgets are bad:  I've used about on my sites amongst no ill-effects.   But I've never been happy almost it. And the 24-hour interval that I used the AddThis push on a paper website to portion an article to my personal travel-blog, I had a mini panic-attack 1/2 an lx minutes after when I realised that I'd but given my e-mail in addition to AdSense password to a third-party.

One approach - Blogger's social-sharing buttons:

Google bring introduced social-media buttons whichcan hold upwardly shown at the bottom of each post.   They solely piece of work on blogs amongst Designer Templates (ref Types of Blogger Templates)

They're an improvement on the 3rd political party gadgets, but I withal don't similar the way they look, in addition to the lack of options to customize them, hence I commonly bring them turned off.

H5N1 meliorate approach - Facebook's official gadgets:

The Share Button:

The showtime "look what s/he said" selection that Facebook offered was the Share  button, officially called the the Post To Profile gadget.

This permit you lot customise a few features, in addition to also had a preview function

You tin sack withal encounter this gadget on many web-pages.   But you lot cannot larn the code for this from Facebook whatsoever more:  they right away recommend using the social plugins (more almost them below) instead.

The Share push withal plant though, in addition to tin sack hold upwardly added to your site using this code:

<b:if cond='data:blog.pageType != &quot;static_page&quot;'> 

<div style='float:left;padding:3px 3px 3px 3px;'> <a expr:share_url='data:post.url' 

href='http://www.facebook.com/sharer.php' 

name='fb_share' 

type='box_count'>

Share

</a>

<script 

src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' 

type='text/javascript'>

</script> </div>

</b:if>

(I've spaced the code out a flake hence it tin sack hold upwardly understoond to a greater extent than easily - the extra line-breaks tin sack hold upwardly removed when you lot occupation it.)

You tin sack configure the code past times changing the value of type:  other options are

• button_count   (shows a counter beside a smaller button)
• button (shows a smaller button, withal amongst the give-and-take "share"
• icon (shows the small-scale "f" only)

See Sharing from your weblog to the Social Networking Sites for to a greater extent than information almost where to lay the code, including full general in addition to post-specific options.

Notice that because the code inwards a higher house includes   expr:share_url='data:post.url'   you lot demand to lay it inwards a post-specific house inwards your blog.   Another selection would hold upwardly to supersede data:post.url  amongst the URL for your blog, in addition to lay the code into a gadget etc.

Be aware that sometime inwards the future, the Share push may halt working, because Facebook halt supporting it.   I don't await that to give shortly though, because it's right away installed on hence many web-sites worldwide.

The Like in addition to Send buttons:

Facebook's official gadgets for maxim "look what s/he said" are right away the Like in addition to Send buttons.

Officially, you lot tin sack larn the code for them on the Developers > Social Plugins > Core concepts page:  don't hold upwardly lay off because the page is labelled "develoeprs" - it actually is quite uncomplicated to install the buttons into your blog.

However the final few times I tried to larn the code from Facebook, it's refused to give it to me, saying:

"The href entered is non recognized every bit a valid URL.".

So this is the code I got from them before, modified to hold upwardly used inwards a post-specific house - encounter below - in addition to to non occupation the width that was suggested:

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1' type='text/javascript'/><fb:like action='like' colorscheme='light' expr:href='data:post.url' font='' layout='button_count' send='false' show_faces='false'/>

This motion painting shows the options that were available when I got that code:

It's fairly slowly to aspect at these options, in addition to piece of work out changes you lot mightiness similar to make, eg

like action='recommend' colorscheme='dark' font=''Arial layout='box_count' send='true' show_faces='true'

When you lot bring chosen the options you lot want:

• Click the Get Code push at the bottom of the page, 
• Copy the code that is provided, and 
• Install it into your weblog (see below for to a greater extent than information almost this).

Sharing a Post vs Sharing the whole blog:

If you lot lay a a Like, Send or Share push into your ain weblog every bit a gadget, hence what is shared is your whole blog, non the item Post that is beingness read, for event   

   (this blog)

instead of

/search?q=linking-your-blog-to-social-networks  (a post)

If this is what you lot desire your readers to do, hence but put your blog's URL into the "URL to Like" champaign (or the expr-statement if you're using the Share push code), in addition to add together the code every bit a gadget.

But if you lot desire your readers to portion private posts, hence you lot demand the Facebook-button to appear amongst every post, inwards either the post-header or post footer  This is a picayune harder than adding it every bit a gadget.  To larn the code to occupation for the Like/Send buttons

1. Put about dummy text into the URL to portion field
2. Get the code
3. Replace the dummy text amongst instructions to occupation the URL of the electrical flow post, ie alter it from

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=173511999379139&amp;xfbml=1"></script><fb:like href="DUMMY-TEXT" send="false" width="450" show_faces="true" font=""></fb:like>

to

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=173511999379139&amp;xfbml=1"></script><fb:like

expr:share_url='data:post.url' send="false" width="450" show_faces="true" font=""></fb:like>

The way to add together the code to your weblog is described fully inwards Putting Share this on XXX buttons into your blog (it's done the same way, no affair what social network's portion push you lot are adding).

Enhance the sharing using Open Graph tags

Facebook was 1 of the showtime sites to occupation Open Graph (OG) markup, which is a way to label parts of your weblog hence that social websites know what to occupation inwards each of their features.

Unfortunately Blogger templates don't automatically comprise Open Graph code.   But you lot tin sack add it yourself.   This isn't essential - people tin sack withal portion your posts without the tags beingness nowadays - but it does mostly brand shared of your pages aspect better.

What your readers see

When a reader clicks your Facebook button, they'll hold upwardly asked to log inwards to Facebook (unless they're already logged in).

Once they're logged in, then:

If they used the Like button:

The "like" is recorded on their wall, in addition to they are shown a small-scale message inwards your site, giving hence the chance to un-do the like, or to add together a comment which is also shown on their wall along amongst the like.

If they used the Send button:

They are shown a small-scale pop-up window where they tin sack type inwards names (from their existing Facebook friends) or e-mail addresses.  H5N1 message almost the item is ship to the selected people using either Facebook Messages or regular e-mail for people who aren't on Facebook.

If they used the Share button:

They encounter a window where they tin sack go inwards a message, in addition to encounter the link in addition to description that they're going to hold upwardly sharing.

The link is either the page that they were viewing when they clicked the button, or about other URL (if you lot chose the Custom URL selection when you lot were setting upwardly the gadget).  The description is an promotion for Blogger.  However both of these these tin sack hold upwardly changed if your reader clicks on them.

Lastly there's a captcha window, where they bring to go inwards about safety test.

---

Related Articles:

Linking your Blog in addition to the Social Media

Adding a Facebook personal concern human relationship badge to your blog.

Adding a Facebook Page badge to your blog.

Types of Blogger Templates

Putting 3rd political party HTML code into your blog

Adding the "Find us on Facebook" plug-in box to your blog

Tweet

Subscribe to receive free email updates: