How To Embed Garmin Connect Activities In WordPress
One of Garmin Connect’s recent enhancements is the embed widget – a snippet of code that allows you to post activity details on your website or blog.
This is a great new feature, but one that may be proving difficult for WordPress users to take advantage of. There is a solution!!!
So the “embed” widget code from Garmin Connect is a small chunk of HTML code for an iframe. The problem with embedding this code within a WordPress blog post is that the code gets scrubbed or deleted as soon as you toggle from the HTML view back to the Visual view.
If you stay in HTML view and save the post, you’re fine. But if you need to return to the post to edit at any point and admin page opens in Visual view, then your embed snippet is removed.
The solution is Custom Fields. You may have always wondered what the Custom Field component below the main post content field was used for. Well here is a perfect use for it.
More about how I’m using the WordPress blogging platform to run this adventure racing website
In short, entering code into a Custom Field, removes it from the main blog post body that the toolbar editor controls. This allows the embed code to be added separately from formatted content and thereby avoid toolbar editor minipulation.
To assist with the WordPress plumbing and behind the scenes coding, I have used the plugin Get Custom Field Values that allows you to use a widget or template tags to easily retrieve and control the display of any custom field values/meta data for posts or pages.
First, install and activate the plugin. Then follow these steps on:
How to embed a Garmin Connect activity into a WordPress blog post
Step 1: Copy embed code from your Garmin Connect activity page
Step 2: Go to Custom Field admin section
Step 3: Enter Custom Field name, paste Garmin Connect embed widget code and click "Add Custom Field" button
Step 4: In the Get Custom Field Value admin sidebar widget, enter your Custom Field name, select "This Post" check box and click "Send shortcode to editor" button
Step 5: The shortcode to embed your Custom Field will be pasted into your post content - move around within your post as needed
Recap:
Step 1: Copy embed code from your Garmin Connect activity page
Step 2: Go to Custom Field admin section
Step 3: Enter Custom Field name, paste Garmin Connect embed widget code and click “Add Custom Field” button
Step 4: In the Get Custom Field Value admin sidebar widget, enter your Custom Field name, select “This Post” check box and click “Send shortcode to editor” button
Step 5: The shortcode to embed your Custom Field will be pasted into your post content – move around within your post as needed
Following is an embed Garmin Connect activity in WordPress using the Custom Field method.
Hello
I assume this isposisble only with wordpress.org
Do you know if it’s possible to embed iframe on wordpress.com too ?
There is a blog on wordpress.com displaying trainings from garmin connect but i do not understand how they can do it.
Thanks
Regards
Giorgio
Good question. Do you have a link to the wordpress.com blog that has garmin connect activities embeded?
For what it’s worth, you can also just leave the WordPress editor in HTML-view mode and that will keep the iframe code intact as well.
In theory, yes. But if you’ve edited another post in Visual mode and then return to post that contains your iframe code, it will open in Visual mode and delete your iframe.
On another note – now that I’ve been using this method for a while, I’ve extended my use of embeds and code snippets since they’re so easy to work with this way. From YouTube videos and Google Maps to Garmin Connect embeds. With custom fields you never have to toggle from Visual to HTML and sort through code.
I have to acknowledge that I’m a tweaker (as one of clients once blurted out innocently). I don’t think I’ve ever composed a WordPress post, or any other webpage, and simply published without returning to polish and edit. After reading a piece in its final form on the site, I always find a way to improve the way it reads, the way elements layouts, or maybe through adding supporting links and references.
One way around the problem for wordpress.com sites is to do a screenshot from Garmin connect, crop the image to size and add it as a linked image to the activity on Garmin.
Hope this helps.
Hello,
thanks for guide ho to embed garmin activities in wordpress sites. It is very usualy. But I have one major problem. On the page with the activity I have two buttons – Share, and Embed – greyed out, disabled. Do you know why and what should I do? Unable to get the code into your site.
That seems strange. From the Garmin Connect activity detail page the buttons should be available when logged in.
Hi Dominic,
So I’m not sure if you answered the question asked above – are your instructions for WordPress.COM or .ORG? I am using a .COM site, but can’t seem to find the Custom Field admin section you refer to. I’d appreciate it if you could clarify that for me, and if it is the .COM website you were referring to, if you could give more detailed instructions on where to find the Custom Field admin section.
Also, I was wondering if I could get some clarification on the workaround regarding entering the iframe code in HTML-view mode. Will it delete the iframe if I edit ANY post in visual mode from then on, or just that post with the embedded iframe? If I leave the post with the embedded iframe alone forever, will it stay that way?
Thanks in advance for all your help!
Hi, how can I open “Details” in blank page, instead og _parent page?
Thanks
Fausto – unfortunately, no. Because the embed is simply an iframe of a URL and the code isn’t available to tweak, you won’t be able to manipulate the view details link in the garmin connect embed to open in a new window.