<p>You will either want to construct a javascript link in twig with the populated variables, or grab the data from the DOM and call the function dynamically.</p>

<pre><code>{% for block in entry.bildekarusell %}
    {% if block.type == "bilde" %}

        {% for image in block.bilde %}

            {% set url    = entry.url %}
            {% set title  = image.title %}
            {% set descr  = block.bildetekst %}
            {% set image  = image.getUrl('artikkelKarusell') %}
            {% set height = asset.getHeight('artikkelKarusell') %}
            {% set width  = asset.getWidth('artikkelKarusell') %}

            &lt;section&gt;
                &lt;img src="{{ image }}" alt="{{ title }}" width="{{ width }}" height="{{ height }}" /&gt;
                {% if descr %}
                    &lt;div class="carousel_text"&gt;
                        &lt;p&gt;{{ desc }}&lt;/p&gt;

                        {# option 1: construct data link #}
                        &lt;a class="fb-share" data-url="{{ url }}" data-descr="{{ descr }}" data-title="{{ title }}" data-image="{{ image }}" data-winWidth="600px" data-winHeight="400px" &gt;Share on Facebook&lt;/a&gt;

                        {# option 2: call javascript function directly #}
                        &lt;a class="fb-share" href="javascript: fbShare({{ url }}, {{ title }}, {{ descr }}, {{ image }}, '600px', '400px'); " &gt;Share on Facebook&lt;/a&gt;

                    &lt;/div&gt;
                {% endif %}
            &lt;/section&gt;

        {% endfor %}
    {% endif %}    
{% endfor %}
</code></pre>

<p>If you are using the 'data' method (option 1 above), then you would want something like this in your js file:</p>

<pre><code>$('.fb-share').on('click', function(event) {
    event.preventDefault();

    var url         = $(this).attr('data-url'),
        descr       = $(this).attr('data-descr'),
        title       = $(this).attr('data-title'),
        image       = $(this).attr('data-image'),
        winWidth    = $(this).attr('data-winWidth'),
        winHeight   = $(this).attr('data-winHeight');

    fbShare(url, title, descr, image, winWidth, winHeight);

});
</code></pre>

CC BY-SA 3.0
2015-04-28T17:08:43.817Z
You can check Facebook's docs on this here as well: https://developers.facebook.com/docs/sharing/reference/feed-dialog/v2.3
John Morton
CC BY-SA 3.0
2015-04-30T10:03:31.243Z
Hey again, thanks for the answer. Please see my updated answer. I need the image and category title which both are in different for loops. Is this hard to do?
steve1938
CC BY-SA 3.0
2015-04-30T12:25:48.237Z
Variables defined inside a 'for' loop are not available outside of that loop.  However variables defined outside of the loop are available everywhere. So, if you declare it before the loop (i.e. using  `{% set image = "" %}`, you will be able to set it inside the loop, and access it again after the loop. In this way you can grab values from multiple 'for' loops before assembling your final 'fb-share' link.
Douglas McDonald
CC BY-SA 3.0
2015-05-05T10:32:08.710Z
Hey, it's still not working for me. The code doesn't even give me a pop up :( Been working on this for a long time and I just can't share the right content.
steve1938
CC BY-SA 3.0
2015-05-05T16:01:27.120Z
The example is not looking at the facebook sharing code, but just showing how to retrieve and pass data from twig/html to javascript. To debug this, I would suggest starting with a working static button (i.e. write an example manually first and test it), and then make it dynamic using twig. In javascript you can use `alert(variable);` or `console.log(variable);` inside the various functions to make sure the function is getting executed and data is being passed properly.
Douglas McDonald
CC BY-SA 3.0
2015-04-27T16:28:36.270Z
2015-04-27T16:28:36.270Z
Douglas McDonald
<p>I'm trying to figure out how to get the current image and text when it comes to Facebook popup sharing. I'm using the script from this answer:
<a href="https://stackoverflow.com/questions/14829040/facebook-sharer-popup-window/14829742#14829742">https://stackoverflow.com/questions/14829040/facebook-sharer-popup-window/14829742#14829742</a></p>

<p>If I for example want to use the image in the current article shown to share this on Facebook, how would you do it? My images for example looks like this:</p>

<pre><code>    {% for block in entry.bildekarusell %}
        {% if block.type == "bilde" %}
            {% for image in block.bilde %}
                &lt;section&gt;
                &lt;img src="{{ image.getUrl('artikkelKarusell') }}" 
                     alt="{{ image.title }}" 
                     width="{{ asset.getWidth('artikkelKarusell') }}" 
                          height="{{ asset.getHeight('artikkelKarusell') }}"&gt;
                    {% if block.bildetekst|length &gt;= 1 %}
                    &lt;div class="carousel_text"&gt;
                        &lt;p&gt;{{ block.bildetekst }}&lt;/p&gt;
                    &lt;/div&gt;
                    {% endif %} 
                &lt;/section&gt;
            {% endfor %}
        {% endif %}    
    {% endfor %}
</code></pre>

<p>How to I get this image when sharing on Facebook?</p>

<p>Script:</p>

<pre><code>function fbShare(url, title, descr, image, winWidth, winHeight) {
        var winTop = (screen.height / 2) - (winHeight / 2);
        var winLeft = (screen.width / 2) - (winWidth / 2);
        window.open('http://www.facebook.com/sharer.php?s=100&amp;p[title]=' + title + '&amp;p[summary]=' + descr + '&amp;p[url]=' + url + '&amp;p[images][0]=' + image, 'sharer', 'top=' + winTop + ',left=' + winLeft + ',toolbar=0,status=0,width=' + winWidth + ',height=' + winHeight);
    }
</code></pre>

<p>Updated text:</p>

<pre><code>{% extends "_layout" %}
{% set title = entry.title %}
{% set description = entry.title %}

{% block content %}
&lt;div class="inner"&gt;
    &lt;div id="category"&gt;
    {% for category in entry.kategorier %}
        &lt;a href="{{ category.url }}"&gt;{{ category.title }}&lt;/a&gt;
    {% endfor %} 
    &lt;/div&gt;
    &lt;h1&gt;{{ entry.title }}&lt;/h1&gt;
    &lt;div id="authorAndTime"&gt;
        &lt;span class="author"&gt;Tekst {{ entry.forfatter }} &amp;bull;&lt;/span&gt;
        &lt;span class="time"&gt;{{ entry.postDate|date('j. F Y') }}&lt;/span&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;!-- End show category, title, author and time --&gt;
&lt;!-- Start carousel --&gt;
&lt;div id="carousel"&gt;
    &lt;div class="articleslideshow"&gt;
    {% for block in entry.bildekarusell %}
        {% if block.type == "bilde" %}
            {% for image in block.bilde %}
                &lt;section&gt;
                &lt;img src="{{ image.getUrl('artikkelKarusell') }}" 
                     alt="{{ image.title }}" 
                     width="{{ asset.getWidth('artikkelKarusell') }}" 
                          height="{{ asset.getHeight('artikkelKarusell') }}"&gt;
                    {% if block.bildetekst|length &gt;= 1 %}
                    &lt;div class="carousel_text"&gt;
                        &lt;p&gt;{{ block.bildetekst }}&lt;/p&gt;
                    &lt;/div&gt;
                    {% endif %} 
                &lt;/section&gt;
            {% endfor %}
        {% endif %}    
    {% endfor %}
    &lt;/div&gt;
&lt;/div&gt;
&lt;!-- End carousel --&gt;
&lt;!-- Start ingress --&gt;
&lt;div id="ingress"&gt;
    &lt;p&gt;{{ entry.ingress }}&lt;/p&gt;
&lt;/div&gt;
&lt;!-- End ingress --&gt;
&lt;!-- Start tags: Do not show if empty--&gt;
{% if entry.tags|length &gt;= 1 %}
&lt;ul class="tags"&gt;
    &lt;li class="title"&gt;tags:&lt;/li&gt;
    {% for category in entry.tags %}
        &lt;li&gt;&lt;a href="{{ category.url }}"&gt;{{ category.title }}&lt;/a&gt;&lt;/li&gt;
    {% endfor %}        
&lt;/ul&gt;
{% endif %}
&lt;!--End tags--&gt;
&lt;!--Start share this article--&gt;
&lt;div class="sharearticle"&gt;
    &lt;h2&gt;Del denne artikkelen:&lt;/h2&gt;
    &lt;button class="facebookbtn"&gt;
        &lt;!-- share category title and image --&gt;
    &lt;/button&gt;
    &lt;button class="twitterbtn"&gt;Twitter&lt;/button&gt;
    &lt;button class="pinterestbtn"&gt;Pinterest&lt;/button&gt;
&lt;/div&gt;
&lt;!-- End share --&gt;
&lt;!-- Show article content --&gt;
{% for block in entry.innhold %}
    {% if block.type == "tekstblokk" %}
        &lt;article class="textblock"&gt;
            {{ block.tekst }}
        &lt;/article&gt;
    {% elseif block.type == "uthevetblokk" %}
            &lt;div class="highlighted"&gt;
                &lt;h2&gt;{{ block.tittel }}&lt;/h2&gt;
                &lt;blockquote&gt;{{ block.sitat }}&lt;/blockquote&gt;
            &lt;/div&gt;
    {% elseif block.type == "produktblokk" %}
        &lt;div id="products" class="productlist"&gt;
        {% for image in block.bilde1 %}
        &lt;div class="product"&gt;
            &lt;img src="{{ image.getUrl('produktblokkbilde') }}" alt="{{ image.title }}"&gt;
            &lt;p&gt;{{ block.tekstTilBilde1 }}&lt;/p&gt;
        &lt;/div&gt;
        {% endfor %}
        {% for image in block.bilde2 %}
        &lt;div class="product"&gt;
            &lt;img src="{{ image.getUrl('produktblokkbilde') }}" alt="{{ image.title }}"&gt;
            &lt;p&gt;{{ block.tekstTilBilde2 }}&lt;/p&gt;
        &lt;/div&gt;
        {% endfor %}
        {% for image in block.bilde3 %}
        &lt;div class="product"&gt;
            &lt;img src="{{ image.getUrl('produktblokkbilde') }}" alt="{{ image.title }}"&gt;
            &lt;p&gt;{{ block.tekstTilBilde3 }}&lt;/p&gt;
        &lt;/div&gt;
        &lt;/div&gt;    
        {% endfor %}
{% endfor %}
&lt;!-- End article content --&gt;
</code></pre>

<p>
    {% endblock %}</p>

<matrix>
Social media sharing
# Social media sharing

(Asked by: username_0 on 2015-04-27)

I'm trying to figure out how to get the current image and text when it comes to Facebook popup sharing. I'm using the script from this answer:
https://stackoverflow.com/questions/14829040/facebook-sharer-popup-window/14829742#14829742
If I for example want to use the image in the current article shown to share this on Facebook, how would you do it? My images for example looks like this:
    {% for block in entry.bildekarusell %}
        {% if block.type == "bilde" %}
            {% for image in block.bilde %}
                
                
                    {% if block.bildetekst|length >= 1 %}
                    
                        {{ block.bildetekst }}
                    
                    {% endif %} 
                
            {% endfor %}
        {% endif %}    
    {% endfor %}

How to I get this image when sharing on Facebook?
Script:
function fbShare(url, title, descr, image, winWidth, winHeight) {
        var winTop = (screen.height / 2) - (winHeight / 2);
        var winLeft = (screen.width / 2) - (winWidth / 2);
        window.open('http://www.facebook.com/sharer.php?s=100&p[title]=' + title + '&p[summary]=' + descr + '&p[url]=' + url + '&p[images][0]=' + image, 'sharer', 'top=' + winTop + ',left=' + winLeft + ',toolbar=0,status=0,width=' + winWidth + ',height=' + winHeight);
    }

Updated text:
{% extends "_layout" %}
{% set title = entry.title %}
{% set description = entry.title %}

{% block content %}

    
    {% for category in entry.kategorier %}
        {{ category.title }}
    {% endfor %} 
    
    {{ entry.title }}
    
        Tekst {{ entry.forfatter }} •
        {{ entry.postDate|date('j. F Y') }}
    




    
    {% for block in entry.bildekarusell %}
        {% if block.type == "bilde" %}
            {% for image in block.bilde %}
                
                
                    {% if block.bildetekst|length >= 1 %}
                    
                        {{ block.bildetekst }}
                    
                    {% endif %} 
                
            {% endfor %}
        {% endif %}    
    {% endfor %}
    




    {{ entry.ingress }}



{% if entry.tags|length >= 1 %}

    tags:
    {% for category in entry.tags %}
        {{ category.title }}
    {% endfor %}        

{% endif %}



    Del denne artikkelen:
    
        
    
    Twitter
    Pinterest



{% for block in entry.innhold %}
    {% if block.type == "tekstblokk" %}
        
            {{ block.tekst }}
        
    {% elseif block.type == "uthevetblokk" %}
            
                {{ block.tittel }}
                {{ block.sitat }}
            
    {% elseif block.type == "produktblokk" %}
        
        {% for image in block.bilde1 %}
        
            
            {{ block.tekstTilBilde1 }}
        
        {% endfor %}
        {% for image in block.bilde2 %}
        
            
            {{ block.tekstTilBilde2 }}
        
        {% endfor %}
        {% for image in block.bilde3 %}
        
            
            {{ block.tekstTilBilde3 }}
        
            
        {% endfor %}
{% endfor %}



    {% endblock %}

**Tags:** matrix

---

## 1 answers

### Answer by username_1 on 2015-04-27. Score: 2 | Accepted answer

You will either want to construct a javascript link in twig with the populated variables, or grab the data from the DOM and call the function dynamically.
{% for block in entry.bildekarusell %}
    {% if block.type == "bilde" %}

        {% for image in block.bilde %}

            {% set url    = entry.url %}
            {% set title  = image.title %}
            {% set descr  = block.bildetekst %}
            {% set image  = image.getUrl('artikkelKarusell') %}
            {% set height = asset.getHeight('artikkelKarusell') %}
            {% set width  = asset.getWidth('artikkelKarusell') %}

            
                
                {% if descr %}
                    
                        {{ desc }}

                        {# option 1: construct data link #}
                        Share on Facebook

                        {# option 2: call javascript function directly #}
                        Share on Facebook

                    
                {% endif %}
            

        {% endfor %}
    {% endif %}    
{% endfor %}

If you are using the 'data' method (option 1 above), then you would want something like this in your js file:
$('.fb-share').on('click', function(event) {
    event.preventDefault();

    var url         = $(this).attr('data-url'),
        descr       = $(this).attr('data-descr'),
        title       = $(this).attr('data-title'),
        image       = $(this).attr('data-image'),
        winWidth    = $(this).attr('data-winWidth'),
        winHeight   = $(this).attr('data-winHeight');

    fbShare(url, title, descr, image, winWidth, winHeight);

});

> **Comments:**
> **username_2**: You can check Facebook's docs on this here as well: https://developers.facebook.com/docs/sharing/reference/feed-dialog/v2.3  
> **username_0**: Hey again, thanks for the answer. Please see my updated answer. I need the image and category title which both are in different for loops. Is this hard to do?  
> **username_1**: Variables defined inside a 'for' loop are not available outside of that loop.  However variables defined outside of the loop are available everywhere. So, if you declare it before the loop (i.e. using  `{% set image = "" %}`, you will be able to set it inside the loop, and access it again after the loop. In this way you can grab values from multiple 'for' loops before assembling your final 'fb-share' link.  
> **username_0**: Hey, it's still not working for me. The code doesn't even give me a pop up :( Been working on this for a long time and I just can't share the right content.  
> **username_1**: The example is not looking at the facebook sharing code, but just showing how to retrieve and pass data from twig/html to javascript. To debug this, I would suggest starting with a working static button (i.e. write an example manually first and test it), and then make it dynamic using twig. In javascript you can use `alert(variable);` or `console.log(variable);` inside the various functions to make sure the function is getting executed and data is being passed properly.  

---

