Many groups and organizations that work together and network via WECHANGE also have their own website. It is a good idea to automatically transfer selected content from your WECHANGE group or project to your website. The good news: This is possible, and in fact it is quite easy. In this series of articles, we will explain how you can transfer your events, news, (sub)projects or the map to your website. You can see what all this can look like together live on the website of Living Lüneburg look at.
In this first part we start with embedding the map. You can choose a desired section of the general WECHANGE card as well as the individual membership card your group or project. This is not a screenshot, but a fully functional map that visitors to your website can use just as if they were on WECHANGE. You don't even need a plugin for this, just some HTML code, which you can easily create with the help of this article. This guide therefore also applies, but not just for WordPress. You can also embed WECHANGE maps in websites that run on other page builders or content management systems.
This is what a pre-filtered section of the WECHANGE map can look like.
Interested in tips and exchange with other WECHANGE-affine website designers? Then join our public Rocket Chat channel #wechange-meets-wordpress at!
short version
You don't have much time? Then do the following:
- Choose on the WECHANGE card Select the desired section by zooming, moving, filtering and searching.
- Change the URL manually by adding
https://wechange.de/map/
the wordembed/
The new URL now begins withhttps://wechange.de/map/embed/?...
When you load the page, the map should be displayed as you wish, but the WECHANGE menu bar is gone. - Copy the URL and paste it into the following HTML segment:
- Copy the customized HTML segment and paste it into your website at the desired location. Depending on your editing mode, you may need to switch from visual to text view or insert an HTML block and paste the segment here so that the code is not displayed as text.
- Save or preview the page. The map should now be embedded as you wish. Congratulations!
- If it didn't work or you want to make further adjustments, read the step-by-step instructions.
Background: iFrame – The trick of the whole thing
Before we look at the individual steps, we want to explain briefly how embedding the map actually works. A so-called inline frame is used, or iFrameThis allows external web content to be displayed on your website within a frame. This allows you to embed not only the WECHANGE map, but also other web content, e.g. the map of tomorrowExternal videos are also usually integrated in this way.
step-by-step instructions
To embed the map, you need the correct iFrame segment, which you can customize and add to your page as HTML. This is what it can look like:
<iframe src="https://wechange.de/map/embed/?limit=100&q=&people=false&events=false&projects=true&groups=true&ideas=true&topics=1479&ne_lat=53.26193&ne_lon=10.43289&sw_lat=53.23276&sw_lon=10.37796" width="100%" height="400"
title="WECHANGE map with groups and projects in Lüneburg"
>
Don't worry, it looks more complicated than it is. Let's look at each attribute in detail, one by one.
Opening & closing tag –
These expressions tell the website that you are starting an iFrame segment () or closes (
). Instead of the three dots, you insert the attributes with which you specify which web content you want to embed and how. You must adjust these attributes as described below, opening & closing day remain unchanged.
What exactly would you like? – src="..."
The source attribute is the most important. It is a link, or rather a customized URL. This is where you specify exactly which web content you want to embed. For the WECHANGE card, this means that you specify the desired section, the type and number of entries, and optionally a search term. This requires several URL parameters, which are located at the end of the URL and are each separated by a &
are separated from each other.
If we use the URL https://wechange.de/map/embed/?limit=100&q=&people=false&events=true&projects=true&groups=true&ideas=true&topics=1%2C4%2C7%2C9&ne_lat=53.26193&ne_lon=10.43289&sw_lat=53.23276&sw_lon=10.37796
If you separate them, you get:
https://wechange.de/map/embed/? | This part is always the same. |
limit=100 | Optional: The maximum number of markers displayed (default is 20). No & stand. |
&q= | Optional: The search term. |
&people=true | Whether people should be displayed (only publicly visible WECHANGE users with location information in their profile). The alternative to true is false . |
&events=true | Whether events should be displayed (only publicly visible events with location information). |
&projects=true | Whether projects should be displayed (all with location). |
&groups=true | Whether groups should be displayed (all with location). |
&ideas=true | Whether ideas should be displayed (all with location). |
&topics=1479 | Optional: Which topics are filtered (is generated automatically, see below; the numbers are the IDs of the topics and stands for a comma). |
&ne_lat=53.26193 &ne_lon=10.43289 &sw_lat=53.23276 &sw_lon=10.37796 | Coordinates (don't worry, these are generated automatically, see below). |
If you put all the snippets together, you get the URL you need for the iFrame (the order doesn’t matter, as long as https://wechange.de/map/embed/?
at the very front and then the first URL parameter without &
before it follows – otherwise already a &
between all URL parameters)
How do you get the correct coordinates for your URL? First of all, open the WECHANGE card. Zoom and move it so that the section you want is displayed. The URL in the browser does not appear to change at first glance. However, if you look closely, you will see that the coordinates at the very end of the URL change when you change the position or zoom level. Once you have the right section, you can use the search or filter function to display or hide entries of certain types (e.g. projects, ideas...) or topics (e.g. climate protection, education...). When you apply the filters, this will also adjust your URL.
Now you only have to adjust the URL slightly by hand. It starts with https://wechange.de/map/?
– Add before the question mark embed/
so that the new URL begins like this: https://wechange.de/map/embed/?
(followed by the URL parameters).
When you load the new URL, you will notice that the map is now displayed differently in your browser. The section and filter are still set as desired, but the CHANGE menu bar has disappeared. Congratulations, you have the URL for your map iFrame!
In this full-screen view of the map, you can still zoom, pan and filter. However, this will not change the URL. This therefore has no effect on the embedding of the map as an iFrame. You can now manually enter the URL parameter &limit
if you want more or fewer than a maximum of 20 markers to be displayed at once (see table above).
Adjust size – width="..."
& height="..."
With these attributes you set the width (width
) and height (height
) of the frame in which the map is displayed. Values in pixels or percent are allowed. For pixel values, the unit can be px
be omitted (height="650"
and height="650px"
both are possible).
To ensure that the map does not protrude over the edge on smartphones and is still large enough to be recognized, we recommend width="100%"
If this is too big on the desktop, you can place the map within a narrower column. For the height, values from 400 px seem reasonable (height="400"
).
More accessibility – title="..."
To ensure that visitors to your website who use a screen reader or similar know what the iFrame contains, you should provide a title. This should not be excessively long, of course, but should describe the content precisely, e.g. title="WECHANGE map with groups and projects in Lüneburg"
.
Additional attributes
In addition to the above attributes (src
, height
, width
and title
) you can add additional attributes to your iFrame tag. Here you can find a Overview of all allowed attributes. With style="..."
You can also specify whether the iFrame should have a frame, for example, but the CSS rules inserted here have no influence on the content of the iFrames.
Insert into the website
Once you have your finished iFrame segment, you can insert it into your website. Copy the HTML code and paste it into your website at the desired location. Depending on your editing mode, you may need to switch from visual to text view or create an HTML block and insert the segment here so it is not mistaken for a paragraph.
Save or preview the page. The map should now be embedded as you wish. Congratulations!
membership card
As promised at the beginning, you can not only embed a section of the general WECHANGE map, but also the individual member map of your group or project. You can also display the map on WECHANGE itself (although you will not receive the URL for embedding this way). You can find it by switching to "Members" via the group or project menu. By default, those members are displayed who have a location specified. For groups, assigned sub-projects are also displayed.
Embedding the member card works in the same way and with the same attributes and URL parameters as the general card. The only difference is that there is an additional URL parameter for the src
attribute, namely &filter_group
. The URL parameter is also called this if you are dealing with a WECHANGE project and not a group. Here you enter the ID of your group or project. This is usually a four-digit number.
Membership card using the example of the group “WECHANGE beta test community“ (Sub-projects and events could also be displayed here)
The only question that remains is: How do I find out the ID? It's very simple. Navigate on WECHANGE to the relevant group or project dashboard or to the relevant microsite. Now right-click anywhere on the page and select "View Page Source". The shortcut for this is Ctrl
+ U
in Windows and option
+ Command
+ U
on Mac.
Don't be alarmed! The HTML source code that you see now is not of any interest to you. You are only looking for one thing, and that is the data-id
. Open the search function of your browser (on Windows via Ctrl
+ F
) and search for data-id
There should be exactly one hit. Remember the number behind it (or copy it). In the iFrame segment, add the src
link simply by the URL parameter &filter_group=????
(the question marks of course by your data-id
replace). And you're done! With the additional URL parameters (see table above) you can now select what, who and how much should be displayed. You will not get the appropriate coordinates by moving the map in the member directory of your group or project, but via the general map.
So, that's really it. We at WECHANGE wish you lots of fun and success trying it out. The next article will appear here shortly, in which we will tell you how to transfer the events of your group or project to your website. Until then, we send you our solidarity and climate-conscious greetings!