# Daily Tips - Share Dash to Social Media 🌈

**URL:** <https://community.plotly.com/t/daily-tips-share-dash-to-social-media/63076>\
**Category:** Dash Python\
**Tags:** tips-and-tricks\
**Created:** [April 15, 2022, 3:31pm UTC](https://community.plotly.com/t/daily-tips-share-dash-to-social-media/63076 "2022-04-15T15:31:19Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![stu](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/stu/32/18439_2.png) [@stu](https://community.plotly.com/u/stu)\
**Post date:** [April 15, 2022, 3:31pm UTC](https://community.plotly.com/t/daily-tips-share-dash-to-social-media/63076/1 "2022-04-15T15:31:19Z")

</div>

Hi there,

I’ve found out that there is a feature Dash has supported since version 0.22.0. But there is no follow-up to the related [posts](https://community.plotly.com/t/adding-meta-tag-for-facebook-sharing/7612) in the forum.

> <https://github.com/plotly/dash/pull/286>
>
> \## Assets includes & index customization
> 
> Solution for #265 Proposal for Offli…ne CSS and JS and Customizable \`index.html\`
> 
> \#### Assets include
> 
> Dash will now look for a folder named \`assets\` on the current work directory, if one is found, it will walk that directory and include js and css files on the index.
> 
> Related configs:
> 
> \`\`\`python
> import dash
> 
> app = dash.Dash()
> 
> \# default values
> app.config.assets\_folder = 'assets' # The path to the assets folder.
> app.config.include\_asset\_files = True # Include the files in the asset folder
> app.config.assets\_external\_path = '' # The external prefix if serve\_locally == False
> app.config.assets\_url\_path = '/assets' # the local url prefix ie \`/assets/\*.js\`
> \`\`\`
> 
> Supported files:
> 
> \- \`.js\`, javascript files will be included after the components libs and before the dash-render.
> \- \`.css\`, stylesheets will be included as a \`\<link\>\` in the head.
> \- \`favicon.ico\`, include as a \`\<link\>\` in the head.
> 
> The files are included in alphabetic order.
> The directories can be nested.
> 
> Advanced use:
> 
> To host your assets content externally:
> 
> \- set \`app.scripts.config.serve\_locally = False\`
> \- \`app.config.assets\_external\` to your base host url, ie \`http://bucket.s3.amazonaws.com/\`
> \- \`app.config.include\_asset\_files\` must still be set to \`True\` for the files to be indexed by dash.
> \- Duplicate the file structure in your assets folder to your file hoster and the files will be loaded from there instead. 
> 
> \#### Index customization
> 
> \##### Meta tags
> 
> It is now possible to add meta tags to the index of dash.
> 
> Example:
> \`\`\`python
> import dash
> 
> metas = \[
> {'name': 'description', 'content': 'My description'}
> \]
> 
> app = dash.Dash(meta\_tags=metas)
> 
> \# alternatively
> app.add\_meta\_tag({'http-equiv': 'X-UA-Compatible', 'content': 'IE=edge'})
> \`\`\`
> 
> \##### Customizing the index
> 
> Add an \`index\_string\` to change the default index dash use.
> 
> \`\`\`python
> import dash
> 
> app = dash.Dash()
> app.index\_string = '''
> \<!DOCTYPE html\>
> \<html\>
> \<head\>
> {%metas%}
> \<title\>{%title%}\</title\>
> {%favicon%}
> {%css%}
> \</head\>
> \<body\>
> \<div\>My Custom header\</div\>
> {%app\_entry%}
> \<footer\>
> {%config%}
> {%scripts%}
> \</footer\>
> \<div\>My Custom footer\</div\>
> \</body\>
> \</html\>
> '''
> \`\`\`
> 
> The \`{%key%}\`s will be formatted like in the default index.
> 
> Available keys:
> \`\`\`
> {%metas%} # optional - The registered meta tags.
> {%favicon%} # optional - A favicon link tag if found in \`assets\`.
> {%css%} # optional - link tags to css resources.
> {%config%} # required - Config generated by dash for the renderer.
> {%app\_entry%} # required - The container where dash react components are rendered.
> {%scripts%} # required - Collected dependencies scripts tags.
> \`\`\`
> 
> Also added \`interpolate\_index\` method on Dash, override it to get the context values of the index before rendering.
> 
> \`\`\`python
> import dash
> 
> class CustomDash(dash.Dash):
> def interpolate\_index(self,
> metas, title, css, config,
> scripts, app\_entry, favicon):
> return '''
> \<!DOCTYPE html\>
> \<html\>
> \<head\>
> \<title\>My App\</title\>
> \</head\>
> \<body\>
>                 
> \<div id="custom-header"\>My custom header\</div\>
> {}
> {}
> \<div id="custom-footer"\>My custom footer\</div\>
> \</body\>
> \</html\>
> '''.format(app\_entry, scripts)
> \`\`\`
> 
> I added tests for the meta keys and index customization. For the assets, I made a test in an external project to test if the files are included in that project, @plotly/dash I need help to integrate that test to run with the other tests.

We can add meta tags like this.

```auto
app = dash.Dash(meta_tags=[
    {'name': 'description', 'content': 'My description'},
    {'http-equiv': 'X-UA-Compatible', 'content': 'IE=edge'}
])

```

So I went [here](https://www.opengraph.xyz/) and the website helped me generate a set of meta tags.

```auto
meta_tags = [
    dict(
        name="description",
        content=
        "This is a 2022 replica of dash-svm. I used dash's recent new components and new features, and I've added new page elements."
    ),
    ...

```

```auto
app = Dash( __name__ ,
           title='Support Vector Machine Explorer',
           meta_tags=meta_tags)

```

Then the forum can help me automatically generate a preview.

 ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/d/6/d621cb55ed0397ec03c982c4f9905ea388540d1f.png)

[https://dash-svm-2022.herokuapp.com](https://dash-svm-2022.herokuapp.com)

You can also check the OP [here](https://opengraphcheck.com/).

 ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/4/f/4fc6501b9d339dbdede0cd90dd1e084bb16d6625.png)

This is one of two protocols currently supported by the forum, the Open Graph protocol.

The other is oEmbed, which requires a link tag in the header. Also, need an API to return JSON or XML. Those who are interested can try it out.

  
  

Hope this helps you. XD

#### Keywords: Meta Tags, Facebook, Twitter, Open Graph, oEmbed, Social Platform