Naina.co
  • Blog
    • Everything
    • Only Articles & Writing
    • #NAINAxStyle
    • Podcast : The Naina Redhu Experience
    • EyesFor…
      • #EyesForLuxury
      • #EyesForLifestyle
      • #EyesForDestinations
        • #EyesForIndia
        • #EyesForDubai
        • #EyesForEurope
        • #EyesForLA
        • #EyesForLondon
        • #EyesForNewYork
      • #EyesForPeople
      • #EyesForStreetStyle
      • #EyesForDining
      • #EyesForTechnology
      • #EyesForFashion
        • New York Fashion Week
        • Amazon India Fashion Week AW15
      • #EyesForBeauty
      • #EyesForPeople
    • Art
    • #MadeInIndia
    • #NAINAxADOBE
    • #NosedByNaina
  • Photography Portfolio
  • Contact & About
  • Press
  • Clients
  • Newsletter

NAINA.CO

Instagram
Twitter
YouTube
Pinterest
LinkedIn
Spotify
Facebook
online brand building, photography & art
Naina.co
  • Blog
    • Everything
    • Only Articles & Writing
    • #NAINAxStyle
    • Podcast : The Naina Redhu Experience
    • EyesFor…
      • #EyesForLuxury
      • #EyesForLifestyle
      • #EyesForDestinations
        • #EyesForIndia
        • #EyesForDubai
        • #EyesForEurope
        • #EyesForLA
        • #EyesForLondon
        • #EyesForNewYork
      • #EyesForPeople
      • #EyesForStreetStyle
      • #EyesForDining
      • #EyesForTechnology
      • #EyesForFashion
        • New York Fashion Week
        • Amazon India Fashion Week AW15
      • #EyesForBeauty
      • #EyesForPeople
    • Art
    • #MadeInIndia
    • #NAINAxADOBE
    • #NosedByNaina
  • Photography Portfolio
  • Contact & About
  • Press
  • Clients
  • Newsletter
0
  • asidebrands

Twitter @ anywhere Tweetbox

  • July 3, 2010
  • naina

I am going to specifically talk about the Tweetbox here. The end result will help you setup a box like the one on the right sidebar of this blog, which looks like this :

My reasons for putting this up on this blog :

1. When I tweet from this Tweetbox, the tweet shows up on Twitter and other channels with content and says “via asidebrands.com” – so the tweet is branded with the asidebrands name. Which helps create more link love for the blog / website and people who have never clicked on the website link from my Twitter bio are probably likelier to click on the “via asidebrands.com” in the tweet.

2. I HAD to try out the API – Twitter is a formidable platform when it comes to using it for creating your brand’s presence and connecting with a tribe who could be instrumental in word-of-mouth about you personally, as well as your brand. Maybe someone who doesn’t know about Twitter, will discover it through my blog and their life will change. Maybe a potential client will like the content of the blog or a particular case study and share it with their Twitter network.

3. The Tweetbox would probably prompt more people who visit the blog to give me a shoutout. It would help me connect better with my blog visitors.

I first heard about @anywhere through @StupiDeity and @iamkhayyam – thank you gentlemen.

The official @anywhere page can be looked up here : http://dev.twitter.com/anywhere/begin and decided this was something I could use on my website / blog. I wasn’t sure I would like it on the main website [ because I dislike deviating from the focus – the website was always supposed to be a place to showcase my design portfolio ].

It looked a tad overwhelming at first – I was supposed to register an ‘application’! But what that really means is that you need to define a name for the application and a website URL where you would like the @anywhere functionality to show up and be used. So I named my application “asidebrands.com” [ for when a status update from your application shows up on Twitter / other channels, it shows “via asidebrands.com” like it shows for a host of other apps like “via Hootsuite” for example ] – you can change the application name later on so even if you get the name wrong the first time, like I did, it’s cool.

THIS IS HOW YOU CAN SETUP YOUR TWEETBOX :

1. Go here to register your new application : http://dev.twitter.com/anywhere/apps/new. This is what the screen looks like, with dummy values that I have entered for the purpose of this post.

2. The values to be entered in the above form are :

Application Name : You’ll have to pick a unique name, ideally your personal name or your brand name. For me, it was “asidebrands.com”.
Application Website : The website url which you would like to use the Tweetbox on. For me, it was “http://asidebrands.com”. Whatever url you use here is where the “via asidebrands.com” in a tweet from your Tweetbox will link to.
Organization : Ideally, the name of your brand / company. For me, it was “asidebrands”.
Callback URL : Without getting into technical details, this would ideally be the same url as the Application Website or where you want to use the Tweetbox. The two values, can, however be different. In my case, it was “http://aside.in/blog” because I wouldn’t be using this on the main website but on the blog.
Default Access Type : Ideally, the Read & Write option should be checked.
Application Icon : which you can upload at a later step.

3. This is the success screen you will get to see once you click on Register and Accept the terms and conditions :

This page gives you the code for successfully activating two features :

Linkify [@Anywhere provides a convenient way to link Twitter usernames found in your web site or application back to a user’s profile page on Twitter.com ] and Hovercards [ feature that can be seen on Twitter.com and are now available to developers through @Anywhere. A Hovercard is a small, context-aware tooltip that provides access to data about a particular Twitter user. Hovercards also allows a user to take action upon a Twitter user such as following and unfollowing, as well as toggling device updates. ] More details about tweaking and configuration options on these features here on the official Twitter page : http://dev.twitter.com/anywhere/begin.

4. To implement the Tweetbox and configure it, this is what I did :

a. placed the JavaScript code somewhere within in the header.php file of my blog’s theme. The code is :

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

<script type=”text/javascript”>
twttr.anywhere(function (T) {
T(“#tbox”).tweetBox();
});
</script>

 

b. to call this script, you need to define a <div> and place the code wherever you want the Tweetbox to appear. In my case, I used the name available in the code on the official twitter website :

<div id=”tbox”></div>

I placed this bit of code in the sidebar.php file of my blog.

c. now the Tweetbox will appear where you want it to – but it will, in all likelihood, look like the default box :

So you will need to configure this accordingly. The Twitter website lists the following Tweetbox configuration options

ParameterExpected ValuesDefaultDescription
counterBooleantrueDisplay a counter in the Tweet Box for counting characters
heightNumber515 (px)The height of the Tweet Box in pixels
widthNumber65 (px)The width of the Tweet Box in pixels
labelString“What’s happening?”The text above the Tweet Box, a call to action.
defaultContentStringnonePre-populated text in the Tweet Box. Useful for an @mention, a
#hashtag, a link, etc.
onTweetFunctionnoneSpecify a listener for when a tweet is sent from the Tweet Box.
The listener receives two arguments: a plaintext tweet and an
HTML tweet
dataObjectnoneKey + value pairs representing any of the additional metadata that
can be set when updating a user’s status. See the
REST API documentation
for a complete list of the possible options.

So, with some configuration options, my currently-in-use code for the Tweetbox looks like this :

<script src=”http://platform.twitter.com/anywhere.js?id=xxxxxxxxxxxxxxxxxxxxxxxx&amp;v=1″>
</script>
<script type=”text/javascript”>
twttr.anywhere(function(twitter) {
twitter.hovercards();
});
twttr.anywhere(function (T) {
T(“#tbox”).tweetBox({
height: 80,
width: 180,
counter: false,
label: “<span style=”color: #cfcfcf; font-size: .6em; line-height:.3em; padding-bottom:-10px;”>say hello to us on Twitter</span>”,
defaultContent: “@asidebrands @naina”
});
});
</script>

As you can see, the “Label” can be styled to some extent, so can the size of the box itself. I still don’t know how to style the Counter which shows the character count. The rest of the Tweetbox can be styled by defining the value for the <div id=”tbox”></div> in the CSS file. In my case, I included the following code in my stylesheet.css file for this blog :

#tbox
{
width:185px;
margin-left:-25px;
padding-left:20px;
padding-bottom:20px;
padding-top:10px;
background-color:#333333;
border-left:15px solid #95cd3c;
border-top:15px solid #ffffff;
border-bottom:15px solid #ffffff;
border-right:15px solid #333333;
font-size:10px;
line-height:1px;
}

The line-height value does not work. Everything else does.

5. And you’re done.

The official Twitter page to get started on @anywhere is http://dev.twitter.com/anywhere/begin

Another good article to read is @aaronsaray’s http://aaronsaray.com/blog/2010/05/04/branding-your-tweets-using-anywhere-tweetbox/ and some questions about styling the Tweetbox are answered here : http://www.devcomments.com/Change-label-color-of-anywhere-Tweet-box-at140269.htm and here

For the entire @anywhere JS API cheatsheet go here : http://platform.twitter.com/js-api.html. After the above very basic & simple implementation, I am going to spend some more time figuring out how I can make better use of more features, if at all they are needed.

Please let me know if you have any questions or if you have more resources that can help make the above process better.

Total
0
Shares
Share
Tweet
Pin it
Share
Share
Share
Share
Share
Share
Related Topics
  • anywhere
  • api
  • asidebrands
  • asidebrands.com
  • blog
  • blogging
  • cheatsheet
  • code
  • coding
  • CSS
  • header
  • hovercard
  • implement
  • javascript
  • linkify
  • logo designer
  • naina
  • naina redhu
  • nainaredhu
  • sidebar
  • tweet
  • tweetbox
  • twitter
  • web design
naina

Previous Article
  • #EyesForBranding&Print
  • asidebrands

Alphabet Consulting : Logo Design

  • July 2, 2010
  • naina
View Post
Next Article
  • #EyesForBranding&Print
  • asidebrands

Summary : 10 most common brand naming mistakes

  • July 4, 2010
  • naina
View Post
You May Also Like
View Post
  • #EyesForBranding&Print
  • asidebrands

Family emblem : Logo design

  • naina
  • June 11, 2012
View Post
  • #EyesForBranding&Print
  • asidebrands

Logo design : GE Women’s Network

  • naina
  • June 4, 2012
View Post
  • #EyesForBranding&Print
  • asidebrands

Psychedelic Tiger : Logo Design Engagement

  • naina
  • May 30, 2012
View Post
  • #EyesForBranding&Print
  • asidebrands

Flipkart : Logo design engagement

  • naina
  • April 23, 2012
View Post
  • #EyesForBranding&Print
  • asidebrands

Amrutanjan logo re-design & re-branding critique

  • naina
  • October 7, 2011
View Post
  • asidebrands

Diwali 2011 Wallpaper design

  • naina
  • September 29, 2011
View Post
  • #EyesForBranding&Print
  • asidebrands

Logo design engagement : HDFC RED

  • naina
  • September 13, 2011
View Post
  • #EyesForBranding&Print
  • asidebrands

Logo design engagement : Sigante

  • naina
  • September 1, 2011
4 comments
  1. Rashmi Ekka says:
    July 3, 2010 at 12:53 am

    Woww – this is an amazing tool. I’m going to try it out. Thanks!

    1. Naina says:
      July 3, 2010 at 2:33 pm

      Haha yeah, even though most of my reasoning for using this tools had a lot of ‘maybe’ in it, it still is quite amazing. Let me know if you need any help.

  2. Gorka says:
    November 24, 2010 at 7:28 am

    Do you know if there is any way to change the background color to the tweet text box?

    Cheers,
    Gorka

  3. Michael says:
    December 6, 2010 at 6:10 am

    and background color at “defaultContent”, how change?

Comments are closed.





Naina Redhu is a professional photographer & visual artist.

Her career, spanning 16 years, started with an MBA in IT & Systems, to a job as an Innovation Management Consultant, to branding & graphic design work for international clients, to a full-time solo-entrepreneurship as an Experience Collector.

Naina started her blog 16 years ago and it has evolved from writing about Creativity & Innovation, to sharing case studies about Branding & Graphic Design to finally a destination for some of the leading Luxury & Lifestyle brands as Naina writes features for these brands and photographs them.

Having traveled all over India as a child ( the advantage of having a father serving in the Indian Army ), she is also well-traveled across Europe ( Austria, Switzerland, Netherlands, Italy and France ), Asia ( Bhutan, Sri Lanka, Thailand, and Vietnam ), America ( New York, Los Angeles and San Francisco ), and Canada.

Naina has her own podcast called The Naina Redhu Experience, where she talks about the business and professional aspects of photography, blogging and influencer marketing in India.

Her abstract art, under the KhaosPhilos label can be shopped on the Naina.co online store and she is available for bespoke commissions as well.

"The New Rules of Online Brand Building", Naina's on-ground workshop, recently wrapped up its 7th Edition. Launched in 2018, "Workshops By Naina" is going to be seeing more editions across the country & online.

Naina is also available for hire as a Speaker. She has been invited as a Keynote Speaker at a blogging conference and also speaks about the business of photography in India.

Always learning & evolving online, she has presence across several online spaces including Twitter, Instagram, Facebook, YouTube, Pinterest, LinkedIn, TikTok and her podcast can be found on all podcast channels and apps.

#EyesForLuxury
  • janavi india, jyotika jhalani, naina redhu, LMIFWSS21, FDCI, Shaurya Athley, aprajita puri, janavi love, fdci goes digital, talisman, handcrafted, made in india, cashmere, shawls, luxury cashmere, eyesforluxury, madeininda, cashmere, kiera chaplin, spectaculars, eyeforfashion, fashion week, india fashion week, lotus india fashion week 2020, fdci fashion week 2020
    Talisman by Janavi India #LMIFWSS21 : Evil Eye Luxury Cashmere Collection
    • October 18, 2020
  • midsummer jardin, hand-painted jacket, impressionist, pointillism, impressionism, post-impressionism, contemporary art, khaosphilos, wearable art, wear a painting, wear art, made in india, make in india, madeinindia, makeinindia, wearableart, wearart, wearapainting, khaos philos, naina redhu, naina.co, naina, indian artist, art on garments, painted jacket, painted blazer, flower garden, midsummer garden, artist's garden, monet, seurat
    Midsummer Jardin : More About My First Hand-Painted Jacket #KhaosPhilos
    • May 31, 2020
  • bmw, eyesforluxury, automobiles, automobile brand, bayerische motoren werke ag, german company, german automobile, bmw 8 series gran coupe, the8, luxury grand tourer, four door, thegentlemanconnoisseur, nainaxbmw, india art fair, bmw at the india art fair, bmwatiaf, indiaartfair2020, new delhi, lifestyle photographer, luxury photographer, car, automobile photographer, art photographer, art fair, naina redhu, naina, naina.co
    BMW at the India Art Fair 2020 #EyesForLuxury #BMWAtIAF
    • February 22, 2020
#KhaosPhilos Art Label
  • The “NUANCE” Wearable Art Series of Brooches Made From Hand-Cut Paint
    • November 26, 2020
  • The Hindu Weekend, Susanna Myrtle, LuxeList, Luxe List, Hand Painted Brooches, Wearable Art, Made In India, Naina Redhu, Naina.co, KhaosPhilos, Chaos Lover, Independent Artist, Brooches Are Back, Accessories, Luxury Accessories, One Of A Kind, Unique Accessories, Hand Made, In Time, Diwali Brooch Collection
    One-Of-A-Kind Wearable Art Brooches by KhaosPhilos In The Press : The Hindu Weekend
    • October 16, 2020
  • face masks, hand-painted mask, Made In India, KhaosPhilos, Naina Redhu, Naina.co, Independent Artist Masks, India Art Mask, Art Mask India, Mand World Magazine, Press, Magandeep Singh
    KhaosPhilos Hand-Painted Art Masks In The Press : MansWorld India, September 2020
    • October 16, 2020
Social Links
Products In The Shop
  • Brooches (89)
    • 2 Inches Diameter (37)
    • 2.5 Inches (35)
    • 3 Inches Diameter (15)
    • Oil (1)
    • Sculptural (47)
  • Collections (108)
    • ALIVE (6)
    • Benches (5)
    • DOTS (17)
    • HORIZONS (21)
    • IN TIME (16)
    • METALS (20)
    • NUANCE (8)
    • Paper 2018 (20)
  • Garments (14)
    • Caps (2)
    • Masks (11)
  • Large Paintings (34)
    • On Canvas (14)
    • On Paper (20)
  • Prints (27)
    • Paintings (20)
    • Photographs (6)
    • Posters (1)
  • SOLD (52)
  • Uncategorized (3)
  • Workshops (3)
Your Cart
#EyesForDestinations
  • narendra bhawan bikaner, narendra bhawan, eyesforrajasthan, eyesfordestinations, bikaner, rajasthan, travel photogapher, nainaxnarendrabhawan, best boutique hotel in india, indian boutique hotel, narendra bhawan india, narendra singh, naina redhu, naina, lifestyle photographer, travel blogger
    The Nine Stages of Experiencing Narendra Bhawan Bikaner
    • December 17, 2020
  • bhairon vilas, bikaner, hotel bhairon vilas, dive bar bikaner, dive bar, narendra bhawan bikaner, rajasthan, eyesfordestinations, eyesforrajasthan, rajasthan photographs, travel photographer, bikaner photographs, bikaner bar
    The Dive Bar at Bhairon Vilas, Bikaner
    • December 9, 2020
  • The Way We Were, Dream A Little Dream, Head Up In The Clouds, Feet On The Ground, Be Elevated, Binsar, Binsar Wildlife Reserve, Mary Budden Estate, Himalayas, Uttrakhand Diaries, In The Woods, Tap Your Primordial, A Forest Dream, Seek The Wilderness, Climb Your Mountain, Forests Are Storytellers, Seek Your Wilderness, Into A Mountain, Find Your Story, Remote Life, Remote Expeditions, Remote Places, Remote Travel, Uttrakhand Tourism, Eyes For Destinations, Find Your Wonderland, Disconnect To Connect, Indian Photographer, Travel Photographer India, Hospitality Photographer India, Luxury, Lifestyle, Blogger, Naina Redhu, Naina.co, Naina
    Dream A Little Dream At The Mary Budden Estate, Binsar, Uttarakhand.
    • October 6, 2020
ART SHOP
  • 2020 #Alive ₹6,000.00
  • Vital #Alive ₹6,000.00
  • Flourishing #Alive ₹6,000.00
  • Vigorous #Alive ₹7,000.00
  • Extant #Alive ₹7,000.00
  • Spry #Alive ₹8,000.00

All Copyright rests with Naina Redhu. All Rights Reserved 2020. Written permission is required for you to copy & use images or text from this website. Email n@naina.co to ask.

NAINA.CO
  • Blog
  • Photography Portfolio
  • Contact & About
  • Press
  • Clients
  • Newsletter
All Rights Reserved. Copyright Naina.co 2020.

Input your search keywords and press Enter.