Some text that are not in the code appears on the browser

Question

Here's the ouput :

See that text after the Tweet button? It's so annoying that it is supposed to be there but... yah it's there. xD

enter image description here

A scren capture from the Google Chrome debugger.

enter image description here

It's happening somewhere here.

echo sprintf('<a id="share" target="_blank" data-count="%d" title="Share on Twitter" href="http://twitter.com/share?text=%s&url=%s" class="btn btn-counter" rel="nofollow">%s</a>', $tweets, $text, $url, $placeholder);

Here's the complete PHP code:

<?php 
        function get_tweets($url){
            $api = "http://urls.api.twitter.com/1/urls/count.json?url=";

            $ch = curl_init();
            curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
            curl_setopt($ch, CURLOPT_HTTPHEADER, array('Content-Type: application/json'));
            curl_setopt($ch, CURLOPT_URL, $api.$url);
            $result = json_decode(curl_exec($ch));

            return $result->count;
        }

        function tweet($url, $text = '', $placeholder = 'Tweet'){
            $text   = urlencode($text);
            $url    = urlencode($url);
            $tweets = get_tweets($url);
            echo sprintf('<a id="share" target="_blank" data-count="%d" title="Share on Twitter" href="http://twitter.com/share?text=%s&url=%s" class="btn btn-counter" rel="nofollow">%s</a>', $tweets, $text, $url, $placeholder);
        }

        tweet('https://www.youtube.com/watch?v=[url]', 'The most beautiful story.');
    ?>

HERE'S THE SUPER COMPLETE CODE :

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">


#share{
            text-decoration: none;
            color: #fff;
            width: 200px;
            height: 50px;
            background-color: #7fad33;
            border-radius: 3px;
            padding: 10px;
        }

</style>

<script type="text/javascript">
    function popupwindow(url, title, w, h) {
        var sheight = window.innerHeight || document.body.clientHeight;
        var swidth = window.innerWidth || document.body.clientWidth;
        var left = (swidth/2)-(w/2);
        var top = (sheight/2)-(h/2);
        return window.open(url, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left);
    } 
</script>
</head>
<body>
    <center>
        <a id="share" class="facebook" target="_blank" onclick="return !popupwindow(this.href, 'Facebook', '640', '300')" href="http://www.facebook.com/sharer/sharer.php?u=https://www.youtube.com/watch?v=ZO1klxIbUfA">Share</a>
    <?php 
        function get_tweets($url){
            $api = "http://urls.api.twitter.com/1/urls/count.json?url=";

            $ch = curl_init();
            curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
            curl_setopt($ch, CURLOPT_HTTPHEADER, array('Content-Type: application/json'));
            curl_setopt($ch, CURLOPT_URL, $api.$url);
            $result = json_decode(curl_exec($ch));

            return $result->count;
        }

        function tweet($url, $text = '', $placeholder = 'Tweet'){
            $text   = urlencode($text);
            $url    = urlencode($url);
            $tweets = get_tweets($url);
            echo sprintf('<a id="share" target="_blank" data-count="%d" title="Share on Twitter" href="http://twitter.com/share?text=%s&url=%s" class="btn btn-counter" rel="nofollow">%s</a>', $tweets, $text, $url, $placeholder);
        }

        tweet('https://www.youtube.com/watch?v=[url]', 'The most beautiful story.');
    ?>
</center>

It's not coming from that code, it's coming from whatever you do AFTER calling `tweet()`. — Barmar, Sep 01 '14 at 08:58
And the reason it's messed up is because you have the wrong character set encoding. — Barmar, Sep 01 '14 at 08:59
@Barmar what do you mean by "character set encoding". How do you think should i do? — jofftiquez, Sep 01 '14 at 09:02
@Barmar I added the whole complete 100% all in all code. It's just a single php file though, please see edit. — jofftiquez, Sep 01 '14 at 09:10
I don't see how that code could be doing this. `tweet` doesn't print anything after ``, and the main script doesn't print anything between calling `tweet()` and ``. — Barmar, Sep 01 '14 at 09:16
Exactly, that's what i thought. And also i tried opening this to different browsers but no luck. :( I'm really annoyed with this one. Anyways can you check this question of mine. http://stackoverflow.com/questions/25601113/how-to-customize-the-design-of-twitter-twit-button Thank you for sharing your thoughts @Barmar — jofftiquez, Sep 01 '14 at 09:19
Do you see that in the `Source` tab? I suspect you have some Javascript that's adding it. — Barmar, Sep 01 '14 at 09:21
I doubt that. There's nothing from the source tab that says anything about a javascript or something. — jofftiquez, Sep 01 '14 at 09:23
What characters appear instead when you add each of these charset meta headers in your `head`? (only one at a time): `` and `` — Matt Gibson, Sep 01 '14 at 10:12
I <- this didn't do nothing. But the second -> did the efing magic. Thanks man. You should post your answer so I an accept it. Thank you, really, for real. Now i can die in peace. :) @MattGibson — jofftiquez, Sep 01 '14 at 10:17
@GreenFox Well, all that's actually done is make the characters invisible... I've updated my answer to really dig into what's going on. Also, when you have some time, you should probably have a read of this: [Joel on Unicode](http://www.joelonsoftware.com/articles/Unicode.html), which give you some good background and probably be helpful in the future. — Matt Gibson, Sep 01 '14 at 10:25
See http://stackoverflow.com/questions/12699037/how-to-display-special-characters-in-php — Mihai8, Sep 01 '14 at 10:47

Matt Gibson · Accepted Answer · 2014-09-01T13:49:52.597

Your source code has a bunch of invisible characters somewhere. My first guess would be here:

        tweet('https://www.youtube.com/watch?v=[url]', 'The most beautiful story.');
    ?>
^^^^-- HERE

But obviously it's going to be hard to find them in your code, as these characters are probably invisible while you're looking at them in your editor.

The clue is the characters themselves. My guess is that because you've not got a <meta charset="UTF-8" /> header in your HTML, your browser is interpreting the bytes in a standard Latin character set. In that case, the bytes in question are

226 (0xE2): â
128 (0x80): €
139 (0x8B): ‹

I'm guessing it's not a coincidence that these are the byte values that in UTF-8 encoding would compose a Zero-Width Space.

I think, basically, that somewhere in your source you've got a few of those pasted in somehow. Because they're a Zero-Width Space, you can't see them in your editor (which will be set to display these UTF-8 codes correctly, as zero-width spaces, therefore making them invisible.) But when you render them as HTML, because you're using a non-UTF-8 encoding (due to not having a charset meta) they appear as the Latin character interpretation of those bytes rather than a zero-width space.

You can "solve" the problem as you've mentioned in your comments by setting the correct UTF-8 charset for your output, but bear in mind that there are still some characters you don't expect being output. You just can't see them now. The best thing to do would be to hunt through your source code in some kind of editor that will let you see where these characters are coming from and delete them.

You may be able to "see" them in your normal editor by running your cursor through suspect parts of your document using your left/right arrow keys—in most editors a zero-width space will still require a tap on the arrow key to move past, even though it's not actually displayed on screen.

Some text that are not in the code appears on the browser

1 Answers1