Social media and map embedding
General information
With this functionality, web authors can embed plug-ins of social networks and map services into the website in a privacy-compliant manner by using the provided embedding source code of the providers. A specially created 2-click solution is used here. This means that the first time the website is visited with a plugin embedded in this way, confirmation (pop-up) must first be given that data may be transmitted to third parties in order for the content to be displayed. Otherwise, the content cannot be seen. This decision can be stored in a cookie for 7 days, after which renewed permission is necessary.
Advantage: When visiting our websites, no data of our web visitors is transmitted to the services. Only when the user clicks, the contents of the plugin are displayed and data is transmitted to the providers of the social services.
The following services and their specified plugins are supported:
- Facebook (post, comment, video)
- Google Maps (map)
- Instagram (photo)
- OpenStreetMap (map, API)
- Twitter (tweet, timeline)
- YouTube (video)
To use the functions, the php/ext.inc file must be loaded at the top of the page:
...
# Use of functions for embedding external content
require_once('php/ext.inc');
seite(__FILE__);For your attention:
- Browser must support JavaScript, otherwise these functions will not take effect.
- Website must embed jQuery (is the case by default).
Predefined functions
Embedding external content
string ext_embed(string $code [, array($options)])
The services specified above provide source code for embedding the plug-ins. This provided source code of the providers is used for this functionality and is symbolised by $code in the following.
Parameters
$code |
required |
|
| $options | optional |
|
Return value
HTML text – can be output with echo.
Calling pop-up with external content
string ext_hs_url(string $link_text, string $url, string $title, [, array $style])
Calls the hs_url() function,
adds the confirmation dialogue for the external provider. Allowed are the iframe target details of the named providers.
Parameters
Same as hs_url; however, $url
must be assignable to a provider named in the privacy policy.
Return value
HTML text – can be output with echo.
Example for Instagram
<?php
...
require_once('php/ext.inc');
seite(__FILE__);
?>
...
<?php
echo ext_embed('<blockquote class="instagram-media" ...>...</blockquote><script ...></script>');
?>Result
Embedding of external provider's content
The display of embedded external content of the platform Instagram on the website of Chemnitz University of Technology and therefore the connection to the external server of the platform provider requires your consent before. First when you have given your consent for this provider (personal) data will be transmitted to the external server operator so that the content display can take place. The operator may be located in a non-European country.
With submitting the button you agree formally and voluntarily that you personal data as described in the Data Protection Policy with its there specified purposes will be processed for embedding of external content on the website of Chemnitz University of Technology. Your consent can be revoked separately or as a whole at any time without undue disadvantages for the future.
Example for Instagram
<?php
...
require_once('php/ext.inc');
seite(__FILE__);
?>
...
<?php
echo ext_embed(
'<blockquote class="instagram-media" ...>...</blockquote><script ...></script>',
array('button' => 'View Instagram Photo')
);
?>Result
Embedding of external provider's content
The display of embedded external content of the platform Instagram on the website of Chemnitz University of Technology and therefore the connection to the external server of the platform provider requires your consent before. First when you have given your consent for this provider (personal) data will be transmitted to the external server operator so that the content display can take place. The operator may be located in a non-European country.
With submitting the button you agree formally and voluntarily that you personal data as described in the Data Protection Policy with its there specified purposes will be processed for embedding of external content on the website of Chemnitz University of Technology. Your consent can be revoked separately or as a whole at any time without undue disadvantages for the future.
Example for Instagram
<?php
...
require_once('php/ext.inc');
seite(__FILE__);
?>
...
<?php
echo ext_embed(
'<blockquote class="instagram-media" ...>...</blockquote><script ...></script>',
array('button' => '<img src="..." alt="...">')
);
?>Result
Embedding of external provider's content
The display of embedded external content of the platform Instagram on the website of Chemnitz University of Technology and therefore the connection to the external server of the platform provider requires your consent before. First when you have given your consent for this provider (personal) data will be transmitted to the external server operator so that the content display can take place. The operator may be located in a non-European country.
With submitting the button you agree formally and voluntarily that you personal data as described in the Data Protection Policy with its there specified purposes will be processed for embedding of external content on the website of Chemnitz University of Technology. Your consent can be revoked separately or as a whole at any time without undue disadvantages for the future.
Use of Cascading Style Sheets (CSS)
In the event that the integrated plug-in does not integrate properly into the website, the position as well as the size can be adjusted with the help of Cascading Style Sheets (CSS). For this purpose, the function provides the option of providing the button or the clickable object with a self-defined CSS class and thus adapting it to the wishes.
The following rules apply to the names of the self-created CSS classes:
- The names may only contain small letters (a-z), hyphens (-) and underscores (_).
- There must be a small letter at the beginning and end of the name.
- The minimum length of the name is two, thus consists only of small letters.
Notes:
It may happen that the source code to be embedded has to be slightly modified in order to adapt the plugin to the website. This is because very often the plugin is given a fixed size (height, width), which may need to be adjusted or removed. Changing it to a percentage value may also be possible. But if the plugin must have a minimum size, then the placeholder should correspond to these sizes. In most cases, the width is more important than the height. More detailed information on this can be found in the documentation from the provider.
Examples
Content of the CSS file (own_css_file.css)
– applies to all examples
.button-width-instagram { width: 325px; }
.own-instagram-class-a { margin-right: 10px; width: 325px; float: left; }
.own-instagram-class-b { margin-left: 10px; width: 325px; float: right; }
.own-twitter-timeline-class-a { height: 200px; } // scroll bar!Explanation of Instagram CSS classes:
The image is always stretched to a width of 325px (width: 325px) in these cases,
by the CSS class button-width-instagram. This is because there must be enough space for the Instagram photo. As can be seen in the Instagram source code to be embedded, a minimum width of 326px
(min-width: 326px) is assumed there. Therefore, a fixed width (width: 325px)
is always specified for the other CSS classes (own-instagram-class-?) as well.
Explanation of the Twitter Timeline CSS class:
If the entries in the Twitter Timeline are not limited, this list would become very long.
In this example, the height of the Twitter Timeline (own-twitter-timeline-class-a)
is limited to 200px (height: 200px).
Content of the page header
<?php
...
$css_in = '@import url(own_css_file.css)'; // contains several CSS classes
require_once('php/ext.inc');
seite(__FILE__);
?>
...Instagram example
...
<?php
echo ext_embed(
'<blockquote class="instagram-media" ...>...</blockquote><script ...></script>',
array(
'button' => '<img class="button-width-instagram" src="instagram_privacy.gif" alt="...">',
'css_class' => 'own-instagram-class-a',
)
);
?>
Lorem ipsum dolor sit amet, ...Result
Embedding of external provider's content
The display of embedded external content of the platform Instagram on the website of Chemnitz University of Technology and therefore the connection to the external server of the platform provider requires your consent before. First when you have given your consent for this provider (personal) data will be transmitted to the external server operator so that the content display can take place. The operator may be located in a non-European country.
With submitting the button you agree formally and voluntarily that you personal data as described in the Data Protection Policy with its there specified purposes will be processed for embedding of external content on the website of Chemnitz University of Technology. Your consent can be revoked separately or as a whole at any time without undue disadvantages for the future.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Twitter Timeline example
...
<div class="row">
<div class="col-sm-8" style="text-align:justify">
Lorem ipsum dolor sit amet, ...
</div>
<div class="col-sm-4">
<?php
echo ext_embed('<a class="twitter-timeline" ...>...</a> <script ...></script>',
array('css_class' => 'own-twitter-timeline-class-a')
);
?>
</div>
</div>
...Result
Embedding of external provider's content
The display of embedded external content of the platform Twitter on the website of Chemnitz University of Technology and therefore the connection to the external server of the platform provider requires your consent before. First when you have given your consent for this provider (personal) data will be transmitted to the external server operator so that the content display can take place. The operator may be located in a non-European country.
With submitting the button you agree formally and voluntarily that you personal data as described in the Data Protection Policy with its there specified purposes will be processed for embedding of external content on the website of Chemnitz University of Technology. Your consent can be revoked separately or as a whole at any time without undue disadvantages for the future.
Example for OpenStreetMap
<?php
...
require_once('php/ext.inc');
seite(__FILE__);
?>
...
<?php
echo ext_hs_url('Map view', 'https://www.openstreetmap.org/export/embed.html?...');
?>On www.openstreetmap.org you will find the share function on the right.
The HTML code is intended for embedding via
ext_embed(). From the HTML code the iframe-src address can be used for
ext_hs_url().
Result
Embedding of external provider's content
The display of embedded external content of the platform OpenStreetMap on the website of Chemnitz University of Technology and therefore the connection to the external server of the platform provider requires your consent before. First when you have given your consent for this provider (personal) data will be transmitted to the external server operator so that the content display can take place. The operator may be located in a non-European country.
With submitting the button you agree formally and voluntarily that you personal data as described in the Data Protection Policy with its there specified purposes will be processed for embedding of external content on the website of Chemnitz University of Technology. Your consent can be revoked separately or as a whole at any time without undue disadvantages for the future.