With Google Friend Connect going away shortly, I wanted to repost a tutorial I made and put up on Raspberry Sunshine a few months back. I have received quite a few e-mails about this post and am so happy that there are a few of you out there that were able to use it!  Hopefully you will have an easy switch over and a cute new button as well!

Coming up this weekend, I am going to share with you tons of pictures and information about The Camp Stitchalot Bag!!! This is a brand new pattern released today Sew Sweetness. Sara has created another winner with this unique tote and I cannot wait to share my pictures and review with you! So please make sure you visit this weekend for pictures and purchasing information.

Now, onto the tutorial!

 How to personalize your +Bloglovin’ button!

When Google eliminated the Friend Connect on WordPress blogs a few months ago, I struggled to find a way to follow my favorite blogs. I was also frustrated that as a fairly new blogger, how would I get people to follow my site besides Facebook or e-mail? After much reading and searching, I found bloglovin’.

Bloglovin’ is now my go-to blog reader. Want to follow a new blog? Type the address of the blog you want to follow in the search box and it shows up. There is a follow button you press and that blog is then added to your reader. As a blogger, bloglovin’ keeps track of how many readers follow your blog which is cool. Every time I sign on, I am told how many new posts I have. Then there is the feed which has a large picture and snippet for each current post. All I have to do is click on the blog title and I can read the post.  Once I’ve read the post I can mark it as read and it’s taken off my list of to-reads.

So if you’re like me and work on the WordPress platform (Blogger has this too!), bloglovin’ provides buttons for you to put on your site. New readers can now see this button and start following your blog. Easy! I know it’s not GFC but it’s still a great way to get new readers to follow your blog! Bloglovin’ also provides buttons for you to use, but what if you want one to match your site design?

Try this: Scroll down to the bottom of their main page you’ll see a HELP section. Click on it and you’ll see a bunch of FAQ’s. Scroll down a bit and you’ll see a link that says, “How do I create my own widget?” Bingo!!!  For the bloggers with a creative bent or want their bloglovin’ button to match their site, click on that question and follow the directions.

See my cute pouch to my left? Click on it! I made it using the directions on their site, but here’s a walkthrough of how I did mine:

1. Set up your account, then head over to http://www.bloglovin.com/en/widgets and pick one of the follow buttons, click on “get this icon” then type in your blog name.
2. A box will appear that says “This code is created for” -your blog name-. Now you can either click on the “How to put this icon on your blog” and follow the directions for the basic buttons, or you can kick it up a notch and proceed.
3. To proceed:  Copy and paste the code they create.  I usually choose to open a text edit program so if I mess up it’s all there waiting for me to start over again. Here is what your code should look like:

<a title=”Follow RaspberrySunshine on Bloglovin” href=”http://www.bloglovin.com/en/blog/1234567″><img alt=”Follow on Bloglovin” src=”http://www.bloglovin.com/widget/bilder/en/widget.gif?id=1234567″ border=”0″></a>

4.  This coding is your custom bloglovin’ widget for your site.  But that is for the basic button. The information after the “SRC=” area is what you are looking to replace.

5.  Find a photo uploading site. I use Flickr for it’s ease of use and because I use it for my blogs. Once you are signed on, upload your photo and save it. On the upper-left corner near the picture click on ACTIONS, then scroll down and click on “Edit Photo in Aviary”  This will open your picture up and now you can edit it the way you like!  I simply resized my picture then added Bloglovin’ text to the front. (Make sure you SAVE! )

Once your new edited picture is saved, click on the share button. Scroll down and Grab the HTML/BBCode.  Make sure before you copy the code you confirm the size in the scroll bar below the code! Now, copy and paste this code to your text sheet that had the original coding from above. So now you’ll have codes like this:

Bloglovin’ code:

<a title=”Follow RaspberrySunshine on Bloglovin” href=”http://www.bloglovin.com/en/blog/1234567″><img alt=”Follow on Bloglovin” src=”http://www.bloglovin.com/widget/bilder/en/widget.gif?id=1234567″ border=”0″></a>

Flickr code: (My HTML/BBCode)

<a href=”http://www.flickr.com/photos/owenzachary/1111111111/” title=”DSC_0004 copy 3 by RaspberrySunshineBlog, on Flickr”><img src=”http://farm9.staticflickr.com/8459/1111111111_177130aebf_o.jpg” width=”200″ height=”133″ alt=”DSC_0004 copy 3″></a>

Bloglovin’ now want’s you to replace their code AFTER the **SCR=** and add the flickr code. My final coding looks like this:

<a title=”Follow RaspberrySunshine on Bloglovin” href=”http://www.bloglovin.com/en/blog/1234567″><img src=”http://farm9.staticflickr.com/8459/1111111111_177130aebf_o.jpg” width=”200″ height=”133″ alt=”DSC_0004 copy 3″></a>

Now take your completed code and put it in a text widget and you’re done!! This really is more time consuming than hard…but totally worth it!

** Handy tip #1: It is important that you do NOT leave out any numbers, words or abbreviations. One little comma can render your cute new button useless, so double check your work.

** Handy tip #2: If you want/need to have your button centered, place <center> at the top of your coding. You will then place a </center> on the very bottom/end of code.

I hope you will find some use for this information! Between bloglovin’ directions and my notes I have a feeling I’m going to be changing up my buttons often. Please let me know if you had trouble with the directions.   NOTE: I use WordPress and Genesis Framework, but this should work in any text widget area. Please check your platform for further direction as I am only a rookie!