• How to Embed your Twitter Feed to your Blog or Website

    Hello, been a while ;), yesterday night I spent a few hours going over the Twitter Embedded Timelines API, so I thought I would post how to do it, as it seems quite a few people are having issues with embedded Twitter Feeds.

    Yes, I was one of those people, the WordPress Theme that I am using has Social Icons built in and when I first started using the theme, I always had my last Twitter post proudly (or sometimes, not so :-), displayed in the top right of my Blog, then overnight it just disappeared, I kept meaning to fix it but held out hope that it might come back, as sometimes when WordPress was updated, it magically re-appeared for a fleeting moment, then it was gone again.

    Personally I like using Twitter and having your feed on your Website or Blog is not only good for you, it’s good for your followers especially if you re-tweet, as you are advertising your followers products or wares for however long your last post is displayed. It is also good for you, as in theory this should get you more followers as if your Website or Blog is popular then your Re-Tweeted followers will be loving the free advertising, and of course subscribers to your Blog will also know where to find, and follow you if they choose to use Twitter as a Social Media option.

    How to Embed your Twitter Feed to your Blog or Website

    So, first you will need to head over to Twitter, log in and click your way over to the Widgets page, start by clicking the gear icon at the top.

    Then going to Settings


    Then Widgets


    Then Click on Create New
     

    Alternatively, just click here https://twitter.com/settings/widgets sign in to your account and click on Create New.

    You will now be in the Widget Configurator which is where the fun really begins, so, choose a time line source from either, User timeline (which will show your posts and retweets), Favorites (which will show your favorite tweets), List (which will allow you to choose a Twitter List you have previously created, for example your personal or business contacts), or Search (which will allow you to show a realtime search of Twitter using your favorite hashed keyword (#)).

    I just want my latest Tweet, although as you can see, by default you do have more than one Tweet displayed, I will go into the optional configuration options in a bit, here is where we are now, as you can see your username is already filled out, but it also seems you can put a different username in here if you want to, although why you would want to create a timeline for another user is beyond me, that’s just stalking :), so…

    As you can see, a preview of your what your new embedded Twitter timeline will look like is on the right and your options are on the left, you don’t really have to change any options here, unless you want to deselect Auto-expand photos, this is what I did, as remember I only want one tweet and I don’t have much real estate for my Twitter box as I want to put it in my WordPress Sidebar.

    I also ticked the box to Opt-out of tailoring Twitter, again this is up to you, if you leave this box selected, Twitter will suggest who to follow based on who you currently follow, and it will also tailor suggested Twitter users to follow based on your website visits (sounds scary to me), although this will also depend on your privacy settings, anyway I don’t want Twitter badgering me about who I should follow, I have a mind :).


    For your information you can see what your personal recommendations from Twitter are by clicking here, https://twitter.com/who_to_follow/web_personalized

    This is what I get when i click the link, perfect, nosy buggers 🙂

    You don’t need to worry about the height as you can add this into the html snippet you get when you click Create Widget, so, now you have decided on which options you want, go ahead and click…

    The Twitter Widget Configurator will generate the code you need underneath the preview, just select everything in their and paste it into a text file for later.


    Finally click on save changes underneath the options on the left.

    You may now sign out of Twitter and fire up your Blog, as you now have the precious bit of code that  you will need to add your new Twitter timeline feed to your Blog, jesus that was a mouthful.

    Adding your Twitter timeline to your Blog

    Ok, the easiest way to add your new Twitter timeline to your WordPress blog is to go to Appearance, Widgets.

    Now drag the Text Widget from your available Widgets to your side bar

    Where it will automatically expand and allow you to type in a title, as you can see I imaginatively used the Title, Twitter Feed.

    Paste in the code you saved to a text file earlier, click save then go check out your handywork.

    Here’s what mine looks like.

    As you can see I have customized the code just a little bit :), so that only my latest Tweet is showing, I have turned off scroll bars, made it transparent, adjusted the height and width, hidden the header and the footer and removed the borders. Do what! I hear you say, hey don’ worry it’s easy, Twitter has provided you with all the options you need to customize your new Widget, you can head over to the Embedded Timelines Twitter Development page, by clicking here https://dev.twitter.com/docs/embedded-timelines to check out all the options, available to you.

    Here are some of the most useful options.

    • Theme: Set by adding a data-theme="dark" attribute to the embed code.
    • Link color: Theme: Set by adding a data-link-color="#cc0000" attribute. Note that some icons in the widget will also appear this color.
    • Width: Set using the standard HTML width attribute on the embed code (units are pixels.)
    • Height: Set using the standard HTML height attribute on the embed code (units are pixels.)
    • Chrome: Control the widget layout and chrome by using the data-chrome="nofooter transparent" attribute on the embed code. Use a space-separated set of the following options:
      • noheader: Hides the timeline header. Please refer to the timeline display requirements when implementing your own header.
      • nofooter: Hides the timeline footer and Tweet box, if included.
      • noborders: Removes all borders within the widget (between Tweets, cards, around the widget.) See also: border-color.
      • noscrollbar: Crops and hides the main timeline scrollbar, if visible. Please consider that hiding standard user interface components can affect the accessibility of your website.
      • transparent: Removes the background color.
    • Border color: Change the border color used by the widget. Takes an #abc123 hex format color e.g. data-border-color="#cc0000"
    • Tweet limit: To fix the size of a timeline to a preset number of Tweets, use the data-tweet-limit="5" attribute with any value between 1 and 20 Tweets. The timeline will render the specified number of Tweets from the timeline, expanding the height of the widget to display all Tweets without scrolling. Since the widget is of a fixed size, it will not poll for updates when using this option.

    All you need to do is add or remove the options in the first part of the code that you got when you created your Widget, here is what my finished code looks like, add or remove the options you want between the “a” tag.

    <a class=”twitter-timeline” width=”300″ height=”200″ data-tweet-limit=”1″  data-chrome=”nofooter transparent noheader noborders noscrollbar” data-dnt=”true” href=”https://twitter.com/sHoganAs3Dev”  data-widget-id=”YOUR-WIDGET-ID-HERE”>Tweets by @sHoganAs3Dev</a>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?’http’:’https’;if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+”://platform.twitter.com/widgets.js”;fjs.parentNode.insertBefore(js,fjs);}}(document,”script”,”twitter-wjs”);</script>

    Notes:
    The minimum width of a timeline is 180px and the maximum is 520px. The minimum height is 200px.
    If you use the nofooter attribute you will remove the ability for someone to tweet you directly from your widget.
    If you use the noheader attribute you will loose the follow button.
    You may recommend Twitter users to follow, by using the following option (hint, hint)

    data-related="MusicalMoleDev,ScaleViz"

    Have fun, I hope you enjoyed this tutorial and may it bring you many followers.

    Copyright © Shane Hogan
    Do not copy this article.

  • Stress Brings out the Difference between Male & Female Brains

    Hopefully this will help your xMas lunch with family and friends run smoothly. Closed for the Holidays, have a good one everybody 🙂

    Fact: Men usually tune out when they see an angry or stressed out face because their brains show decreased activity in an area of the brain associated with processing other people’s emotions and facial expressions.

    However women don’t have this privilege, as their brains show increased activity in that same area, unfortunately, if they don’t know this primal reaction is happening autonomously, they can easily assume that the person they are looking at, is stressed out with them, maybe they are, but the majority of the time it’s going to be work/life/stress related, but because their synapses are firing like crazy, situations like this can lead to arguments and cause even more stress.

    If you want to read the full study you can find it here:
    Stress Brings Out the Difference in Male, Female Brains…

    Here’s some more interesting articles from the same source
    10 Things Every Woman Should Know About a Man’s Brain …

    10 Things Every Man Should Know About a Woman’s Brain …

    By Shane Hogan

  • Supporting Multiple Screen Sizes with AS3

    I have been so busy lately, but I am still here, creating content for my ScaleViz blog, redrawing and re-sizing the artwork for ScaleViz, designing and planning out a new App, keeping up with my guitar practice, studying programming, spending quality time with the misses, oh and occasionally loosing it in between, I even had my first hypnotherapy client in a while, so had a quick swat on that and spent a good couple of days writing a specific script, anyway, I thought I’d take a break and post what I’m up to, I hope you find the information useful.

    Firstly it’s not just me that’s having to rework my app, it’s every app designer, obviously companies have a much greater advantage over lone developers, but were all having to deal with the same issues, currently there are a 4 screen sizes to support for, the original iPad/iPhone, which is 480×320, then the iPhone 4 and iPod Retina’s which are 960×640, then we have the iPad 1 and 2 which are 1024×768 and now the iPad 3 as well, which is 2048×1536, I also hear there’s going to be an Mini-iPad soon, then the iPhone 5, which I’m hoping, even though it’s reported to have a 5 inch screen, will still be 960×640 (oh well it’s not 960×640, more work, iPhone 5 res is 1136 x 640).

    To give non-programmers some idea of what were all up against, here’s the Shape Trainer button from my app ScaleViz, designed for the 480×320 screen.

    Now here’s the same button sized up for the iPad 3.

    Now if your app was originally designed for the iPad and your trying to make your app universal, then your in a much better position that those of us that designed for the original iPhone/iPod, because you will already have all of your 1024×768 images, and because of the way Apple designed the Retina screens 1024×768 apps still look OK at the 2048×1536 resolution, and sizing them down to get lower screen res images will not affect the quality.

    However, those of use that designed for the original screen size are having to size up all our graphics to support the various screen sizes, which in most cases means having to re-draw, scale up and re-export all of the graphics that your app uses, this could, and usually does mean, hundreds and hundreds of graphics.

    Anyway, while researching how to make universal apps, chapter 8 of the iOS Apps Cook Book I mentioned in this post, was very helpful and as usual Google is your friend when it comes to researching new stuff and I found the following link very useful as well.

    So from all the information I learned, I came up with this code;

    function checkRes():void {
    //trace(“Hello”);
    if (yRes >= 1024 && xRes >= 768) {
    //this is the screen res on my laptop which I use for testing
    //if (xRes == 1366 && yRes == 768) {
    trace(Capabilities.screenResolutionX);
    trace(Capabilities.screenResolutionY);
    box = new iPad;
    addChild(box);
    }
    else if (yRes == 960 && xRes == 640) {
    trace(Capabilities.screenResolutionX);
    trace(Capabilities.screenResolutionY);
    box = new iPhoneRetina;
    addChild(box);
    }
    else if (yRes == 480 && xRes == 320) {
    trace(Capabilities.screenResolutionX);
    trace(Capabilities.screenResolutionY);
    box = new iPhone;
    addChild(box);
    }

    What I am doing is setting the variable box, which is of type MovieClip, to load a different MovieClip, for each of the different resolutions, I have three MovieClips in my library all linked for ActionScript with linked AS3 names of iPad, iPhoneRetina and iPhone (inventive aren’t I), obviously each of the movie clips is set to the correct resolution for each device and each MovieClip contains an image which is also equal to the appropriate device resolution, I set my stage size at 1024×768 and set Flash to target iPhone/iPad, in other words universal, by the way I am using Flash CS5.

    This way, I can in theory anyway, attach the same class file (as a sub-class to each MovieClip), and have one for the main stage, which is where the above function would live, and I can use it to call the other MovieClips, Images or whatever I need to call dependent on device resolution.

    Now, inside each MovieClip I drew out simple text boxes containing the text, iPhone, iPhone Retina & iPad, so when i run the app, I can see whats going on, now when I run this on a standard device, what you would expect to happen, happens, the app loads up and it says iPhone, sweet, same expected result on the iPad, the app runs and reports back that it’s an iPad, cool, now when I run this code on the iPhone Retina, something strange happens, the standard resolution MovieClip loads, it still looks good as do most 480×320 apps on a 960×640 device, because, as mentioned above, of the way Apple designed the Retina Screen’s, but hey that’s not the point on a Retina device I want to see my iPhone Retina text shown on the screen.

    So, what to do?, scream or keep going, i think you know what I choose, so after a bit more research I found this post, where it’s mentioned that you can scale down a 960×640 MovieClip or Image to fit a 480×320 screen, so I came up with this code.

    function checkRes():void
    {
    //trace(“Hello”);
    //if (xRes == 1366 && yRes == 768) {
    //Landscape iPad Res
    if (yRes >= 1024 && xRes >= 768) {
    deviceID = “iPad”;
    deviceFork();
    }
    else if (yRes == 960 && xRes == 640)
    {
    deviceID = “iPhoneRetina”;
    deviceFork();
    }
    else if (yRes == 480 && xRes == 320)
    {
    this.scaleX = 0.5;
    this.scaleY = 0.5;
    deviceID = “iPhone”;
    deviceFork();
    }
    }

    The code now works on all three device’s, as if the device has a standard resolution the Retina MovieClip still loads but is scaled by half, so now my iPad says iPad, my Retina iPod says Retina, and my standard iPod also says Retina because it’s my perfectly scaled 960×640 MovieClip, as you will notice i have also split up the checkRes function, and added a string variable called deviceID, which if I need to, I can use for repositioning elements, or for telling my code to do something different depending on the device, of course I could have used an integer, but strings are much more readable.

    Next I created a new function called deviceFork, which uses the deviceID string to load one of three functions dependent on the device, which was originally determined by checking the screen resolution, and inside each of the three device dependent functions, I now load the appropriate MovieClip. I am still in the very early stages of testing, however initial tests are proving to be working, long, long way to go yet though, as mentioned above I first need to re-size all of my App images so I can test on ScaleViz 😉

    So that’s what I’m up to, hope that helps, got to sleep now.

    ———————————————– Edit ————————————————

    Seeing as there has been a request for the deviceFork function, here is a paste of the complete class, you can also download the fla at the end of this post, password is the same as usual so if you’ve already subscribed, you know what to do.

    package
    {

    import flash.display.StageAlign;
    import flash.display.StageScaleMode;
    import flash.system.Capabilities;
    import flash.display.MovieClip;

    public class MultipleDisplay3 extends MovieClip
    {

    var xRes:Number;
    var yRes:Number;
    var box:MovieClip;
    var deviceID:String;

    public function MultipleDisplay3()
    {

    stage.scaleMode = StageScaleMode.NO_SCALE;
    stage.align = StageAlign.TOP_LEFT;
    xRes = Capabilities.screenResolutionX;
    yRes = Capabilities.screenResolutionY;

    checkRes();
    }

    function checkRes():void
    {
    //trace(“Hello”);
    //my laptop res unrem for testing
    //if (xRes == 1366 && yRes == 768) {
    //Landscape iPad Res
    if (yRes >= 1024 && xRes >= 768) {
    deviceID = “iPad”;
    deviceFork();
    }
    else if (yRes == 960 && xRes == 640)
    {
    deviceID = “iPhoneRetina”;
    deviceFork();
    }
    else if (yRes == 480 && xRes == 320)
    {
    //stage.scaleMode = StageScaleMode.SHOW_ALL;
    //stage.scaleMode = StageScaleMode.NO_SCALE;
    this.scaleX = 0.5;
    this.scaleY = 0.5;
    deviceID = “iPhone”;
    deviceFork();
    }
    }

    function deviceFork():void
    {
    if (deviceID == “iPad”)
    {
    trace(“woohoo iPad”);
    deviceIsAn_iPad();
    }
    else if (deviceID == “iPhoneRetina”)
    {
    trace(“woohoo iPhone Retina”);
    deviceIsAn_iPhoneRetina();
    }
    else if (deviceID == “iPhone”)
    {
    trace(“woohoo iPhone”);
    deviceIsAn_iPhone();
    }

    }

    function deviceIsAn_iPad():void
    {
    //do stuff
    trace(Capabilities.screenResolutionX);
    trace(Capabilities.screenResolutionY);
    trace(deviceID);
    box = new iPad;
    addChild(box);

    }

    function deviceIsAn_iPhoneRetina():void
    {
    //do stuff
    trace(Capabilities.screenResolutionX);
    trace(Capabilities.screenResolutionY);
    trace(deviceID);
    box = new iPhoneRetina;
    addChild(box);

    }

    function deviceIsAn_iPhone():void
    {
    //do stuff
    trace(Capabilities.screenResolutionX);
    trace(Capabilities.screenResolutionY);
    trace(deviceID);
    box = new iPhoneRetina;
    //box = new iPhone;
    addChild(box);

    }

    }

    }

    The images i’m using are some dude with a guitar that I drew in Illustrator, wishing he had ScaleViz ;-), these are available in the library in the Fla, and in the Zip.

    To access code samples, Click Here.
    Tutorial files were created using Flash CS5 Professional version 11.0.2.489.

    Contents of Archive (5 Files)
    MultipleDisplay.fla (No comments, See Post)
    MultipleDisplay3.as (ActionScript Class)
    MultipleDisplay.txt (Package Info)
    Guitarman-hd.png (960 x 640 png, for Retina & Standard Displays)
    Guitarman-ipad.png (1024×768 png, for iPad)

    Copyright © Shane Hogan
    Do not copy this article.

  • ADT command line compile for AS3 with Flash CS5.5 on Mac

    Been a bit quite over here for a while, that’s because I’ve been banging my head against a wall for the last few weeks trying to compile some Flash CS5.5 test apps using the new iOS 5.01 SDK.

    I searched everywhere and have been typing commands into Terminal till I’m blue in the face, I eventually figured out that, you need to change to the directory your SWF and assets are in before you type the command, DUH!, seems quite obvious now, I then thought I was on to a winner but started getting the message no such file or directory regarding the path to the 5.01 SDK, which is now here.

    /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Developer/SDKs/iPhoneOS5.1.sdk

    Note the 5.01 SDK no longer lives in your Developer directory, here is a helpful post on the subject, which also mentions that you need to be using Mac OS 10.7.3, and have Xcode 4.3.1 installed, to use the command line to build for iOS 5.01.

    A bit more searching and I also figured that the error was because Flash CS5.5 comes with Air 2.6 and you need at least version 3.1 to use the -platformsdk switch to compile your SWF for iOS, here is a great post from Adobe that tells you how to overlay AIR 2.6 with the latest version.

    And here is a post, from Adobe that has some more details on using the -platformsdk switch.

    Finally, while searching I found an excellent resource that explains these steps in detail, the book Flash iOS Apps Cookbook, by Christopher Caleb, is available from Packt Publishing, and the chapter that details compiling with the command line using ADT, is currently available for free, from Packt, although needless to say I bought the book anyway, and it is well worth the money, so if your targeting a new iPad 3 with iOS 5.01 using Flash and it’s hurting your head, support the Author and head over to Packt and buy the book (digital version is about £13.00, and comes with all necessary support code).

    Hope this saves some headaches, I certainly wish I’d found that book weeks ago, still I’ve mopped up the blood now and once it’s cleared from my eyes, I will continue development, thanks Christopher.

    Copyright © Shane Hogan
    Do not copy this article.