Saturday, February 25, 2012

TWITTER and FACEBOOK Icons: Best Widgets or Buttons for Blogs or Websites




TWITTER and FACEBOOK and other social media icons (aka. widgets, buttons, badges, gadgets) are a must have and are of the utmost importance for a blog or website because they all increase your blog traffic, meaning your number of readers and followers.



You can choose to use a singular social media icon (meaning just one for Twitter or one for Facebook), or a Floating Share Buttons Widget, or a social media set of icons that includes not just Twitter and Facebook but several, even hundreds of, social media icons that can be accessed from a drop-down menu all inside of one box. The best option is to use both the Floating Share Buttons Widget and the social media set of icons found on AddThis.com.




(1) The AddThis.com social media set of icons includes a set of over 300 icons. Once you add the AddThis set to your blog, just scroll over the top of the AddThis icon (it is the one with the + sign inside of the orange square, the last one in the picture at the left, to select any other social media sites that you want to share a blog post to). Since quite a few people have told me that they get confused when trying to add the AddThis icon set to their blog, here are the steps to do so:

Sign-up to AddThis at: www.addthis.com by clicking on Join Now and while still signed in to it, and your blog, add its social media icons to your blog at the bottom of all of your blog posts by clicking on the 'Get AddThis' button at the upper middle left of the screen. Under 'Get AddThis for' click beside Blogger. Under 'Style' click on and choose one of the the two social media icon styles (sizes). To the right center of the screen under 'Install AddThis in Blogger' click on 'Install Blogger Widget' and the Blogger 'Add Page Element' screen pops-up, now click on 'ADD WIDGET'. Check your blog posts and you will see that the AddThis social media icons that you added now appear at the bottom of all of your blog posts. The last step is to also add the AddThis Facebook Like, Twitter Tweet, Google +1, and Share icons to your blog posts by following the exact same steps here that you used to add the first AddThis social media set of icons by clicking on the 'Get AddThis' button and continuing the steps and this is how they will appear at the bottom of all of your blog posts:




ShareThis.com (a picture of its website and share icon is to the left) is also another very popular social media set of icons used by several people on their blogs and websites. However, I and others have encountered several issues in the past, and even today, with its website and some of its social media icons that you download for your blog are not functioning properly. I prefer using and recommend the AddThis.com social media set of icons and I have not experienced any issues with their website or their icons. I will cover ShareThis.com issues later on in another blog post.


(2) Floating Share Buttons Widget is a social media set of icons that appears as a vertical sidebar widget at the left of your blog and can include Twitter Tweet, StumbleUpon, Google +1 (Plus One) and Facebook Like and Send. This Floating Share widget always remains visible along the left side of your blog as you, or your blog readers, scroll up and down your blog allowing your readers to tweet or +1, or like and send, your blog posts from any location on your blog. As you can see (to your left) I have this widget on my blog. Follow the steps below to add the same one that I have to your blog:

Adding Floating Share Buttons Widget to Blogger:

*Go to Design > to open the Page Elements screen.
*Under 'Add and Arrange Page Elements' click on one of the Add A Gadget buttons.
*In the 'Add A Gadget' pop-up window>Basics, scroll down to and select HTML/Javascript by clicking on the blue + sign to the right.
*Inside the 'Configure HTML/Javascript' pop-up window copy the 'Floating Share Buttons Widget' html code below and paste it inside of this pop-up's 'Content' box.
*Click on Save to save the Floating Share Buttons Widget.
*Now that you are back on the 'Add and Arrange Page Elements' screen drag the widget and reposition it over (on) top of the 'Blog Posts' gadget. (Note: You may have to scroll down the 'Add and Arrange Page Elements' page to see and get to the 'Blog Posts' gadget). 
*Scroll back up and click the Save button (top right hand corner).
*Click on 'View Blog' and you will see your new 'Floating Share Buttons Widget' appearing on your blog.

Here is the 'Floating Share Buttons Widget' html code:

<!-- floating share bar Start blogger4ever.com-->
< style type="text/css">
#pageshare {
float:left;
margin-left:-80px;
background: #fafafa;
position:fixed;
bottom:20%;
border:1px solid #e5e5e5;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
#pageshare:hover {
background-color:#ffffff;-webkit-box-shadow:0px 2px 2px rgba(0,0,0,.1);-moz-box-shadow:0px 2px 2px rgba(0,0,0,.1);box-shadow:0px 2px 2px rgba(0,0,0,.1);}
#pageshare .sbutton {
float:left;clear:both;margin:5px 5px 0 5px;}</style>

< div id='pageshare' title="Get this Widget from Blogger4ever.com">
< div class='sbutton' id='tweet'>
< script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
< a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="YOUR USERNAME">Tweet</a> </div>
< div class='sbutton' id='su'>
< script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
< /div>
< div class='sbutton' id='gplusone'>
< script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
< g:plusone size="tall"></g:plusone> </div>
< div class='sbutton' id='fbshare'>
< div id="fb-root"></div>
< script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
< div class="fb-like" data-send="true" data-layout="box_count" data-width="50" data-show-faces="false"></div></div>
< div style="clear: both;font-size: 10px;text-align:center;"><a href="http://www.blogger4ever.com/">Get Widget</a></div><!-- Do not remove this link --> </div>
< !-- floating share bar End -->

NOTE: Within the above 'Floating Share Buttons Widget' html code you will see this in blue lettering: "YOUR USERNAME">Tweet, you must delete the: YOUR USERNAME and replace it with your Twitter username. I entered "PamelaJParr", my Twitter username inside of the quotation marks (do not delete the quotation marks).




(3) Singular Social Media Twitter and Facebook icons. Here are a few more of my favourite links, and in my opinion some of the best, singular social media Twitter and Facebook icons for your blog or website. I have checked every link that I have provided here by using the free website safety checker tool Web Of Trust at: http://www.mywot.com/ and they are all safe to download and copy and paste in to your blog or website's html code. Also, I have tested all of the html code for these icons, I use some of them myself, and they all do work correctly which will save you time from having to Internet search through several that I found that do not work. 

TWITTER Icons Websites:


(1) https://twitter.com/about/resources this link is to all of Twitter's official Twitter Buttons, Widgets, Logos and Icons. (aka. Resources page).

And, this is the direct link to Twitter's Follow buttons:  https://twitter.com/about/resources/buttons#follow that has the Twitter Follow button that also displays your personal or company Twitter username, mine is: @PamelaJParr and I have this Follow button at the upper right of my blog above my Twitter flash animated widget. Select this same Follow button under 'Choose a button' by clicking beside the word: Follow. To the left under 'Preview and Code' you will now see a Follow button that includes your username. Simply select and copy its provided html code then paste it into your blog under 'Add A Gadget' by scrolling down to HTML/Javascript and clicking on its blue + sign and pasting the code into the HTML/Javascript pop-up screen. Click on Save. Drag and drop your new Twitter Follow button on the Add a Gadget screen to position it according to where you want it to appear on your blog.

Also, via Twitter you can select a Twitter Profile Widget to display on your blog (or website) at this link: https://twitter.com/about/resources/widgets/widget_profile. The Twitter Profile Widget shows your blog readers your Twitter username and a stream of your recent tweets in real-time.  Click on the link that I just provided then click on 'Widgets' (in the middle of the screen) and under 'Customize Your Profile Widget' do so by clicking on Settings, Preferences, Appearance and Dimensions and when done customizing click on 'Finish and Grab Code' at the bottom of the screen. To add the Twitter Profile Widget to your blog click on the Blogger button on this Twitter widget screen, then click on 'ADD WIDGET'. Arrange where you want to have your Twitter Profile Widget appear on your blog under Blogger's 'Add A Gadget' page that you are now on by dragging and dropping it above or under one of your other gadgets. Click on Save, click View Blog. NOTE: If you have a protected private Twitter account as I do, you will not be able to use this widget.

(2) http://www.twitterflash.net/ this link has several flash (animated) Twitter Follow Me widgets. I have two of them on my blog, one at the upper right and the other at the bottom of my blog posts. The one at the upper right displays my Twitter username: @PamelaJParr50.

(4) http://www.twittericon.com/ be sure to scroll down and check out all the available Twitter icons and backgrounds to the right of this page.


NOTE: You can also contact me with any of your computer related questions via my cnet.com profile at this link: www.cnet.com/profile/pamjparr/, then just click on: E-mail Pamela j.











Your Reactions:

0 comments: