Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/max-arnold/markdown-tweetable

Python-Markdown extension to embed tweetable quotes into your blog posts
https://github.com/max-arnold/markdown-tweetable

extension python-markdown social-buttons tweetable-quotes

Last synced: 2 months ago
JSON representation

Python-Markdown extension to embed tweetable quotes into your blog posts

Awesome Lists containing this project

README 

        
# Tweetable quotes for Python-Markdown



Why this extension? A lot of blog posts have social sharing buttons at the top or bottom of a page. But there is a recent trend to embed shareable quotes right into the post body, which noticeably increases content sharing. Some sites even allow you to select any part of text and share it (see [medium.com](https://medium.com/life-learning/7-reasons-why-you-will-never-do-anything-amazing-with-your-life-2a1841f1335d) for example). The basic idea is that people prefer to quote a story rather than its headline. And you can have multiple shareable quotes in a single story!



With this extension you will be able to turn the text below:



    [tweetable url="http://www.brainyquote.com/quotes/authors/v/vladimir_lenin.html"]

    When there is state there can be no freedom,

    but when there is freedom there will be no state.

    -- Vladimir Lenin

    [/tweetable]



into the following nice styled quote:



![Screenshot of the quote](/screenshot.png)



## Installation



    pip install markdown-tweetable



or:



    pip install git+git://github.com/max-arnold/markdown-tweetable.git



## Usage



Full syntax:



    [tweetable alt="When there is state there can be no freedom,

                    but when there is freedom there will be no state"

               url="http://en.wikipedia.org/wiki/Vladimir_Lenin"

               hashtags="#lenin"]

    When there is state there can be no freedom, but when there is freedom there will be no state.

    -- Vladimir Lenin

    [/tweetable]



And you definitely want to add some style. Below is an example:



    blockquote.tweetable {

        border-top: 1px solid #CCC;

        border-bottom: 1px solid #CCC;

        border-left: none;

        border-right: none;

        position: relative;

    }



    blockquote.tweetable::before {

        content: '“';

        position: absolute;

        top: 0;

        left: 0;

        font-size: 4em;

        font-family: "inherit";

        font-weight: bold;

        color: #888;

    }



    blockquote.tweetable p {

        margin: 0 0 0.5em 1.5em;

        font-style: italic;

    }



    .tweetable-svg-icon {

        /* fill: #db3535; */

        width: 1em;

    }



## List of configuration parameters



### Social buttons



List of social networks for sharing. By default contains all supported networks:



    networks=('twitter', 'facebook', 'linkedin', 'vkontakte',)



You can also specify it as a string (useful if you configured this markdown extension using module path with parameters):



    networks='twitter;facebook;linkedin;vkontakte'



### HTML snippet



By default it looks like this:



    snippet='''


        
{quote}


        
{buttons}


    
'''



### Social button snippets



    snippet_facebook='''

        {icon_facebook}'''



    snippet_linkedin='''

        {icon_linkedin}'''



    snippet_twitter='''

        {icon_twitter}'''



    snippet_vkontakte='''

        {icon_vkontakte}'''



### Social icons



    icon_facebook='''

        

        

        

        '''



    icon_linkedin='''

        ...

    '''



    icon_twitter='''

        ...

    '''



    icon_vkontakte='''

        ...

    '''



Given all these configuration options, the resulting HTML markup would look like this:



    


      
When there is state there can be no freedom,

         but when there is freedom there will be no state.

         -- Vladimir Lenin

      



      


        

          Twitter icon here...

        



        

          Facebook icon here...

        



        

          LinkedIn icon here...

        



        

          VKontakte icon here...

        

      


    



### Button docs:



* https://developers.facebook.com/docs/plugins/share-button/

* http://developer.linkedin.com/documents/share-linkedin

* https://dev.twitter.com/docs/tweet-button

* http://vk.com/dev/share_details



NOTES:



* Facebook button sucks, because it [does not support](http://stackoverflow.com/questions/20956229/has-facebook-sharer-php-changed-to-no-longer-accept-detailed-parameters) prefilled text.

* LinkedIn [does not support](http://help.linkedin.com/app/answers/detail/a_id/5028/~/linkedin-signal---no-longer-supported) hashtags.



### SVG Icons



Default share buttons are rendered using [Super Tiny Icons](https://github.com/edent/SuperTinyIcons).



## Dependencies



* [Markdown 2.6+](http://pythonhosted.org/Markdown/)



## Copyright



Copyright 2014-2017 [Max Arnold](http://ar0.me/blog/en/), all rights reserved.



This software is released under the MIT License.