Google +1 Button Horizontal Gap Issue

With the most commonly-used medium-size +1 button with horizontal bubble count from Google+, the width is fixed at 90px (Google+, Pinterest, etc.) by default. Google does not provide a way for you to customize the width value. According to Google +1 Button Doc, the bubble portion on the right reserved for the count is even wider than the width of the +1 button itself. That is a lot of space reserved for user +1s (up to 4 digits to be filled). With this default setting, if you concatenate Google+, Twitter, and other social buttons together side-by-side like we do above, you will see a lot of horizontal space gap in-between the buttons initially until you have thousands of user +1s on the page. Statistically, 99% of all the web pages worldwide will fall under this threshold. Following is an example:

Solution #1: Use Javascrip Button Code (Twitter-only)

For the people who is having space gap issue with their iFrame version of the Twitter button code, we recommend to change to Twitter’s Javascript version button code. Your issue should goes away. If for some reason, you cannot or do not want to switch to the JavaScript version, try the solution #2 below.

Solution #2: Use Custom CSS Override

Alternatively, you can change the button size and position by applying custom CSS override on the specific button <div> id or class definition. You cannot change the value of the button CSS <div> attributes and values directly in button render code or on web page because the button HTML elements are generated on the server-side dynamically. But you can define CSS override in your own CSS file with the desired width value. For example in the Google +1 button, the 1st +1 button <div> id is “___plusone_0″ (Note: the 2nd +1 button id will be “___plusone_1″ and so forth if you have multiple +1 button on the same web page). To change the +1 button and bubble width from 90px to 70px, you can define the following custom CSS:

#___plusone_0 {
width: 70px !important;
}

To change the Tweet button and bubble width from 110px to 90px, you can define the following custom CSS:

.twitter-share-button {
width: 90px !important;
}

The !important code is necessary to make it work if your button HTML is wrapped in a <iframe> tag in the iFrame-version code. Otherwise you can leave it out. You can see the end result from the social button row at the top of this page. You should obviously adjust your max width for each social button as your audience count grow in order to show all the counts. Our solution is only to provide you a way to dynamically adjust it based on your need at least till Google+ and others come up with a more dynamic solution.

The same technique can be used to customize almost every aspect of the button CSS layout format such as width, height, position, align, margin, padding, font, text color, background color, border, etc. for almost all social buttons as long as you can identify the button <div> class name.

Like this post? Follow us on Facebook, Google+, Twitter, or Blog for more updates. Connect with us if you think our post are helpful to you. We would love to hear your success.

The post Fix Space Gap in Google+ Twitter Social Buttons with CSS appeared first on Blueurl.

Previous Post:  How to Make Awesome Facebook Fan Page in 10 Steps – Part 1

Step 6: Create Page Header Section

• Header Picture – Upload your profile picture and cover photo from Step 2 and 3 to the business page

• Page Info – Enter your complete page information under Edit Page -> Update Info. Most importantly, put your brand name into “Name”, Slogan and short introduction into “About”, and website domain URL into “Website”.

Our Advice: You should include your full domain URL at the end the “About” field and it will turn into a clickable link in the header right after your slogan and introduction.

Step 7: Auto Content Posting from Publishing Platform

Now your page is up, you need to feed as much quality content to it as possible. One best way to start is to auto-post your content from your content publishing platform from Step 4 to your Facebook page(s). Some hosting platforms (e.g. Blueurl’s BlueMarketing Plan) have the feature of connecting with multiple personal social profiles and business pages for auto-posting contents from its publishing platform.

Our Advice: Handle 30-40% of your social posting this way to reduce the time spent on managing numerous postings across many of your social properties.

Step 8: Semi-Auto Content Posting from Social Software

Although auto-publishing is great for automating the content flow, do not rely solely on this method. Unique and personalized contents for each of your social channels would tailor you to a much broader audience from more market segments. There are many free and paid 3rd-party social management tools including TweetDeck, Hootsuite, Seesmic, Sprout Social, Argyle Social, and Sendible you can leverage to achieve that goal. You need to set up and authorize multiple account profiles with your social accounts and then manually trigger or schedule your next update to post at certain day/time to certain social accounts all at once.

Our Advice: Handle 40-50% of your social posting this way. It is a great balance between productivity and flexibility.

Step 9: Manual Content Posting on Facebook.com

There is no replacement to sharing content natively on Facebook.com. Actually some features and tools such as Questions/Polls and Webcam Video are only available on the Facebook portal. You have the total control over how your content will show exactly on your business page and what engagement tools to use. Although Facebook do have a feature to connect and post your Facebook content for you to your Twitter account, we do not usually recommend it unless you will be using primarily your Facebook page as your authoritative content publishing platform for press release, blog, articles, etc. Otherwise, it is a much flexible option to host your own publishing platform so you can more easily integrate with Google and other social networks for SEO and social sharing.

Our Advice: Handle 20-30% of your social posting this way for adding unique engagement and personalized content to your page.

Step 10: Connect Your Facebook Page and Main Website

Lastly you want to cross link your Facebook page with your main website to convert interest to action and then to the next interest.

• On Your Facebook Page – Link the relevant keywords from your page postings to their related call-to-action product landing web pages. Make your landing page informational and convincing to maximize the conversion rate. Use great images, infographics, videos, tables, lists, etc. to visualize and emphasis your message within 10 seconds. The same on-page SEO principal used for SERP click-through also applies here.
• On Your Main Website – Create text or image links pointing to your Facebook page in your site header or footer section to drive traffic and search ranking back to your social presence. Also add the new Facebook Like (user sharing with all their contacts) and Send (user sharing with selected groups or friends) buttons to every web pages by generating and adding the HTML5 and Javascript code from the Like Plugin page.

Our Advice: Your main website and your social pages work like a tag team. Persistence, creativity, and collaboration are your best friends to lead you to your success!

Like this post? Like and Follow us on Facebook, Google+, Twitter, or Blog for more updates. Drop us a note if you think our post are helpful to you. We would love to hear your success.

The post How to Make Awesome Facebook Fan Page in 10 Steps – Part 2 appeared first on Blueurl.

We have received many inquiries from our audience about how to design and set up a great page like Blueurl Facebook page. So we decide to write a how-to blog post to share with you the design best practices step-by-step. We’ll update this article as needed in the future as the technology and business process evolve (they always do).

Step 1: Prepare Your Brand Personality & Style

While most of articles online focusing on the technical details, we think a killer Facebook page implementation starts with your brand personality, what your business represents and how you would like your brand to be viewed by audience, just like people. This is more of an art and business than science and technology. And a business should have a very distinct brand personality in order to stand out from the crowd. If you don’t, you might want to really spend some time now thinking through it before starting to build your business. Here is our case study below to jump start your thinking:

“We define ourselves as the newest breed of cloud commerce application provider targeting at young, entrepreneurial, and business-savvy audience segment – men or women. We can sum up our brand personality in 3 words: Stylish, Collaborative, and Lifehacking. It is a cool blend of stylishness, openness, with geekiness in its soul.”

Our Advice: Think creatively and heartily about your goal and passion against the brand your are creating.

Step 2: Design Brand Logo, Slogan, Typography, and Colors

Taking the brand personality from above, we can then start the design for the key brand assets. They are all very important pre-work to define your brand image to the public. The small investment and time here will be rewarded big time later on. Switching and retroactively-fixing your brand design and message is VERY painful and costly from our experience.

• Logo - this is probably the single most important branding piece you can get. Many large enterprise update their log design from time-to-time to meet their new business model and branding need, as demonstrated by Microsoft’s Logo Re-design recently. Use no more than 3 colors in most cases.
• Profile Picture – Facebook’s default profile picture size is 160 x 160 px. Try to create a picture at exactly or larger than that size for upload. Never upload a profile picture with size smaller than 160 x 160 px.
• Avatar – Facebook use the same profile picture for avatar. Make sure you select a profile picture which can be recognized in the Avatar size. Usually a vector-based art is way better than a photo with “noisy” details here for both viewing and branding purpose.
• Slogan – Pick a short slogan to quickly summarize your business model or selling point. Being concise, creative, and to-the-point is the key here.
• Typography – This is another killer element which can grab visitor’s eyeball. As a rule of thumb, each website should have at least 1 main typography and 1 decorative typography with 3 weight options each. Thanks to the open-source initiative, there are now hundreds of free fonts you can choose from Fonts.com, Goolge Web Fonts, etc.
• Colors – A solid and consistent color system lays the foundation to the overall brand visual language. Just like people, your choice of colors directly reflects your brand personality. It is a silent language as we call it. Whether you go with mono, blue, red, or orange palette, you should make sure they are used consistently across your main website and marketing channels. Usually no more than 4 core colors should be used. And white should always be one of them.

Our Advice: Spend a little more time here coming up with an excellent design yourself or hiring a superb brand designer rather than rushing into building the actual marketing portal.

Step 3: Prepare Graphic Assets

• Cover Photo – Your default Facebook page header size is 851 x 315 px, sRGB JPEG < 100KB. We recommend that you create a picture at exactly this size to avoid any loss on details by Facebook uploader resizing. Pick the best quality picture with the finest details. Either a photo or vector art work here. Also the page header image should tell a story to your visitors within 5 seconds like an elevator pitch. Check out our Facebook Page header section for an example.
• Post Images – Your specific post image may come from your own upload or 3rd-party websites if you share link from them. When you upload your own post image, your image will be shown across half of the Facebook timeline more than 300px wide. Therefore selecting a great-looking image to upload is crucial to grab people’s attention.

Our Advice: Always go with the best-quality graphics you can possibly create or get. It beats a thousand words. Cover photo is 100x more important than the others.

Step 4: Register Your Main Domain & Website

Now you are finally ready to build. First, you need to make sure you have a domain (www.mydomain.com) and commerce-enabled website registered to be the base for your Facebook channel.You need to be able to edit your web page HTML in order to integrate it with your Facebook page. The hosting package you acquired should include:

• A Content-Generation and Publishing Platform – for authoring and publishing your blogs, articles, press releases, image gallery, infographics, videos, wikis, tutorials, classes, and RSS in a WYSIWYG environment to be shared with your Facebook pages and other marketing channels.
• A Commerce-enable Transaction Platform – for landing your Facebook fan click-through onto an page they can take further actions to buy, subscribe, download, play, or learn from you.

Our Advice: You’ll get the best value by integrating your Facebook page auto-posting with an all-in-one marketing and eCommerce hosting service such as our BlueMarketing or BlueCommerce App.

Step 5: Create Facebook Account & Business Page

• Facebook Account – You must have a personal Facebook account in order to create a business or brand page. Do not create a Facebook account with your business name and information as this is against the Facebook term of use and may get your account banned.
• Facebook Business Page – Once you have a Facebook account, go to http://www.facebook.com/pages/create.php to create a business page. Select a page type say for example “Brand or Product” and your brand or product name.
• Short URL & Username – Now here is important: For the very 1st business page you create under each Facebook account, the Brand or Product Name you entered will automatically become the short URL username (e.g. http://www.facebook.com/myfirstbrand) during page creation. For the 2nd page and beyond, your page URL will be the long version (e.g. http://www.facebook.com/pages/mysecondbrand/123456789012345). You can only apply for the short URL at https://www.facebook.com/username in the future when the page become eligible (usually when the page has more fans).
• Multiple Page Managers – The Facebook account who created the business page become the default manager. You can add multiple co-managers to a single page under Edit Page ->Admin Roles.

Our Advice: Create different business page(s) under different Facebook account(s) with your preferred brand name(s) and reserve the short URL username. Identify one primary account and then add it to be the co-manager of all your business pages across multiple accounts for central management.

Continue: How to Make Awesome Facebook Fan Page in 10 Steps – Part 2

Like this post? Like and Follow us on Facebook, Google+, Twitter, or Blog for more updates. Drop us a note if you think our post are helpful to you. We would love to hear your success.

The post How to Make Awesome Facebook Fan Page in 10 Steps – Part 1 appeared first on Blueurl.

For a little less than a year since Google officially launched its social network, Google+ users had to bear with the long and many consider hard to memorize profile or page URLs featured by a 21-digit all-numeric ID sub-directory looking like this:  https://plus.google.com/171737345584353564962/posts.

Google+ Custom Vanity URLs Roll-out

This week Google finally made the move to start offering some selected users a way to create their favorite “shortened” alpha-numeric version of their sub-directory name. Often people would choose something representative of their brand such as personal name, company name, product brand, domain name, etc. We are excited about this move and do recommend all our BlueMarketing, BlueCommerce, and BlueService plan customers to register their brand name URL in Google+ as it becomes available to the general public. For most of you, this will be your website name you registered for your Blueurl Cloud Hosting account.

URL Variations

There are now a few custom URL variations you can consider as your anchor link with different sub-domain vs. apex-domain and SSL vs. non-SSL combination. We use Toyota Google+ profile as an example here to illustrate (sorted from the shortest to the longest URL):

• http://google.com/+toyota  (preferred)
• https://google.com/+toyota
• http://plus.google.com/+toyota
• https://plus.google.com/+toyota

All of them get redirected to the same landing page (https://plus.google.com/+toyota/posts) on your Google+ site when user click through the link. Now although we like the decision Google made to offer custom URL alias to the site level, appending /posts sub-directory to the landing page is still not user-friendly and unnecessary from our branding point of view. Your root directory should be the home page of your Google+ site, period.

So What Happens Next?

Google started the initial roll-out of this new feature only to selected customers this week – namely a sub-group of the well-known businesses and public figures like Toyota and Britney Spears. This is very likely an early round of beta pre-production deployment to verify the functionality and fix any bugs as they arise as the group is so limited at this point. There is no official announcement yet from Google team with regard to when the general availability (GA) of this feature will be.

Soon after this beta testing round is concluded, we predict Google will start the mass invitation to all major brands and significant individuals who have verified Google+ accounts to reserve their preferred brand name before general availability to public. This is necessary to ensure the most important customers get a chance to reserve their trademark terms and names ahead of the public and reduce possible backfire due to trademark disputes. This period will likely takes a couple of month to a few month as the group is not small and there will be expected lag between the invitation/announcement and the action taken by the brands.

Finally, when the grace period is over, announcement will be made to make this feature available to general public. As we saw from the initial rollout of Facebook vanity name back in 2009, we fully expect the initial waves of Google+ vanity URL registration to be HUGE in the first few days as this feature is so awaited for by nearly all the online marketers and webmasters. So if do have a valuable brand you would like to protect, stay very tuned in on Google+ Developer Blog, Blueurl Blog, Blueurl Google+, Tweets, or other update services in the next few weeks/months!

The post Google+ Branding with Custom Vanity URL Rollout appeared first on Blueurl.