As a business owner, I have learnt that it’s important to offer multiple channels of communication to your clients.Some people prefer phone calls, others enjoy email, some like to reach out via social media, and then there are those people who would rather visit you in person.So this is why a “Contact” page on your website or blog, needs to be easily accessible, with all modes of contact, clearly displayed.[check_list]
- You want people to communicate with you.
- You want people to share about you with their social networks.
- You want people to know that they can reach you in various ways
[/check_list]All of the above, you probably already realise, in fact it's probably one of the most obvious requirements for a business website. If you've yet to add a contact page to your website, then you better get cracking and set it up as soon as possible, because you’re missing out on business opportunities right now.[highlight class="highlight_yellow" style=""]Add something different...[/highlight]For those of you who already have a “Contact” page, then you probably have social sharing icons, phone details, business address, perhaps a map, and definitely an email form.Now it’s time to add something that you don’t see on “Contact” pages, at least I haven’t seen this on one yet.[highlight class="highlight_yellow" style=""]A clickable button link that encourages people to reach out to you on Twitter, for support and enquiries.[/highlight]Let me set the scene, so that you can see why I think this might be useful.A few weeks back, a company that I use for a particular online hosting related service, was having some service issues. I was unable to reach them by phone, email or ticketing system. There were no updates on Social channels or their website. Now I probably could have waited for a response, which eventually would’ve come, however in this day and age, none of us like to wait.And when my clients started asking me what was going on, I needed an answer as soon as possible.[highlight class="highlight_yellow" style=""]So what to do?[/highlight]Well I decided to reach out to the business through Twitter. I loaded up their webpage in my browser, found my way to their Twitter profile link, clicked on it and ended up on their Twitter page. Next I logged in to Twitter, copied their Twitter name, and pasted it into the “Compose Tweet” and fired off a message to them.Afterward I was thinking that it would have saved me time and effort, if the website had a button or a link that I could’ve clicked on, which would automatically add their Twitter name and an editable support message into a Tweet.So this is what I came up with, using the Twitter buttons page https://twitter.com/about/resources/buttons and a little bit of tweaking – an easy to implement shortcode that you can add to your WordPress website, to allow people to reachout to you easily this way.If you don’t know what a shortcode is, well it’s basically a simple piece of text wrapped up in [ ] square brackets that you add onto a WordPress page or post, that activates a function. http://codex.wordpress.org/Shortcode_API[highlight class="highlight_yellow" style=""]How to create your Tweet Support Button:[/highlight]Ok so let’s first create the function which you add to your childtheme’s functions.php file. And then we’ll attach it to a shortcode and finally add some CSS styling to make it really shine.Define the function using:[php]function dtwd_tweet_support($atts) {extract(shortcode_atts(array( 'text' => 'I would like help with ', 'related' => 'mrdavidtiong', 'class' => 'twitter-mention-button', ), $atts)); return '<a class="'.$class.'" href="https://twitter.com/intent/tweet?screen_name=mrdavidtiong&text='.$text.'" data-size="large" data-related="'.$related.'">Contact @MrDavidTiong by Tweet</a>'; ?><script type="text/javascript">// <![CDATA[!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");// ]]></script><!--?php }<br ?-->[/php]What this does is set up a function called “dtwd_tweet_support”, inputs some default actions such as who you are tweeting to, text for entering in the tweet and the styling class of the link. Then it puts it altogether with the Twitter script to generate the Tweet button.Of course you will want to replace each instance that you see “mrdavidtiong” with your Twitter profile name, so that it works for you.I chose the default Tweet text as “I would like help with”, but you could change that default to something that suits your situation, such as “Please contact me by” or “I am having trouble with”, or “When will the service be available?” etc.Note that you can also tailor this Tweet message individually when using the shortcode (as you will see below)But first let’s add the following to the functions.php file also, insert it at the end of the function code above.[php]add_shortcode('dtwd-tweet-support', 'dtwd_tweet_support');[/php]This code tells our WordPress site that if we use the shortcode [dtwd-tweet-support] anywhere on a page, it needs to activate our function “dtwd_tweet_support” in that spot.So here’s how you can use this shortcode:[dtwd-tweet-support] – this will generate a button for people to click on that uses your defaults as defined in the function[dtwd-tweet-support text=”I really love your service and highly recommend you”] – this will generate a button for people to click on that uses the defaults, but overrides the text default with the text added here in the shortcode[dtwd-tweet-support text=”I really love your service and highly recommend you” class=”dtwd-tweet-support”] – this will generate a link with the added text, and also style the link with a special class called “dtwd-tweet-support” that will override the default Twitter button stylingAlthough the default styled button from Twitter is good, you may want to style this to suit your theme, or to suit where you are placing it on the webpage. Using the “dtwd-tweet-support” class, enables you to do this
Here is the CSS I used to style the above link, you can modify as you wish, or you can make up your own.[css]a.dtwd-tweet-support { color: #69BFDC; font-family: arial,sans-serif; font-weight: bold; padding: 10px 0 10px 50px; text-transform: uppercase; }a.dtwd-tweet-support:before { content: " "; background: url('../theme-name/images/dtwd-tweet-support.png') no-repeat; height: 32px; margin: -5px -36px; position: absolute; width: 32px;}a.dtwd-tweet-support:hover {color:red;}[/css]Be sure to upload a suitable picture file called “dtwd-tweet-support.png” to use as the icon in the link above. Upload this into your theme’s image folder and adjust the URL, if necessary, for the path to the image, changing “theme-name” to your theme’s name also.The image size should be 32px. If you’d like some links to some twitter images check out this URL www.iconfinder.com/search/?q=iconset%3Atweetle otherwise the image I used is: www.iconfinder.com/icondetails/82292/128/bird_new_single_twitter_iconNow that you have added this shortcode function to your website, you can start customising Tweets in your other pages and posts as well. In fact I’m sure there are many creative ways you can implement this on your blog or website.Try this one out: [tweet-support class="bobb" text="thanks for sharing this great tip, love this idea of a Tweet Support Button"]Be sure to share how you’ve applied this to your site, in the comments below.
Comments: