?
Solved

create an button style as facebook like button, google + button

Posted on 2013-05-15
3
Medium Priority
?
573 Views
Last Modified: 2013-05-16
hi, i want to create an button to show a number just like the facebook like button or the google plus button, what the best way to accomplish this and be the same look as those buttons, size and style.
0
Comment
Question by:rafaelrgl
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
3 Comments
 
LVL 6

Expert Comment

by:APoPhySpt
ID: 39170908
It may not even be what you are looking for, but your post reminded me of this page, I accidentely opened couple days ago:
https://www.inboundnow.com/apps/facebook-like-button-generator/
0
 
LVL 1

Author Comment

by:rafaelrgl
ID: 39170981
it's a good page, but it's not what i mean.  Do you know the like or the google + button, it's small, and have an blank balloon with the numbers of likes on the side. that's what i want,
0
 
LVL 16

Accepted Solution

by:
Rose Babu earned 2000 total points
ID: 39171274
if you like jquery to display the count next to button with balloon popup then try the below sample

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="http://www.maxvergelli.com/docs/jquery-bubble-popup-examples/css/document.css"
        rel="stylesheet" type="text/css" />
    <link href="http://www.maxvergelli.com/docs/jquery-bubble-popup-examples/css/jquery-bubble-popup-v3.css"
        rel="stylesheet" type="text/css" />

    <script src="http://www.maxvergelli.com/docs/jquery-bubble-popup-examples/scripts/jquery-1.7.2.min.js"
        type="text/javascript"></script>

    <script src="http://www.maxvergelli.com/docs/jquery-bubble-popup-examples/scripts/jquery-bubble-popup-v3.min.js"
        type="text/javascript"></script>

    <script type="text/javascript">
<!--
        $(document).ready(function() {

            //create bubble popups for <DIV> elements
            $('.button').CreateBubblePopup({
                innerHtml: '25K',
                position: 'right',
                align: 'middle',
                innerHtmlStyle: {
                    color: '#333333',
                    'text-align': 'center'
                },

                themeName: 'orange',
                themePath: 'jquerybubblepopup-themes'
            });

            //show bubble popup of button #1
            $('#button1').ShowBubblePopup();

            //freezing method causes the bubble popup to not respond on events (click, mouseover, mouseout, ...)
            $('#button1').FreezeBubblePopup();

        });
//-->
    </script>

</head>
<body>
    <div class="content">
        <table style="border-collapse: separate; border-spacing: 20px;">
            <tbody>
                <tr>
                    <td>
                        <div id="button1" class="button">
                            button #1</div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

Open in new window

Reference:

http://www.maxvergelli.com/docs/jquery-bubble-popup-examples/position-align.html

http://www.maxvergelli.com/jquery-bubble-popup/documentation/

this will be suit well for your need.

and you can load the count asynchronously. have a look on the below link and integrate it in the above sample

http://www.maxvergelli.com/docs/jquery-bubble-popup-examples/load-asynchronous-content.html

Hope this will help you a lot
0

Featured Post

New benefit for Premium Members - Upgrade now!

Ready to get started with anonymous questions today? It's easy! Learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
Suggested Courses

765 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question