Stop Blogger offering to share your posts to Google+

This article describes Blogger's share-to-Google+ feature, and shows how to stop Blogger offering to share to your Google + circles every time you publish a new post, and what you cannot (yet) do with the feature.

Automatically updating Google + from your blog

If you have linked your blogger-account to your Google+ profile, then by default you are shown a pre-filled Google+ share box with details of your post in it, every time that you publish a post, including times when you edit a post that has already been published.

The share box has a snippet and thumbnail picture  based on your post, and section where you can add a comment, remove the description, choose the circle(s) to share it with, and say to also email people who are not in your circles.

You can change the picture associated with the shared post using the arrows (hover over the top left of the suggested picture - the arrows circle through the other available pictures. Or you can remove it using the cross button (hover over the top-right of the suggested picture).

The top right corner shows whether the post is being shared to your personal profile to the the Google+ Page that you previously linked with the blog.

This is one of the easiest ways of sharing your blog posts with any of the social networks: it lets you customise the content of the message and target it carefully, without having to leave Blogger to do so.

Don't bother me: stop Blogger offering to share to Google-plus

If you don't want to see the "share on Google+" option every time post, you can turn the feature off for individual blogs. To do this:

1   Go to the Google + tab.

2   Untick the "Prompt to share after posting" button, currently found underneath your list of Pages

(Unlike some tabs, changes on this tab are automatically saved.)

Why would you want to do this?   After all, if your accounts are linked, then surely you want to share your posts to Google+?

Actually there are a number of reasons why you might want to disable this feature.   Some that I can think of are:

• If you make frequent edits to existing posts it would probably annoy the people in your circles if you shared all of them - and it slows you down, because the share screen takes a few seconds to load every time you publish.

• If you use a private blog to prepare your posts before publishing them - obviously there's no need to share these posts with yourself! 

• You might just want to do the share, but at a later time than the initial post, to spread out the new-post impact.

Even if you've turned off the "offer to share" option, you can still Google+ share individual posts by selecting "share" from underneath the title in the Blogger Dashboard > Posts tab.

Troubleshooting the Google + share option:

You only see this option if when you publish a post, if:

• You have connected any of the blogs owned by your blogger account to Google+

• You have not previously turned it off for this particular blog

• Your blog is not private.
  If you try it on a blog with restricted readership, instead of an error message you are given the not-very-helpful option to share the Blogger sign in screen, like this:

Doing more with the Blogger / Google-Plus share feature

Currently there is no way to:

• Totally automate the share, so it happens without you pressing Ok in the "Share this on ..." box.

• Show the labels from your post in your shared item

• Schedule the share

• Automatically share posts published with mail2Post or which are scheduled to Publish in the future.

• Change whether the post is shared to a selected Google+ page or your personal circles
  This is controlled by a global setting that you can edit on the Blogger Dashbaord > Google + tab, but you cannot alter it on the fly.

---

Related Articles:

Post-snippet and post-thumbnail: where do they come from

Linking your blog to the social networks

Prepare Posts in Private, so you can Publish when they're Perfect

How to edit posts that you have already published

Mail2Post: post to your blog without using Blogger

Using Labels to categorize blog-posts

Read more > Stop Blogger offering to share your posts to Google+

Planning how to use your blog VS your Facebook, Twitter, Pinterest, G+, etc: what is each one for?

This article describes working out how your blog relates to the other communication tools that you use (sometimes called your "social media strategy"), and how members of a community-group can work together to so that their blog, Facebook page are used well. 


It includes a template that you can use to record your own group's decisions about how to use these tools, and a worked-example of such a template.

Your blog vs your email, facebook, twitter, photo albums  

Recently, I used Blogger to make a new website for a community choir. It replaced an older website that was expensive to change.

As we talked about what the choir needed, one challenge was that some people thought that "put it on the website" or "put in on Facebook" was the answer to every issue that involved communicating with members: It took a lot to explain that Facebook and the website are not actually places where existing members look regularly. (Some members are older, and don't even have cellphones that receive SMS/text-messages, much less computers and broadband connections).

Also, people were talking about putting videos of our concerts onto YouTube, and I realised that we would need to work out ways of doing this so as to show us at our best, and not get us into trouble with copyright laws.

I didn't use this jargon when I was talking to them, but the idea I had to get across to the commiittee was

To get a message to people who aren't looking for it, use a "push" not a "pull" or "by the way" message. [tweet this quote]

How to make a Tweet-this-quote

That means to use email, text-message, phone call, face-to-face, rather than the website or Facebook page or wall.

I also had to get them to understand that we were not linking our blog and our website - but that the blog would be the website:  it delivers all the features that we need, and most importantly is very easy to update.

Working with the committee to understand their goals and month-by-month activities, I developed this set of questions:

• how do we communicate with people (email/txt, Facebook, website, pictures, local newspapers)?
• who is the audience for each tools we use (members, potential members, audience, other choirs)?
• what types of messages to do we send?
• who is responsible for sending the messages?
• how they know that it's time to send a message, and what it should say?
• what can each committee-officer send without getting permission from the committee?
• what needs to be checked by someone else (or maybe even the whole committee) first?

Showing this in a table helped people to understand the big picture, and the role of the website and the other things that we use.

Your blog & social networks
Downloadable template

It occurred to me that people doing the same thing for their own club, organisation, sports team, non-profit, or even small business, might also like this table.

So here is a blank version of my template (MS Word format) that you are welcome to download and adapt for your own situation.

What the template includes

Is this a social-media strategy for your blog?

The format above is good for helping a membership-organisation work out where their blog/website fits into their overall communications tookkit: social media are just one of the ways that clubs can give messages to people (members, friends etc) and get feedback from them.

But if your core product is your blog, and you want to use social-outposts to promote it, then a slightly different planning approach is needed. In this case you need to get messages to:

• People who casually visit your blog (via search results, friends recommendations, backlinks), and whose preference for keeping up with what you do is via some other network, AND

• People who hang out on the "other network" and might notice your content in the other place and then visit your blog as a result.

To meet these needs, you need to put links to all the material on your blog into the other social networks - as well as using whatever content promotion techniques work best on that network. You probably also want to put some follow-invitation links on your blog, too. This is unlike the "website as targeted communications tool" approach, where you only put certain, very specific content onto your blog/site.

I'm still working on the fundamental difference between the two approaches, and what sort of worksheets might help people to plan for the 2nd case. Any suggestions on what I need to cover?

---

Related Articles:



Copyright, blogs and bloggers.

How to link your blog and your website

Linking your blog to the social networks

Showing a PowerPoiint presentation in your blog, as a slideshow

Read more > Planning how to use your blog VS your Facebook, Twitter, Pinterest, G+, etc: what is each one for?

Six simple subscription buttons for Blogger

This article shows how to make a very simple row of subscription buttons, using image files that you host yourself.

In the sidebar or header of my blogs, there is a very simple set of subscription buttons.  Visitors can use them to sign up to follow me (ie my blog's account) on Facebook, Twitter, RSS, LinkedIn, PInterest, etc.

These buttons don't fly-in, hover, shine, zoom, slide, pop out of egg-shells, sing songs or wash the dishes. [tweet this]

They don't take up any more space than is absolutely necessary. They don't spend load time calculating how many followers you have.

But they work.

This article is in response to a reader, who asked how to make a similar set of sign-up buttons for himself.   It's a little longer than some similar articles, because I wanted to give enough detail so you understand what needs to be done, and why.

How to make simple subscription icons for your blog:

1 Choose which social networks you want buttons for

You need to consider which of the social networking services you want to use to promote this blog.  Some people will say "all of them", but this isn't a great idea - it can take a lot of time, and if your blog's target audience aren't using a network, then you don't need to be there either.

So, make a list of the services you want to offer a follow-option for, and make sure that you have an account there for your visitors to subscribe to. This may be a personal account or a business / group / community / entity-page, all that matters is that you know how to refer to the account you want to offer a subscription too.

Some of the common ones are:

• Facebook
• Twitter
• RSS
• Google+
• LinkedIn
• YouTube
• Pinterest

Remember, these icons are for inviting your readers to follow your "social media outpost" on the other network:   for them to be useful, you need to be regularly posting on the networks you offer.

2 Get image files

The image file for each button you use needs to come from somewhere.  Some social networks provide it for you, and are happy to provide a copy each time your blog loads their subscription button.

But others don't.   For them, you need to make your own copy of the icon image-file that you need for the services you've chosen.

Google+, Feedburner and Twitter provide images, so you don't need to organise files for them yourself.

You are welcome to borrow the files shown below, which I've borrowed from elsewhere, I believe legally.   If you want to use one of these files,

• right-click on the picture shown here, 
• save the target somewhere 
• upload it to the file-host of your choice (I recommend Picasa-web-albums)
• and keep a note on the picture's URL wherever you loaded it to.

You can  also use your own image files. It doesn't matter if they are larger that mine, because the code re-sizes them. But for it to work properly, they need to be square, ie the same height and width.

Whatever icons you decided to use, you need to upload them to an image-host: I use Picasa-web-albums (ref What is Picasa?), but you may prefer a different picture-file host,

Make sure that you can find out the URL for each image.

Why this approach? Many people offering gadgets like this just let your blog link to their own copy of the images. But I don't like this - because if I ever move the file, your gadget will fail. I think you need to have and use your own copy, so I'm not responsible for your buttons working years in to the future.

3 Customize the gadget code

This has three stages.

First, get this basic code for the gadget bar.   Copy this into a text-editor (eg Notepad)

<div style="clear:both; text-align: left; float: left; padding-bottom: 10px;">
<!-- PUT THINGS IN HERE-->
</div>

Second, from the  section below, copy the code for the services that you want, and paste it into the area between the <div> start and end statements, ie where <!-- PUT THINGS IN HERE--> is in the basic gadget-bar code.

Notice that I've shown you what each block of code is for by using comments at the start and end, like this:   <!-- THIS IS THE CODE FOR FACEBOOK-->       The <!--     and -->    are the way to say "ignore what's in between here" in HTML.

<!--  THIS IS THE CODE FOR GOOGLE+ -->
<a href="https://plus.google.com/YOUR-GOOGLE-PLUS-ID?prsrc=3" style="text-decoration:none;">
<img src="https://ssl.gstatic.com/images/icons/gplus-32.png" alt="Subscribe to YOUR-BLOG-NAME on Google +" style="border:0;width:32px;height:32px; margin-left:5px; margin-right:5px;"/>
</a>
<!--  END OF  THE CODE FOR GOOGLE+ -->

<!-- THIS IS THE CODE FOR FACEBOOK--><a href="https://www.facebook.com/YOUR-FACEBOOK-NAME" imageanchor="1">
<img src="URL FOR THE FACEBOOK ICON"  alt="Follow me on Facebook" style="border:0;width:32px;height:32px; margin-left:5px; margin-right:5px;"/>
</a>
<!-- END OF THE CODE FOR FACEBOOK--> 

<!-- THIS IS THE CODE FOR YOUR RSS FEED--><a href="<b>YOUR FEED ADDRESS</b>" rel="alternate" type="application/rss+xml">
<img src="http://www.feedburner.com/fb/images/pub/feed-icon32x32.png" alt="RSS subscription icon" style="border:0;width:33px;height:33px; margin-left:5px; margin-right:5px;"/>
</a>
<!--  END OF THE CODE FOR YOUR RSS FEED-->

<!-- THIS IS THE CODE FOR TWITTER --><a href="http://www.twitter.com/YOUR-TWITTER-ACCOUNT-NAME">
<img alt="Follow  &lt;b&gt;YOUR-TWITTER-ACCOUNT-NAME&lt;/b&gt; on Twitter" src="http://twitter-badges.s3.amazonaws.com/t_logo-a.png" style="border: 0; height: 33px; margin-left: 5px; margin-right: 5px; width: 33px;" />
</a>
<!--  END OF THE CODE FOR TWITTER -->

<!-- THIS IS THE CODE FOR YOU-TUBE  --><a href=" http://www.youtube.com/user/YOUR-CHANNEL-ID">
<img src="YOUR YOU-TUBE IMAGE LOCATION" alt="Follow YOUR-CHANNEL-ID on YouTube" style="border:0;width:33px;height:33px; margin-left:5px; margin-right:5px;" />
</a>
<!-- END OF THE CODE FOR YOU-TUBE -->

<!-- THIS IS THE CODE FOR PINTEREST --> <a href="http://pinterest.com/YOUR-PINTEREST-ACCOUNT-NAME/">
<img src="http://passets-cdn.pinterest.com/images/about/buttons/big-p-button.png" style="border:0;width:33px;height:33px; margin-left:5px; margin-right:5px;"alt="Follow Me on Pinterest" />
</a>
<!-- END OF THE CODE FOR PINTEREST-->

<!-- THIS IS THE CODE FOR A LINKED-IN PERSONAL PROFILE--><a href="http://www.linkedin.com/in/YOUR-LINKEDIN-PROFILE-NAME/">
<img src="YOUR-LINKEDIN-PICTURE-URL" style="border:0;width:33px;height:33px; margin-left:5px; margin-right:5px;" alt="Follow Me on LinkedIn" />
</a>
<!--  END OF THE CODE FOR LINKED-IN-->
</div>

Third, customize this code with your own details.   For each service that you want to show a subscription button for, replace

1. The account name that you want your readers to subscribe to
2. Any other items in UPPER-CASE  (eg Twitter's "via" parameter)
3. The URL for the button image (if necessary)

4 Add the gadget

• Add a gadget to your blog in the usual way: The type of gadget to use is HTML/Javascript.
   Put the customised code that you made into the Contents field.
• Choose whether to give it a title ("subscribe" works with techy audiences, but in other niches phrases like "follow-up" or "get free updates" are better).
• Choose where to put it:
  If the space that you have available is too narrow, you may like to tweak the code - see below for more on this.
• After you've saved the gadget, test all the buttons to make sure that they all work they way they should

5 Back up the gadget code

Blogger doesn't have any way for us to back up the settings inside our gadgets.

And it's very easy to either accidentally delete the whole gadget, or lose the code becasue you try to change it and make an error:  if the HTML-gadget editor sees an error in your code, it doesn't tell you about the problem, it just deletes the code that it does not understand.

Because of this, I very strongly recommend that you keep a backup copy of the code

Some people use a text file for this. Personally, I usually keep it in a post in the private documentation blog that I keep for each of my main blogs.   Either way, it's important to keep it up to date as you do "tweaks".


Job done:   You should now have a working set of simple-subscription-buttons on your blog.   But you do still have some options for tweaking the button size and position, as explained below.

Adjusting the button sizing and spaces

Depending on the width of your sidebar, and the margins inside any button-pictures that you use, you may want to tweak the code a little.   This is easy enough to do.    Notice the structure of each piece of button code:

<!-- THIS IS THE CODE FOR A WHATEVER -->
<a href="THE URL TO SUBSCRIBE TO">
<img src="THE IMAGE LOCATION"
style="border:0;width:33px;height:33px; margin-left:5px; margin-right:5px;"
alt="Follow Me on LinkedIn" />
</a>
<!--  END OF THE CODE FOR WHATEVER-IN-->

I've put a few line breaks in, so you can see that there is

1. Opening comment
2. A href statement = the address of what is being subscribed to
3. The image address, 
4. Style commands for the image
5. alt-text (the latter is read out to visually-impaired people)

To change the size or position of the icon, or the space between then, just change the values in the Style commands, ie inside   style="border:0;width:33px; height:33px; margin-left:5px; margin-right:5px;

Make sure that you don't accidentally remove either of:

• The semi-colon character ( ; ) which needs to be at the end of each statement
• The full-colon character (  :  )  which is in between the name of the thing you are changing and the value.     

Adding more social networks

To add new services to this, you just need to follow the same process, ie

1. Make an account to follow
2. Get an icon-shaped (ie square) image to represent it
3. Add a block to the code, with the "follow-me" code from the relevant service in it.
4. Post regularly to the account you made  (or else there's no point in asking people to follow you there.

Are there any other social networks or subscription options that you'd like me to add to the list above? Let me know, and I'll see if I can figure out the code for you.

---

Related Articles:

Linking your blog to the social networks

Getting started with SEO for Blogger-users

An introduction to Picasa and Picasa-web-albums

File-hosting options

Adding a Follow-me-on-Twitter button

Read more > Six simple subscription buttons for Blogger

Putting a custom +1 button into your blog

You can add a custom version of Google's +1 button to your blog, just like  Facebook's Like button.  It can go in under the title bar in the post-header or beside or below each post.  Or it can be a gadget.   And the "plus one" function can apply to  an individual post or your whole blog.   


[Updated Jul 2011 to link to the asynchronous version of the code.] 

What is Google's +1 button

+1 is Google's answer to Facebook's Like button - or at least that's what Google are hoping.

They first announced it in March 2011, and have now added it to the standard sharing buttons for Blogger.

The big difference between +1 and Like is where the results appear:

• Like shows up in counts in the Like button and inside Facebook in the feed from the person doing the liking.    
• +1 shows up in Google search results - it's still not clear if this is just in search results for your "friends" (however they're defined) or if it shows in search results for everyone, or how much influence it will have on search-result.  

Adding +1 if you don't use Blogger's standard sharing buttons

Provided you're willing to accept the disadvantages of editing your template, it's easy enough to add a customized Tweet or Facebook share button to your blog.

Adding a customised +1 button is very similar.   Just follow these steps:

1   Go to the +1 button configuration page Webmaster Central.

2   Choose the basic settings you want:  pick button size, annotation and language. 

So far, I've used the medium (20px) size, as it seems to fit best with the other share-items that I've added before.   You should be able to see it at the top of the page if you're reading this article through a web-browser.   Note that this option is slightly smaller than the default "standard" option.

Annotation is about how your number of +1s is "noted" in the button - choose the different options and watch what happens in the preview to see which one you want to use.  Or choose None if you don't want the button to show a count.

3  Click on Advanced options, and decide what you want to to apply the +1 function to:

• If you want to to put the +1 button where it can be used to on the individual post URL rather than your whole blog, then put some text like PUT-URL-HERE into the "Url to +1" box.   

• If you want readers to +1 your whole blog, just enter your blog's web-address (ie URL) into the "URL to +1" box.  
  (NB It may be possible to leave it blank in this case, but I'd rather specify exactly what URL to use, in case anyone hits +1 from an archive page or similar, which has a separate URL).

5   Copy the HTML shown.


The code provided is in two parts.  The first section is what you put into your blog whereever you want the +1 button to appear.   The second part starts with a comment:  "<!-- Place this tag after the last plusone tag -->".   This means that:

1. You only need to put the code underneath that line into your blog once, and 
2. The place to put it is immediately after the last time you put the +1 button code into your blog.  Iif you only add the button once, then put after that time.   

6   Add it to your blog in the same way that you would add add any other share-this-to-whatever social sharing button, except --- if you want the button to recommend individual posts not the whole blog, then before you save the change, replace the PUT-URL-HERE part of

href="PUT-URL-HERE"    (or whatever text you used)

  with

expr:href='data:post.url'

What your viewers will see:

Visitors who see your blog in their web-browser (not through an RSS feed reader) will see a new button wherever you choose to put it.   (People who read your blog thru feed aggregators, or by email subscription, won't see it.)


When someone clicks the button, what happens depends on whether they are logged in to a Google account at the time, and whether that Google account has a public profile.

I'm not even going to try describing all the options possible as yet (or this will never get published!) but you are welcome to try the one at the top of this article to see how it works

Later on, as the button starts to be used enough to provide meaningful data for Google, potential viewers who see you site listed in Google search results will start to see counts of the number of times that other people have "plus-one'd" you in their search results.

---

Related Articles:



Putting a Share this to XXXX button onto your blog

Advantages and disadvantages of editing your template

Putting a "tweet this" button on your blog

Connecting your blog and the social networks

Understanding Google accounts

Read more > Putting a custom +1 button into your blog

Sharing blog posts to a Facebook page instead of your personal profile

You can share from your blog to a Facebook page, instead of a profile, by switching to use the Facebook page before you carry out the share.

Sharing blog posts to Facebook

There are several  tools that anyone who is reading your blog (including you) can use to share it on Facebook, provided you have implemented them.   They include Blogger-provided social sharing buttons, Facebooks' own like / recommend / send social plug-ins and share button and 3rd party tools (AddThis, ShareThis etc).

And in the most low tech-option of all, anyone can just copy your post's URL and manually paste it onto Facebook themselves.

But no matter what option is chosen, one thing stays the same:   the place in Facebook is the share or like goes to is controlled by how the person doing the sharing is logged in to Facebook.   It is not controlled by you, the blog-owner who is providing the share / like / etc button.  This is true even if you are sharing your own posts:  it's your Facebook settings that matter, not the settings in your blog.


Switch to a page so you can share to it:

If you want to share your own blog to a Facebook page instead of your personal account, then you need to have switched to use Facebook as that page before you do the share (or like / recommend etc).  
 

Doing this is quite easy, provided you are an administrator for the page:

1   Log in to Facebook.

2   Choose Use Facebook as Page from the Account menu (currently a drop-down in the top right corner ... it may move around in future).

3  Click Switch beside the name of the Page that you want to share to, from the list shown.   (There may not be a list if you are only an administrator on one page)

This will take you back to whatever Facebook screen you were on before.  However when you do anything (eg click Top News or Recent, post to someone'e Wall, etc), it looks like it was the Page, not your Profile, that did the action.

This means that you can share a blogger link in the usual way, and it will look like it was shared by the Page - and it will be shared to the Fans of the page, not to your personal Friends.

And if you are not an administrator?
If you're not an administrator for a Facebook Page, then you cannot switch to it.   You may be able to post to its wall, depending on the security settings that the administrator has entered - but you will need to share the blog (etc) manually.

Current limits and problems:

I'm 99% certain that you need to be logged in to Facebook  and reading the blog using the same browser (ie in two different tabs or windows) for this to work.

Also, at the moment, there is a problem with Facebook's own social plugins (the Like / Recommend / Send buttons, and at least some of the other badges):  when you are using Facebook as a page and looking at a website which has the Facebook plug-ins installed, then the wrong thing is shown.   For example, on Blogger-HAT I'm currently seeing

• My Facebook profile picture instead of the Like / Send buttons above and below posts, and
• A big Facebook logo instead of the Like badge for my page.

This means that I cannot use the Like/Send buttons to recommend new posts to my Page.  However the old-style Share button does still look and work correctly (I just tried it out on BloggerSentral, to be sure - see the result here).

For my own posts, I don't think this is much of a problem:  I'd rather do the sharing manually, so that I can customise the message to the section of my audience who follow my blog on Facebook rather than on Twitter or through RSS or using a follow-by-email subscription.   But it may be more of an issue if you want your readers to share your blog, and they would like to do it on their own Facebook Pages instead of their Facebook Profiles.    Lets hope that Facebook fix this soon.

Automatically sharing to a Page:

Many people would like a Page to be automatically updated when they post to their blog.  

I've heard lots of people saying that this can be done, and talking about doing it via RSS feeds etc - but personally I've not succeeded in making this work reliably.   For one of my pages that has quite a few fans, it worked occasionally - and it was a bit annoying when I couldn't control the timing of the page update because the feed seemed to be delayed.

Have you found a method that works every time?

---

Related Articles:



Adding Facebook's Share button to your blog

Putting a badge for a Facebook page into your blog

Putting a badge for your personal Facebook account into your blog

Tools for linking Blogger and the social media

Putting "follow me on Twitter" into your blog

Why RSS matters to bloggers

Making an email sign-up option for your blog

Read more > Sharing blog posts to a Facebook page instead of your personal profile

Putting a "follow me on Twitter" button onto your blog

This article explains how to put an official "Follow me on Twitter" button onto your blog.

"Follow-me" VS "Look-what-s/he said"

Previously, I explained the diferent approaches to linking your blog and the social media.   In particular, I looked at the difference between "follow me" and "look what s/he said over there".

If your blog has a Twitter account, you may want to offer your readers a quick way to follow your tweets  rom their own twitter accounts.   This is an example of the "follow-me" approach, and is what this article is about.


How to add Follow Me on Twitter

1  Go to Twitter
If you don't already have a Twitter account for your blog (or for yourself, if you blog is a personal one), you may need to sign-up with one.  Or if you do have one, then just log on.

2  Look at the buttons they offer
Today, you get to this by clicking on the Resources link, which is in the panel at the bottom of the left-hand-sidebar.

This takes you to:  http://twitter.com/about/resources: where you can find lots of useful things including Follow button options.

(Last time I updated this article, you had to click Profile on the top menu bar, then click Resources which was near the bottom of the right-hand panel.   Twitter seem move this to a different place on their page fairly often, so do have a good look around for it - or for Buttons or something similar if you can't find the resources link.)


3  Choose Follow, and set the options you want:

• Check that your Twitter account name is correctly in the User box (it should be, if you're logged in to the right twitter account at the time)

• Choose whether or not to show your Twitter account name

• Choose a button size (large or not)

• Choose what language to show the button words ("follow ... on") om/

4  Copy the HTML

5  Go to your dashboard in Blogger, and add the code to your blog.  

There are several ways to add 3rd party HTML to your blog, depending on where you want to put it.  A "follow me on" button is probably more appropriate in a gadget (option one in that article) than in a place in your template where it relates to individual posts.


What your readers see

If you use a new style follow tool:

• A reader who is not logged in to Twitter when they click your button is asked to log in.
• After they have logged in to Twitter, they are added to your Twitter followers list, and the icon-label displayed on your blog changed from "follow" to "following".

If you use the old style button, then:

• When a reader clicks your Follow-me on Twitter button, Twitter loads in the current window.

• If they are already logged in to Twitter, they're shown a summary of your profile, with Follow, Add to List and Block buttons.

• If they are not logged in to Twitter, they're shown a welcome message that describes Twitter and invites them to sign-up or to log in.

---

Related Articles:



Putting a "follow me on Facebook" button onto your blog

Adding a "Tweet" button (ie look what s/he said) to your blog

Putting a "share this on XXX" button into your blog

Adding 3rd party HTML to your blog

Giving a Share this on LinkedIn option on your blog

Options for linking your blog and the social networks

Read more > Putting a "follow me on Twitter" button onto your blog

Putting a Facebook "like", "send" or "share" button on your blog

There is an official Facebook button that your readers can use to share your blog, your current post, or any website, on their own Facebook account.  This article describes how to get the code from Facebook and install it into Blogger - but most of the information applies to other blogging tools (Wordpress, TypePad, etc) and many other web-site tools also.

Previously I've described the different ways that you can link your blog and the social-networking sites.

Facebook badges can be used to send your blog's readers to your personal Facebook profile, or to your page.  These are an example of the "follow me" approach.

But often blog authors want to give their readers a tool to share the blog that they are reading on their own (ie the readers own) Facebook account - that is to use the "Look what s/he said" approach.

Your readers could just copy-and-paste a hyperlink to your page into their own Facebook account, but it's clunky, and means that they have to start up Facebook themselves.

Various people have written 3rd-party widgets to put a Facebook icon on your blog, set up so that when a reader clicks it the current page it is automatically shared on the reader's Facebook account.  Some even count how many times the button has been clicked.

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

• There's no guarantee that they don't have nasty side effects on your blog.  
• Some of them ask you to type your Facebook id and password onto a page owned by a 3rd party.   They promise that the won't do nasty things with the data - and some of them mean it.  But you just don't know who to trust.  
• If Facebook change how they do things, there's no guarantee that 3rd party tools will also be changed:  you could easily be left with a button that doesn't work any more.

I'm not saying that all the 3rd party gadgets are bad:  I've used some on my sites with no ill-effects.   But I've never been happy about it. And the day that I used the AddThis button on a newspaper website to share an article to my personal travel-blog, I had a mini panic-attack 1/2 an hour later when I realised that I'd just given my email and AdSense password to a third-party.

One approach - Blogger's social-sharing buttons:

Google have introduced social-media buttons whichcan be shown at the bottom of each post.   They only work on blogs with Designer Templates (ref Types of Blogger Templates)

They're an improvement on the 3rd party gadgets, but I still don't like the way they look, and the lack of options to customize them, so I usually have them turned off.

A better approach - Facebook's official gadgets:

The Share Button:

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

This let you customise a few features, and also had a preview function

You can still see this gadget on many web-pages.   But you cannot get the code for this from Facebook any more:  they now recommend using the social plugins (more about them below) instead.

The Share button still works though, and can be 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 bit so it can be understoond more easily - the extra line-breaks can be removed when you use it.)

You can configure the code by changing the value of type:  other options are

• button_count   (shows a counter beside a smaller button)
• button (shows a smaller button, still with the word "share"
• icon (shows the small "f" only)

See Sharing from your blog to the Social Networking Sites for more information about where to put the code, including general and post-specific options.

Notice that because the code above includes   expr:share_url='data:post.url'   you need to put it in a post-specific place in your blog.   Another option would be to replace data:post.url  with the URL for your blog, and put the code into a gadget etc.

Be aware that sometime in the future, the Share button may stop working, because Facebook stop supporting it.   I don't expect that to happen soon though, because it's now installed on so many web-sites worldwide.

The Like and Send buttons:

Facebook's official gadgets for saying "look what s/he said" are now the Like and Send buttons.

Officially, you can get the code for them on the Developers > Social Plugins > Core concepts page:  don't be put off because the page is labelled "develoeprs" - it really is quite simple to install the buttons into your blog.

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

"The href entered is not recognized as a valid URL.".

So this is the code I got from them before, modified to be used in a post-specific place - see below - and to not use 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 picture shows the options that were available when I got that code:

It's fairly easy to look at these options, and work out changes you might like to make, eg

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

When you have chosen the options you want:

• Click the Get Code button at the bottom of the page, 
• Copy the code that is provided, and 
• Install it into your blog (see below for more info about this).

Sharing a Post vs Sharing the whole blog:

If you put a a Like, Send or Share button into your own blog as a gadget, then what is shared is your whole blog, not the particular Post that is being read, for example   

http://blogger-hints-and-tips.blogspot.com   (this blog)

instead of

http://blogger-hints-and-tips.blogspot.com/2010/04/tools-for-linking-blogger-and-social.html  (a post)

If this is what you want your readers to do, then just put your blog's URL into the "URL to Like" field (or the expr-statement if you're using the Share button code), and add the code as a gadget.

But if you want your readers to share individual posts, then you need the Facebook-button to appear with every post, in either the post-header or post footer  This is a little harder than adding it as a gadget.  To get the code to use for the Like/Send buttons

1. Put some dummy text into the URL to share field
2. Get the code
3. Replace the dummy text with instructions to use the URL of the current post, ie change 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 the code to your blog is described fully in Putting Share this on XXX buttons into your blog (it's done the same way, no matter what social network's share button you are adding).

Enhance the sharing using Open Graph tags

Facebook was one of the first sites to use Open Graph (OG) markup, which is a way to label parts of your blog so that social websites know what to use in each of their features.

Unfortunately Blogger templates don't automatically contain Open Graph code.   But you can add it yourself.   This isn't essential - people can still share your posts without the tags being present - but it does generally make shared of your pages look better.

What your readers see

When a reader clicks your Facebook button, they'll be asked to log in 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, and they are shown a small message in your site, giving then the opportunity to un-do the like, or to add a comment which is also shown on their wall along with the like.

If they used the Send button:

They are shown a small pop-up window where they can type in names (from their existing Facebook friends) or email addresses.  A message about the item is send to the selected people using either Facebook Messages or regular email for people who aren't on Facebook.

If they used the Share button:

They see a window where they can enter a message, and see the link and description that they're going to be sharing.

The link is either the page that they were viewing when they clicked the button, or another URL (if you chose the Custom URL option when you were setting up the gadget).  The description is an advertisement for Blogger.  However both of these these can be changed if your reader clicks on them.

Lastly there's a captcha window, where they have to enter some security test.

---

Related Articles:

Linking your Blog and the Social Media

Adding a Facebook personal account badge to your blog.

Adding a Facebook Page badge to your blog.

Types of Blogger Templates

Putting 3rd party HTML code into your blog

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

Read more > Putting a Facebook "like", "send" or "share" button on your blog

Adding a Facebook personal account badge to your blog

This article describes making a Facebook badge to promote your personal Facebook account, and putting it onto your blog.

Facebook, Profiles and Pages:


As I've previously explained, Facebook has Profiles for people, Groups for collections of people who want to approve individual members who join, and Pages for everything else.

Many people called their Profile their Facebook "account" - and lots are confused about the differece between personal profile, and pages.   But there is a big difference - and it starts to become obvious when you look at how to promote your facebook presence inside your blog.

I've already described how to make a badge for a Facebook Page.   Now I'm going to look at how to make a different kind of page, to promote yourself, ie your Profile.

This is an example of the "follow me" approach to linking your blog and the social networks, although for Facebook pages your reader becomes a Fan rather than a Friend.

Making a badge for your Facebook profile:

Log into Facebook with the personal account that you want to promote.
.
Choose Profile (currently on the top right menu, just next to Home).

Scroll down the left hand panel,until you see Share a Badge (usually at the bottom) - click it.   This takes you to Facebook's badges page, with Profile badgets automatically selected.
  
Click Edit this Badge,

Choose the format and contents that you want to show.
Remember, what's shown is the information from your personal Facebook account, and if you put it onto your blog the usual Facebook security rules won't be used to control who sees the information.   Only use these badges if you're very sure that you want your information to be shared.

When you are happy with the selections, choose, Save the badge.

Facebook has options to step you through the process of adding the badge (as a gadget) to Blogger.   But I always prefer to choose Other and then Copy the code provided (put the mouse into the field, press Ctrl/a to select it all, then Ctrl/c to copy).

Install the code into your blog:  as always there several options for installing 3rd party HTML, depending on where you want to put the badge.


What your visitors will see

People who visit your blog through a web-browser will see a badge showing the information that you have chosen to show.

When they click on it, they will be taken to Facebook and as much of your profile as your current privacy settings let them see.

As always, people who read your blog via a feed reader (Bloglines, Google Reader, etc), or by email subscription (eg having used follow-by-email) may not see the Facebook item, depending on where is places and what options their email program has.


Customizing the code:

Unlike other Facebook badges, the profile badge has very few options for being customized by editing the code, which looks like this:

<!-- Facebook Badge START --><a href="http://en-gb.facebook.com/WHOEVER" target="_TOP" style="font-family: &quot;lucida grande&quot;,tahoma,verdana,arial,sans-serif; font-size: 11px; font-variant: normal; font-style: normal; font-weight: normal; color: #3B5998; text-decoration: none;" title="WHOEVER">WHOEVER</a><span style="font-family: &quot;lucida grande&quot;,tahoma,verdana,arial,sans-serif; font-size: 11px; line-height: 16px; font-variant: normal; font-style: normal; font-weight: normal; color: #555555; text-decoration: none;">&nbsp;|&nbsp;</span>

<a href="http://en-gb.facebook.com/badges/" target="_TOP" style="font-family: &quot;lucida grande&quot;,tahoma,verdana,arial,sans-serif; font-size: 11px; font-variant: normal; font-style: normal; font-weight: normal; color: #3B5998; text-decoration: none;" title="Make your own badge!">Create your badge</a><br/>

<a href="http://en-gb.facebook.com/WHOEVER" target="_TOP" title="WHOEVER"><img src="http://badge.facebook.com/badge/WHOEVER.WHOEVER.png" width="177" height="84" style="border: 0px;" /></a><!-- Facebook Badge END -->

An important note:   if you create a badge like this and put it into a website, and then go back and edit the badge in Facebook - the website will show the updated badge.

---

Related Articles: 



Putting HTML from a third-party into your blog

Adding a Facebook "Page" badge to your website

Tools for linking Blogger and the Social Networking sites

Putting a Facebook "share this" button on your blog

Read more > Adding a Facebook personal account badge to your blog

Putting a badge for a Facebook Page into your Blog

This article describes making a Facebook badge to promote your page, and putting it onto your blog.

How Facebook is organised:

This article is about how to make a badge to promote a Facebook Page. 

This is an example of the "follow me" approach to linking your blog and the social networks, although for Facebook pages your reader becomes a Fan rather than a Friend.

Many people are confused about when they should use each of the types of "thing" in Facebook - so it's worth remembering that:

Facebook has

• Profiles - accounts for flesh-and-blood, living, breathing, individual people
• Pages - for websites, brands, and organisations that don't want to approve all their Facebook members
• Groups -  for organisations that want to approve individual members who join (and in return, group-owners can send private messages to individual members.

The tools that Facebook provides for promoting the each of these are slightly different. 

Making a badge to promote a Facebook Page:

Log into Facebook with a profile (ie personal account) that has administrator rights for the page you want to promote.

View all your Pages from the Pages link in the left sidebar

Select the Page you want to promote, by clicking on its name.

Click Edit Info:  this shows you the basic information stored in Facebook about the thing that the page is for (you may like to edit it while you're here).

Click the Edit button (on the right side of the screen)

Choose the Resources tab from the left-hand menu bar

Choose Social Plugins, from the Connect with People category.  
(This takes you to the Developers / Documentation page - I could have just linked directly to it - but Facebook change things around sometimes, so I think it's helpful to understand how to get things based on their thinking.)

Choose Like Box.  

Set the options for the item  

• Facebook Page URL - this needs to be changed to the URL of your page.  
  You may need to open Facebook again in another tab to see this
  If you have less than 25 Fans already, then your page's URL will be something like http://www.facebook.com/pages/Blogger-Hints-and-Tips/144194435594821 and you can get it by copying the link from the list of Pages for your account.
  Once you have more than 25 fans, you can choose a  page-url on the Edit Info > Username screen.
• Width - choose a value that suits the space on your template where you want to put the box.
• Show faces, show header:  choose options that suit your purpose and blog template
• Show stream:  this controls whether you show posting from the Page inside your blog

As you choose options, the preview on the right updates to show what the button will look like:

When you are happy with the selections, choose Get Code.

• Currently, there are options for an iframe based button, or XFBML which uses Javascript - only use it if you are sure that all your visitors will have it enabled. 

Copy the code provided

Install the code into your blog - there several options for installing the HTML, depending on where you want to put the badge or button.


What your visitors will see

People who visit your blog through a web-browser will see a Facebook area, including a Like button and whatever other options you have chosen.

This can be quite a powerful tool:  you can easily use two or three different combinations on different parts of your blog:  one that has no border, no faces and no header but does show a Stream can effectively look like a "live" feed from your Facebook page to your blog, while another one with different options can show off the size of your fan-base.

Be aware that the Like button shown in this button gives people the option to Like your Page in facebook  - not your blog directly, and not the current post that they are reading.   If you want them to be able to Like your blog or blog-posts, you need to provide this option separately (and many of your visitors are likely to be confused by the different).

As always, people who read your blog via a feed reader (Bloglines, Google Reader, etc), or by email subscription (eg having used follow-by-email) may not see the Facebook item, depending on where is places and what options their email program has.


Customizing the code:

You can change the characteristics of the box without having to generate the code from Facebook again.   For example you can later the width and/or height - just remember to do it in both of the places required if you are using the iframe option:

<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FBlogger-Hints-and-Tips%2F144194435594821&amp;width=160&amp;colorscheme=light&amp;show_faces=false&amp;border_color=purple&amp;stream=true&amp;header=false&amp;height=395" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:160px; height:395px;" allowTransparency="true"></iframe>

fyi, I could have just quoted this code, and said to use it on your blog.  But I don't usually do this when I'm describing how to link Blogger and any third party product, because it's likely that Facebook (or whoever) will change their code in the future:  it's always safest to get the most up-to-date copy of the code from the source-site when you need it.

The facebook page where you get the code from also has more information about controls you can set in the code, too.   Check it out for more information.

---

Related Articles: 



Putting HTML from a third-party into your blog

How the data in Blogger blogs is organised

Linking Blogs and Websites

Tools for linking Blogger and the Social Networking sites

Putting a Facebook "share this" button on your blog

Copyright, Blogs and Bloggers

Why RSS / Subscribe to Posts is important for bloggers

Read more > Putting a badge for a Facebook Page into your Blog

Linking your Blog to the Social Networks

This article is about the difference between blogs and social networking sites, and the ways you can link your blog to the various sites.

Blogs vs Social Networks

The words "Social-network" or "social media site" usually to refer to Google+ Facebook, Twitter, LinkedIn, Bebo, MySpace,  etc.   But they can include any site that you think of as part of your own network of people.   Some people even include Flickr and YouTube in the list, though personally I still see them as about file sharing rather than "friendship", even though you can define groups of people that you share the files with.

Your blog is also part of your on-line social network.   But it's different from the other social-media sites:

1)  It makes sense for one person to have more than one blog - it doesn't make sense to have multiple personal Facebook accounts (there's only one you) , and

2)  A blog is mainly about showing people your writing (or photography etc) in longer amounts (posts), with a small amount of profile information.   The other social-media-sites are mainly about having a larger profile, and putting small bits of writing (status updates) with that.

3)  In your blog, history is kept - history matters.   In the social-media-sites, NOW is what matters most.   We don't really know how long the various social websites will keep history on-line for, but can you imagine caring about what someone tweet-ed ten years ago, unless you're a historical researcher?

Ways of linking your Blog and the Social Networks

There are many, many different options for linking your blog and regular websites.

Social media offer a more limited range of options, because you generally can only change the content, not the structure, of your site there.   But it can be difficult to understand the different types of links, because people are quite loose in the way they're described.

At the moment, I'm seeing four main approaches to linking your blog with the "social networks":

"Follow-me"

Asking your blog-readers to link to their own social-media-site account to your (or your blog's) account on the social-site

"Look at this"

Giving your readers a tool that they can use to update their own social-media site (usually their status) with a reference to the page on your blog that they've just read.   This may involve sharing, or just noting their approval ("liking") your site.

"Look-what-I-wrote"

Automatically updating your social-network-site with content that you posted on your blog.

This has a variation, "look what she wrote" - setting up your social-network site to automatically show what some other interesting person said.

"Look-what-I-said-over-there"   

 Automatically updating your blog with content that you posted on your social networking site.

Making the links

Having identified these ways of linking your blog and Facebook, Twitter, etc, the next step is to actually make the links.  The social networks do these things in different ways, and not every type of link is available in each network, yet.   See Tools for linking your Blog and the Social Media for more specific information.

Working out what to post where

Sometimes, you might want to make the links so that people can follow you where they want to - but still use different tools primarily for different audiences, based on who actually uses each network.   This template can help you work out what you want to use each network for.

---

Related Articles

Options for linking your blog and regular websites.

Taking action when someone has copied your blog without your permission

Why RSS / Subscribe to Posts is important for bloggers

Adding social networking tools tools to your blogs' RSS feed.

Tools for linking your Blog and the Social Sharing Sites

Read more > Linking your Blog to the Social Networks