Category: Social Media

How to add an Instagram feed to your WordPress website

Add Instagram feed widget to website

Many bloggers use Instagram as part of their social media strategy. If you are looking at ways to share your Instagram photos on your WordPress website, then one option is to use the WordPress embed, which simply requires you to copy the Instagram URL of a photo and paste it on its own line in the WordPress editor.

As an example if I put http://instagram.com/p/yiNjY6JrLI/ onto a line all by itself, then the following photo appears.

Fallen lotus #lotus #watergarden #flowers

A post shared by David Tiong (@mrdavidtiong) on

Alternatively you could use a WordPress plugin to add Instagram photos, or otherwise you can try the jQuery Spectragram jQuery script function to connect your website with your Instagram account and then embed photos onto your pages.

I’ve setup this easy to use script to add my 9 latest photos from Instagram into my footer widget using the technique in this article, but you can use this shortcode in a variety of ways, either adding into your sidebar or on a page. There are options in the shortcode to customise the output, and you can modify your photos further using script options and css.

If you want to be able to setup different looking Instagram feeds on separate pages, then you can customise the script to display your user feed, what’s popular at the moment, or by recently tagged. Only use the shortcode once per page however, so if you have added it to your sidebar or footer, then don’t use it also in a post or page.
NB: If you want to add multiple instances of Instagram photo feed onto a single page, then you can do this without using the shortcode, but instead adding different jQuery selectors to your custom script.

Here is an example of using the medium size images, displaying the latest 4 images all tagged with #WHPpointofview.

[instagridtwo]

If you’d like to view my Instagram footer widget then scroll down to the bottom of the page. Otherwise here is how to setup your own Instagram shortcode.

Quick Overview of Steps

1. Register an application at Instagram.com/developer to receive a client ID
2. Obtain a token for your application to communicate with Instagram
3. Create the shortcode, setup the script options, and upload the files to your website.
4. Test it out and customise with CSS

It might seem a little complicated, but it’s actually pretty easy to use jQuery Spectragram.

Register an Instagram application

This is a necessary step to validate your script so that you can communicate with Instagram. Go to instagram.com/developer, sign in and click the button that says to register an application or register a client.

Fill in your details, I just used a simple application name like “mywebwidget”, enter in my website URL and for the OAuth redirect_uri I just used my website URL again. Next you need to uncheck the box that says “Disable implicit OAuth”. When you save you will receive your CLIENT ID and CLIENT SECRET. You will need this next.

Obtain an Access Token

Copy the URL below into a browser address bar, modify the parts marked in capital letters with the corresponding values.

https://instagram.com/oauth/authorize/?client_id=CLIENT-ID&redirect_uri=REDIRECT-URI&response_type=token

So where it says CLIENT-ID replace with your client ID, and where it says REDIRECT-URI replace with your redirect url. (These are the values from the application/client you just setup)

Once you submit the URL with your updated values it will redirect to your website. Take a look at the address bar and you will see attached to the end of your URL something like … /#access_token=123456789123456798ABCABC

The bit after the access_token= is your ACCESS TOKEN and you will need this, so copy it down into a text file and save on your computer.

That’s it for the Instagram application, though if you want to you can go back into your application via Manage Client and re-tick the box “Disable implicit OAuth”.

Set up the files and shortcode

Download the spectragram.js script from github.com/adrianengine/jquery-spectragram. Save it into a folder called “spectragram” inside a “js” folder, located inside the childtheme folder of your WordPress website. (if you don’t have a “js” folder inside the childtheme folder, then add one). So the path should look like /wp-content/themes/your-childtheme/js/spectragram/

Now create a javascript file (save it as spectragramscript.js in the spectragram folder also) to setup the options for Spectragram. Use the code below, but insert your CLIENT ID and ACCESS TOKEN into the corresponding sections.

/*script for spectragram*/
jQuery(document).ready(function($) {
jQuery.fn.spectragram.accessData = {
accessToken: 'add-access-token',
clientID: 'add-client-id'
};
var instamethod = instag.method;
var instaquery = instag.query;
var instamax = instag.max;
var instasize = instag.size;
var instaclass = instag.class;
$('.'+instaclass).spectragram(instamethod,{
query: instaquery,
max: instamax,
size: instasize,
wrapEachWith: '<li></li>'
});
});

Now you want to setup your shortcode function, so the following code is added to your childtheme’s functions.php file. The first part registers the scripts ready for enqueueing. The second part sets up the shortcode with some default values and enqueues the scripts (so only loading on pages that have the shortcode).

function add_spectragram_files() {
wp_register_script('spectragram',get_stylesheet_directory_uri().'/js/spectragram/spectragram.js',array('jquery'),'',true);
wp_register_script('spectragramscript',get_stylesheet_directory_uri().'/js/spectragram/spectragramscript.js',array('spectragram'),'',true);
}
add_action('wp_enqueue_scripts','add_spectragram_files');

function spectragram_shortcode($atts, $content = null){
$spectragramdata = shortcode_atts(array(
'query' => '',
'max' => '9',
'size' => 'small',
'class' => 'instagrid',
'method' => 'getUserFeed'
),$atts);
wp_enqueue_script('spectragram');
wp_enqueue_script('spectragramscript');
wp_localize_script('spectragramscript','instag',$spectragramdata);
$spectra_class = $spectragramdata['class'];
$instagram_spectragram = '<ul class="'.$spectra_class.'"></ul>';
return $instagram_spectragram;
}
add_shortcode('instagrid','spectragram_shortcode');

How to use the shortcode

Simply add [instagrid query="your-Instagram-username"] to your page or sidebar widget. This will add 9 small photos from your Instagram account onto the page. Options in the shortcode:

  • query=”your username | tag name” //default is empty *so this option must always be included. Use a username if setting method as getUserFeed; use a tag name if setting method as getRecentTagged
  • method=”getUserFeed | getRecentTagged” //default is getUserFeed
  • max=”number” //default is 9
  • size=”small | medium | big” //default is small
  • class=”add a classname” //default is instagrid
  • Remember to only use this shortcode once on a page

Ok so now you will need to style your Instagram photo feed. To do this you simply add some CSS to your childtheme’s style.css file. If you noticed above I used list markup for the photos, so the first CSS modification you would do is to remove the bullets and to change the alignment.

.instagrid li {
display:inline-block;
float:left;
list-style:none outside none;
margin:0;
padding:0;
}
ul.instagrid {
display:inline-block;
margin:0 auto;
}

Here are some more CSS notes:

  • If you are inserting into a text widget, you may need to add more specificity using .textwidget css rules
  • If you wish to manually change the size of the images try adding width rules to the .instagrid li css for eg, width:75px;
  • If you wish to control the overall width of the displayed photos, try adding width or max-width css rules
  • If you want to add the shortcode onto different pages and style each one differently, use the class=”ADD CLASS NAME” option in your shortcode, and then add the corresponding CSS rules.

Now you have your very own Instagram photo feed shortcode setup to use the Instagram API. For more information consult their documentation.

Don’t forget to checkout my Instragram grid in the footer below, and click on one of the images to look at it on Instagram.

Follow my blog with Bloglovin

Filed under: Social Media, WordPressTagged with: , , ,

How to setup Twitter Cards for WordPress websites

Setup Twitter Cards for WordPress websites

Make your website links stand out in the Twitter stream with Twitter Cards.

This is an updated version of my original Twitter Card post from April last year. I decided to add more value with some functions to automate your Twitter Cards. This code will enable you to use the following 3 types of Twitter Cards:

Summary Cards

Large Image Summary Cards

Photo Cards

 

What are Twitter Cards?

When you have Twitter Card markup on your website, then when a Twitter user tweets your post or page, a special card is attached to that tweet, that is visible to their followers. So in a Twitter stream, when a link from your website appears in a Tweet, there is an option to click on the card to expand.

Here are some examples of the 3 cards we will be setting up:

Summary Card:

The Twitter Summary Card is designed to give the reader a preview of the content by displaying a small image and summary below the 140 characters.

Summary Card with Large Image:

This Large Image Summary Card displays a large, full-width image with the tweet, to make your featured image stand out along with the summary and link to your website.

Photo Card:

The Twitter Photo Card put the focus on the image, richer and in more detail puts the image front and center in the Tweet.


So now it’s time to add this cool feature for your website links on Twitter.

First we’ll cover the key meta fields that need to go into your page header so that Twitter can identify the correct card, image and information.

There are 6 key fields that are common and will look something like this:

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@mrDavidTiong" />
<meta name="twitter:title" content="The page title" />
<meta name="twitter:description" content="The page description" />
<meta name="twitter:image" content="my-image-url.jpg" />
<meta name="twitter:url" content="The page url" />

If you want to review the documentation, then you can read up on the different Twitter Cards type here.

Now we want to automate as much as possible so that we don’t have to type in this header code for each post or page on our website. The following function will extract the data from your website based on featured images, excerpts or page content, and you can also choose on a page by page basis which card you want to display.

Copy the code below and paste into your childtheme’s functions.php file or your mu-plugin file. The code sets a default Summary Twitter Card for posts and pages. It adds the Twitter handle, the page title, a page description, an image and the page url. There are important notes below the code explaining further.

//add Twitter card function information
function add_twitter_card_information() {
    global $post;
    $twit_card_type='summary';
    $twit_pic='';
    $twit_description='';
    if (is_single() || is_page()) {
        if(get_post_meta($post->ID,'cardtwitter_type',true) !='') {
            $twit_card_type= get_post_meta($post->ID,'cardtwitter_type',true);
        }
        if(has_excerpt()) {
            $twit_description= esc_attr(strip_tags(get_the_excerpt()));
        }
        elseif ($post->post_content !='') {
            $twit_description= esc_attr(strip_tags(wp_trim_words(do_shortcode($post->post_content), 21, '...')));
        }
        if(get_post_meta($post->ID,'cardtwitter_pic',true) != '') {
            $twit_pic= get_post_meta($post->ID,'cardtwitter_pic',true);
        } elseif (has_post_thumbnail()) {
            $twit_pic= wp_get_attachment_url(get_post_thumbnail_id($post->ID));
        } else { 
            $twit_pic='ADD-A-DEFAULT-IMAGE-HERE';
        }
        ?><meta name="twitter:card" content="<?php echo $twit_card_type; ?>" />
        <meta name="twitter:site" content="@ADD-YOUR-TWITTER-HANDLE" />
        <meta name="twitter:title" content="<?php the_title_attribute(); ?>" />
        <meta name="twitter:description" content="<?php echo $twit_description; ?>" />
        <meta name="twitter:image" content="<?php echo $twit_pic; ?>" />
        <meta name="twitter:url" content="<?php the_permalink(); ?>" /><?php
    }
}
add_action('wp_head','add_twitter_card_information');

You can print a copy of this page for reference if required



Important Notes about the above code:

  1. change the ADD-A-DEFAULT-IMAGE-HERE to your preferred default image url.
  2. change the @ADD-YOUR-TWITTER-HANDLE to your Twitter handle.
  3. for the type of Twitter Card, the line “$twit_card_type=’summary’;” sets as default the Summary Card, however you may prefer to put in ‘summary_large_image’ or ‘photo’. You can then choose which card to display for individual pages and posts using a custom field “cardtwitter_type” (referred to in the custom fields section below)
  4. for the page description this code first looks for an excerpt to use, otherwise it looks at the page content and outputs the first 21 words as the description (you can change that number to your preference). When using the page content, shortcodes will be executed to output the text so as not to see shortcodes output something like [heading title=”title”…]. It also strips the tags and escapes the attribute so as not to cause errors with <, >, &, ” and ‘.
  5. for the image this code looks first for an image in the custom field “cardtwitter_pic” (referred to in the custom fields section below), and if no image is found then it looks for a featured image. Lastly it will display your default image if nothing is found.

Using WordPress custom fields to choose Card Type and Image

WordPress posts and pages have support for custom fields. So we will create and use 2 custom fields when we want more control over the image for the Twitter Card and also when we want to select a Twitter Card other than the default we set in the function code.

Let’s go ahead and create that now. Go into a post or page editing screen. Click on “Screen Options” and make sure that “Custom Fields” is ticked.

custom fields in screen options

Now we enter the custom fields. Scroll down to the “Custom Fields” section and add a new custom field “cardtwitter_type”, then either enter the text “summary”, “summary_large_image” or “photo”, depending on which type of card you want to display for that particular page or post. If you don’t add the “cardtwitter_type” custom field to a page, then the default card type you have set in the function code will display.
In a similar way, setting a custom field of “cardtwitter_pic” can be used to display a custom image for your Twitter Card, otherwise the featured image will display, or if none then the default image you have chosen will display.
The short video below shows how easy it is to add the custom fields into your posts and pages.

Validating your Twitter Cards and testing them with Twitter’s Validation Tool

Now that the markup is on your pages, you must be approved by Twitter before your cards will display. This is really easy. Go to Cards Validator and login to your Twitter account.

Next enter in a url of a page you want to validate. When you click on the “Preview card” button, Twitter will then analyse that url for Twitter card markup, and if found it will display your card preview. It will also advise you what type of card markup it found and whether you are approved for that card. As in the image below, if you need to click on the “Request Approval” button then do so and fill in the form.

Request approval Twitter Summary Card

Twitter will display a message – if you are immediately rejected, then it may just be an issue at Twitter’s end. Try requesting approval again. Make sure that there are no errors displaying. If you test the url again you should see a message that your approval is pending.

Pending card for Twitter

When approved, Twitter will send you an email to advise. You can also check using the Validator for the whitelisting message.

Whitelist Twitter Card

Very Important:
Twitter requires you to request approval for each of the card types. So choose a url for each Twitter Card type, and “Request Approval” for each.

So that’s how you setup Twitter Cards for Summary Cards, Summary Cards with Large Image, and Photo Cards for your WordPress website.

Print a nice copy of this page for reference

Filed under: Social Media, WordPressTagged with: ,

Add Google Plus Comments to your WordPress website

Google is one big and mighty search engine, unmistakenly the leader in its field. Now that they have entered the Social Media market also, many of us are turning to Google Plus to build communities and share in “circles” for work and for pleasure.

We anticipate that as Google introduces more social signals to its search engine algorithm, this inevitably will lead to an advantage if you are engaged with users on Google+.

Not so long ago in April 2013, Google introduced to Blogger, its blogging platform, GOOGLE PLUS COMMENTS, so people can now comment on blogs using their Google+ profiles.

According to Google’s blog post:

Using Google Plus Comments will allow you to: “View your blog and Google+ comments, all in one place. Now when you’re browsing your blog’s comment threads, you’ll see activity from direct visitors, and from people talking about your content on Google+ … This way you can engage with more of your readers, all in one place … Help readers comment and connect with their circles”

Not all of us use Blogger as a blogging platform, so thankfully we now have access to Google Plus Powered Comments via 3rd party plugins, but at this stage, no-one seems to know how Google plans to roll out the Google Plus commenting system to other platforms besides its own.

Officially the integration of Google+ Comments is only available for Blogger sites, and Google isn’t saying anything yet so their aren’t many ways to control or customise the comments. Also the comments belong to Google Plus, not your website, so an option at this stage until we see what happens is to run with both the WordPress native commenting system, as well as Google Plus commenting. I guess this is kind of the best of both worlds.

I’ve just finished adding Google+ comments to my site, I decided to add a custom function to my childtheme’s functions.php file and a little bit of CSS to my childtheme’s stylesheet file, rather than installing one of the WordPress plugins.

The code is below if you’d like to try implementing Google+ comments on your own WordPress website. You may need to alter it to suit your website, and use a suitable hook to attach the function to. Different themes use different hooks but basically you want to look at adding the comments after the post and before the WordPress comments.

// add google comments at end of post
function dtwd_google_comments() {
if (is_single()) { ?>
<div id="g-plus-comments"><h5>Try out the new Google+ comments</h5>
<div id="comments" style="width:578px;"></div>
<script>
gapi.comments.render('comments', {
href: window.location,
width: '578',
first_party_property: 'BLOGGER',
view_type: 'FILTERED_POSTMOD'
});
</script></div>
<?php }
}
add_action('ADD-YOUR-THEME-HOOK-HERE', 'dtwd_google_comments');
?>

Be sure to change ‘ADD-YOUR-THEME-HOOK-HERE’ to a suitable hook for your WordPress theme. For example ‘genesis_before_comments’ for Genesis framework, ‘thesis_hook_after_post_box’ for Thesis themes, etc.

And here’s the CSS that I’m using to style the above:

#g-plus-comments {
	height: 220px;
	margin-bottom: 10px;
	min-height:220px;
	padding-bottom:10px;
}
#g-plus-comments h5 {
	text-transform:uppercase;
	font-size:14px;
	font-weight:bold;
	color:#A60000;
}

It will be interesting to see how this works, so please feel free to engage in the Google+ comments below and let me know if you implement on your website also so I can pop on over and check it out.

*25th August 2013 UPDATE **
After experimenting with the Google Plus Comments here on my blog, I have decided that the idea behind adding comments to your blog for more exposure on Google Plus hasn’t really helped as much as I’d like. If Google decides to make the comments appear on the Google Plus wall/ feed of the business then it may be worth reconsidering in the future. But for the moment, running 2 commenting options is confusing, so I have opted to run with the WordPress commenting system. I have left this post with the Google Plus comments included, so feel free to try it out.

Filed under: Social Media, WordPressTagged with: ,

How to add Twitter cards code to your WordPress website

28th November 2014 update:
There is a new post with updated code for adding Twitter Cards to your WordPress website – please view the new article at
latest Twitter Card article

How would you like to be able to add Twitter cards markup code to your WordPress website?

Twitter cards is a brand new way to add extra content to your Tweets, simply by adding Twitter Card html code to your webpages. So that when someone links to your content in Twitter, a “card” with more information will be attached to the Tweet.

 

So firstly here are the basic steps involved to add Twitter Card markup to your website:

[highlight class=”highlight_yellow” style=””]Step 1.[/highlight]
Review the Twitter Card documentation- in this post I’ll show you how to add Summary Card to your Tweets. This is the Default card which contains title, description, thumbnail image, and Twitter account attribution.
You can read the documentation here.

[highlight class=”highlight_yellow” style=””]Step 2.[/highlight]
Add the required Twitter Meta markup to your page header

[php]
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@ insert-twitter-Account" />
<meta name="twitter:creator" content="@ insert-twitter-account-for-page-Author" />
<meta name="twitter:url" content="the page url goes here" />
<meta name="twitter:title" content="the page title goes here" />
<meta name="twitter:description" content="the page excerpt or short description goes here" />
<meta name="twitter:image" content="add an image to your card here" />
[/php]

[highlight class=”highlight_yellow” style=””]Step 3.[/highlight]
Twitter have provided a great tool so that you can check your markup to make sure you’ve got it right. Add your URL that you wish to validate here

[highlight class=”highlight_yellow” style=””]Step 4.[/highlight]
Request approval for your website from Twitter Cards- simply click on the “Request Approval” button as shown in the image below and fill your details in the form to register your domain. Please note that Twitter must approve the integration- which according to their site takes a couple of weeks.
Add Twitter Cards to WordPress website

The “automatic” way to have your WordPress website pages setup for Twitter Cards -Summary Card

What’s the easiest way to add this code to your webpages so that you maximise the potential of Twitter Cards?

As each page on your website has its own unique content, you want your Twitter Cards to show different content for each page. But adding this manually each time can be quite time consuming, and also easy to forget to do.

The following code will add the required Twitter card markup to your home page, your posts, pages and category. It uses permalinks, excerpts, bloginfo and other WordPress code to tailor the Twitter cards for the different pages.

Keep this to yourself or share with your friends on Twitter

Add the following code to your header.php

[php]
<?php if ( is_category() ) { $cat = get_query_var(‘cat’); $metacat= strip_tags(category_description($cat)); $current_page_URL = $_SERVER["SERVER_NAME"] . $_SERVER["REQUEST_URI"]; ?>
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@ CHANGE-ME" />
<meta name="twitter:creator" content="@ CHANGE-ME" />
<meta name="twitter:url" content="<?php echo esc_url($current_page_URL);?>" />
<meta name="twitter:title" content="<?php single_cat_title();?>" />
<meta name="twitter:description" content="<?php echo $metacat;?>" />
<?php } ?><?php if (is_single() || is_page() ) : if (have_posts() ) : while (have_posts() ) : the_post(); ?>
<meta name="twitter:description" content="<?php echo get_the_excerpt();?>" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@ CHANGE-ME" />
<meta name="twitter:creator" content="@ CHANGE-ME" />
<meta name="twitter:url" content="<?php the_permalink();?>" />
<meta name="twitter:title" content="<?php the_title();?>" />
<?php endwhile; endif; elseif (is_home() ): ?>
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@ CHANGE-ME" />
<meta name="twitter:creator" content="@ CHANGE-ME" />
<meta name="twitter:url" content="<?php echo home_url();?>" />
<meta name="twitter:title" content="<?php echo esc_attr(get_bloginfo(‘name’));?>" />
<meta name="twitter:description" content="<?php bloginfo(‘description’); ?>" />
<meta name="twitter:image:src" content="INSERT-IMAGE-URL" /><?php endif; ?>
[/php]

Don’t forget to add your Twitter handle/ username where it says CHANGE-ME and add an image URL for your Home page Twitter Card where it says INSERT-IMAGE-URL.

You might have noticed that I haven’t added the markup for the “twitter:image:src” for the posts and pages. I thought that it might be nice to be able to customise this individually for each post using the built in WordPress custom meta data that you find in the post editing screen.

Firstly add this to the your childtheme’s functions.php file:

[php]
add_action(‘wp_head’,’twitcard_img’);
function twitcard_img(){
global $post;
if (is_single()||is_page()){
if(get_post_meta($post->ID,’twitcard_picture_url’,true) != ”)
echo ‘<meta name="twitter:image:src" content="’.get_post_meta($post->ID,’twitcard_picture_url’,true).’" />’;
}
}
[/php]

This defines a new function called “twitcard_img” that extracts the data that you insert into the custom field “twitcard_picture_url” and adds that into the header of your posts and pages inside the content of “twitter:image:src”.

Now you need to create that custom field. Go into a post or page editing screen. Click on the “Screen Options” and ensure “Custom Fields” is ticked.

custom fields in screen options

 

Next scroll down to “Custom Fields” and add your new custom field “twitcard_picture_url”

add new custom field

 

Now when you create posts and pages, add the image URL that you want in your Twitter card into this custom field, and the “twitcard_img” function will auto add it your pages header, so that your Twitter card will display that image.

using custom field

 

Then load the URL into the validator and check it out.

how to Twitter Card setup

 

So there you have it. Have you started using Twitter Cards already? Be one of the first and get started today.

Filed under: Social Media, WordPressTagged with: ,

Add Retweet button shortcode to WordPress

** this article has been updated 23rd August 2014, to work with Twitter 

Adding a Retweet button onto a WordPress page is really quite simple. There are many plugins that you could use. Alternatively you could simply add some javascript from a social sharing site straight onto your pages.

Some WordPress themes may already have a shortcode that you can use, however if not, here is another way that you could add Retweet Buttons to your page.

Firstly go grab some code over at the official Twitter Buttons page.

add retweet button shortcode

Once you have selected your preferences, copy your code. It will look something like this:

[php]
<a href="https://twitter.com/share" class="twitter-share-button" data-text="Reading this article" data-via="MrDavidTiong" data-size="large" data-hashtags="WordPress">Tweet</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>
[/php]

The first part that is wrapped up in your <a href=…>Tweet</a> is your link code, and the second part is your javascript.

Now we will create a simple shortcode so that whenever you want to use the Retweet button you can simply type in something short like [dtwd_tweet]. The other advantage of using a shortcode is that if you decide to change some of those original preferences, you just modify your shortcode in the functions.php file of your childtheme, and the changes will be reflected wherever that shortcode has been used.

First step to creating the shortcode is to setup your function, which we will call dtwd_tweet_this. We will add the script at the start, followed by the link:

[php]
function dtwd_tweet_this() {
?>ADD YOUR SCRIPT HERE<?php
return ‘ADD YOUR LINK HERE’;
}
[/php]

So it should look something like mine below:

[php]
function dtwd_tweet_this() {
?><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><?php
return ‘<a href="https://twitter.com/share" class="twitter-share-button" data-text="Reading this article" data-via="MrDavidTiong" data-size="large" data-hashtags="WordPress">Tweet</a>’;
}
[/php]

***The update ***
Now this was working, however recently I noticed that it stopped functioning, so I’m going to suggest modifying your above link in the following way:

[php]
return ‘<a href="https://twitter.com/share?text=Reading this article&via=mrDavidTiong&hashtags=WordPress" class="twitter-share-button" data-size="large" data-lang="en" >Tweet</a>’;
[/php]

Obviously replace “Reading this article” with your preferred text, “mrDavidTiong” with your Twitter handle, and “WordPress” with your preferred hashtag(s).

Now the next step is to tell WordPress that you want a shortcode called [dtwd_tweet] that activates the dtwd_tweet_this function.

[php]
add_shortcode(‘dtwd_tweet’, ‘dtwd_tweet_this’);
[/php]

so the complete code that goes into your childtheme’s functions.php file will be something like this:

[php]
function dtwd_tweet_this() {
?><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><?php
return ‘<a href="https://twitter.com/share" class="twitter-share-button" data-text="Reading this article" data-via="MrDavidTiong" data-size="large" data-hashtags="WordPress">Tweet</a>’;
}
add_shortcode(‘dtwd_tweet’, ‘dtwd_tweet_this’);
[/php]

and to use your new shortcode you simply type in [dtwd_tweet] into your posts and pages where you want it to appear and it will look like this —>

Premium Club Members can access additional code options below:
Continue reading

Filed under: Social Media, WordPressTagged with: , ,