Random Code Scraps

I think you all know Cargo Collective. It’s a publishing platform for creative portfolios. It’s very sleek and comes with a lot of customization options. But one downside it’s that it still doesn’t have much third party apps compatibility.

To add a facebook “Like” button, you must go to the facebook page and set up a button for each project you have and then paste it on the project text. That’s a lot of trouble, right? So i build this JS script with a little help of my friend dennis calazans, who rock on JS coding

<script type="text/javascript">

    function facebookLink()
    {
        
        var begin = 'http://www.facebook.com/plugins/like.php?href=';
        var url = window.location.href;
        var end = '%2F&layout=button_count&show-faces=false&width=100&action=like&colorscheme=light';
        
       if(url.indexOf("#") > 0)
        {
            
            var inicio = url.substr(0,url.indexOf("#"));
            var fim = url.substr(url.indexOf("#")+1,url.length);
            url = inicio + fim;
            
        }
        
        var iframeCode = "<iframe src='"+begin+url+end+"' scrolling='no' frameborder='0' allowTransparency='true' style='vertical-align: middle; border:none; overflow:hidden; width:100px; height:21px; margin-left:10px; margin-bottom:2px'></iframe>";
        var title = $("div.project_title")[0];
        var tituloAtual = title.innerHTML;
        title.innerHTML = tituloAtual + iframeCode;   
        
    }

</script>

As you can see, this is very pagmatic scripting, you JS gods can help me improve, but for now, it does the trick. To install the script, go to settings, HTML and CSS and edit the Custom HTML thing pasting the code in. Then, when you edit your project, simply paste this code on the end of the project description:

<script type="text/javascript">facebookLink()</script>

That should work ok. Please if your script doesn’t work, post here so we can try to work this out. I’m trying to create a more automatized version of this based on the link in the permalink button. Stay tuned for this

Also, notice that i added the button on the project title div so it would appear side by side with the project title. Feel free to change that. If you want the button to appear in the end of your project description, just use document.write

Hope you guys find that helpful. I’ll be back with more in no time :)