Hey guys, this post is for my fellow blogging friends today! :) If you’re not a blogger, feel free to scroll on by. Check out some of our greatest hits from the past! :) And be sure to keep in touch with daily photos and videos on Instagram and Snapchat. :)
Blogging friends!!! So glad you’re here. :) If you have a mobile site, I just figured out a super cool way to link to your Instagram and Snapchat profiles so that when a reader clicks on the link from their phone, it will open up to your profile IN THE APP. Then they can just click to immediately follow you! You can see examples in the pictures above.
Try it out!
Click on the icons below from your mobile device (with Instagram & Snapchat installed).
How To Do It
Note: This tutorial is a bit easier to read from a desktop site. :)
Just use this link:
*Obviously change kevinandamanda to your username! :)
<a href="instagram://user?username=kevinandamanda">Follow Kevin & Amanda on Instagram!</a>
That would be the exact code you would place on your site.
When people click on that link from their phone, it will open to your profile directly in the Instagram app.
You can also make an image clickable as well. This is especially useful for Snapchat with your Snapcode image.
Here’s the code you would use:
<a href="instagram://user?username=kevinandamanda"><img src="http://yourblog.com/instagramicon.jpg" alt="Follow us on Instagram!" /></a>
Again, you’ll need to change kevinandamanda to your username, and you’ll need to use your own Image URL that you have uploaded to your blog.
Here’s an easy way to get the exact Image URL and code to use. Create a draft post and upload the image you want to use, like an Instagram icon. You can get a get a good (official) Instagram logo from Instagram-Brand.com. Just scroll down to Brand Assets. Add the image to your draft post. Click on the image, and then click on the link button to add a link. This will make the image clickable. In the URL box, just copy and paste the Instagram link below, using your username. Then switch over to the HTML/code view, and highlight and copy all of the code. Boom! Now you can paste that code anywhere on your mobile site.
Instagram Link to Open Profile In The App
***Note*** I recommend only using this link on your mobile site, as nothing will happen if someone clicks on that link from their desktop. I’ll show you how to do that later in the post.
To open your profile directly in the Snapchat app, just use this link:
*Change kevinandamanda to your username :)
Click here to download a picture of your Snapcode if you want to use it like we did with the Instagram icon above.
When someone clicks on that link from their phone, it will open to your profile directly in Snapchat so they can easily follow you.
Just to note, it won’t work if you’re trying it out on your own username… If you’re signed in as yourself it will just open the Snapchat main screen. But if you’re signed in as someone else, it will open up the Add Friend screen when they click the link.
If someone clicks on that link from their desktop, it will just take them to Snapchat.com. So it’s a good idea to also have your Snapcode on your site as well, so if they’re on their desktop, they can just take a picture of it with their phone to add you.
Another thing you can do is create a short post with your Snapcode, encouraging your readers to follow you on Snapchat. Here’s an example of mine. That way you can link to that page from your desktop site.
If you want a page like that, but don’t want it to show up on your site or go out in your RSS feed to all of your readers, just create a new PAGE in WordPress. Go to your WordPress Dashboard, click on Pages, then click Add New. It’s just like a post you can link to and promote, but it won’t show up on your site or in your RSS feed or emails.
Implementing On Your Mobile Site:
Here’s how I added this to my mobile site. I just added it to the bottom of every post. I use AdThrive and have an AdThrive Mobile Site. If you have AdThrive, you probably have the plugin Header and Footer. If not, go to your Plugins page in WordPress and add it. This should work even if you don’t have AdThrive OR a mobile site.
Note: If you also have Yoast SEO installed, you might get a warning Yoast and Header and Footer conflicting over OpenGraph. I don’t have OpenGraph enabled on Header and Footer, so I don’t think they are conflicting. I just ignore the warning. I’ve been using both for months and haven’t noticed any problems. But I just wanted to give you a heads up. Maybe someone who knows more about these things can chime in?
After activating Header and Footer, click on Settings, then Header and Footer, then Post content (mobile).
Check the box next to “Enable mobile detection and injection.” (Thanks Patty K for reminding me!)
Then click in the textbox that says “Code to be inserted after each post” and paste the following code:
<b><font color="#FF3D2E">Keep in touch!</font></b>
Follow us on Instagram & Snapchat:
<a href="instagram://user?username=kevinandamanda"><img src="http://yourblog.com/instagramicon.jpg" alt="Follow on Instagram!" width="100" /></a>
<a target="_blank" href="https://www.snapchat.com/add/kevinandamanda"><img src="http://www.kevinandamanda.com/whatsnew/wp-content/uploads/2016/01/snapcode-480x480.png" width="100"></a>
Here’s what you’ll want to change.
FF3D2E – Change this color to coordinate with your blog, or change it to 000000 for black.
kevinandamanda – Change to your Instagram username
http://yourblog.com/instagramicon.jpg – The direct link to the Instagram image you uploaded. You’ll need to upload the image to your blog somewhere.
kevinandamanda – Change to your Snapchat username.
http://www.kevinandamanda.com/whatsnew/wp-content/uploads/2016/01/snapcode-480×480.png – Replace this with the URL to your Snapcode image that you have uploaded to your blog.
Of course feel free to make any other changes to suit your blog! :)
After you’ve made all your changes, be sure to click Save.
This will only appear when someone views your site from their mobile device. When someone clicks on the Instagram or Snapchat icons, it will open to your profile directly in the app.
Here’s how it will look on your mobile site:
Check it out LIVE on our site by viewing this post on your phone.
Hope this helps!!
Any questions? Leave me a comment! :)
Good luck! :)